/**
 * WC Reg Components Header — component styles.
 *
 * Source: WeConnect-Join_v3-02MAR2026.html
 * Section: COMPONENT: STEPS (4 steps — 2x2 grid)
 *
 * Place in: web/themes/weconnect/components/wc-reg-components-header/
 */

/* 2-column grid — collapses to 1 column on mobile */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
}

@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}

/* Step card */
.step-card {
  background: var(--white);
  border: 1px solid var(--grey-light);
  border-radius: var(--radius);
  padding: var(--sp-md);
}

/* Large Playfair red step number */
.step-num {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 900;
  color: var(--red-bright);
  line-height: 1;
  margin-bottom: var(--sp-xs);
}

/* Step title */
.step-title {
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--dark);
  margin-bottom: var(--sp-xs);
  line-height: 1.3;
}

/* Step description */
.step-desc {
  font-size: var(--t-small);
  color: var(--body-text);
  line-height: 1.7;
  overflow-wrap: break-word;
}