/*
 * Module: Numbered Steps
 *
 * Yellow bg, rounded corner, two-column: text+CTA + 2×2 numbered grid.
 * Used on: Facilitation
 * Dependencies: tokens.css, buttons.css
 */

.numbered-steps {
  background: var(--color-accent);
  border-bottom-left-radius: var(--radius-section);
  width: 100%;
  padding: var(--space-100) 0;
  overflow: hidden;
}
/* Override global block gap — numbered-steps must sit flush against the section above it */
.page-content .wp-block-post-content > .numbered-steps,
.page-content .wp-block-post-content > .wp-block-group.numbered-steps {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.numbered-steps__columns {
  max-width: var(--max-width); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--space-xl);
}

/* ── Text column ── */
.numbered-steps__text {
  flex: 0 1 38%;
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.numbered-steps__text > * { margin: 0; }

.numbered-steps__title {
  font-family: var(--font-heading); font-weight: 600; font-size: 40px;
  color: var(--color-navy); line-height: 1.15;
}
.numbered-steps__body {
  font-family: var(--font-body); font-weight: 400;
  font-size: 22px; line-height: 1.3; color: #000;
}
.numbered-steps__body p + p { margin-top: 1em; }

.numbered-steps__cta .wp-block-button__link,
.numbered-steps__cta.btn {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.9px;
  padding: 16px 30px;
  white-space: nowrap;
  transition: background 0.2s ease;
  max-width: 100%;
}
.numbered-steps__cta .wp-block-button__link:hover,
.numbered-steps__cta.btn:hover { background: #1B6AC0; }

/* ── Steps grid ── */
.numbered-steps__grid {
  flex: 0 1 58%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

/* ── Step item ── */
.numbered-steps__step {
  display: flex; flex-direction: column; gap: var(--space-2xs);
}
.numbered-steps__step-number {
  font-family: var(--font-body); font-weight: 900; font-size: 48px;
  line-height: 1; letter-spacing: -0.48px;
  text-transform: uppercase;
  color: var(--color-primary);
}
.numbered-steps__step-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 24px;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: #000;
}
.numbered-steps__step-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: 18px; line-height: 28px; color: #000;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .numbered-steps {
    padding: 60px 24px;
    border-bottom-left-radius: 150px;
  }
  .numbered-steps__columns { flex-direction: column; gap: 48px; }
  .numbered-steps__text { flex: none; }
  .numbered-steps__grid { flex: none; width: 100%; }
}
@media (max-width: 768px) {
  .numbered-steps {
    padding: 48px 16px;
    border-bottom-left-radius: 80px;
  }
  .numbered-steps__columns { padding: 0; }
  .numbered-steps__text { max-width: 100%; }
  .numbered-steps__title { font-size: 28px; }
  .numbered-steps__body { font-size: 16px; }
  .numbered-steps__cta .wp-block-button__link { font-size: 12px; white-space: normal; text-align: center; }
  .numbered-steps__grid { grid-template-columns: 1fr; max-width: 100%; }
  .numbered-steps__step-number { font-size: 36px; }
  .numbered-steps__step-title { font-size: 20px; }
  .numbered-steps__step-body { font-size: 16px; }
}