/* ==========================================================================
   sections.css — section & layout components
   --------------------------------------------------------------------------
   Milestone 8 · Section & Layout Components

   Spec: Phase 5 §2 (Container/Section/SectionHeader/ContentWrapper/Split/
   Grid) · Phase 5 §3.8 (Breadcrumbs) · Phase 5 §13 (Divider, Badge) ·
   Phase 2 §1.4.11 (CTA band) · Phase 1 §6 (borders/dividers) / §2 (type).

   Reusable layout & section primitives only — no page-specific layout.
   Composes existing tokens, typography utilities, the Button System and the
   StatCard (card.css). Enterprise flat styling: no gradients, no
   glassmorphism, no decorative effects, no new colors.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Content section container — vertical rhythm band (Phase 5 §2.2). One per
   content block; wrap content in `.container`. Band variants alternate
   backgrounds; no top/bottom borders needed (Phase 1 §6 alternation).
   -------------------------------------------------------------------------- */
.content-section {
  padding-block: var(--section-space-mobile);
}

.content-section--surface {
  background: var(--color-surface);
}

.content-section--brand-yellow {
  background: var(--color-brand-yellow);
}

@media (min-width: 768px) {
  .content-section {
    padding-block: var(--section-space-tablet);
  }
}

@media (min-width: 1024px) {
  .content-section {
    padding-block: var(--section-space-laptop);
  }
}

@media (min-width: 1280px) {
  .content-section {
    padding-block: var(--section-space-desktop);
  }
}

/* --------------------------------------------------------------------------
   Section header (Phase 5 §2.3) — eyebrow Label · H2 · intro Body Large.
   Variants: left (default) / centered (CTA band only, becomes left on
   mobile) / with-link (trailing TextButton). space-32 below the header.
   -------------------------------------------------------------------------- */
.section-header {
  margin-block-end: var(--space-32);
}

.section-header--with-link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-24);
}

.section-header__eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--color-primary);
}

.section-header__title {
  margin: 0;
  color: var(--color-primary);
}

.section-header__intro {
  margin: var(--space-16) 0 0;
  max-width: var(--measure);
  color: var(--color-body);
}

.section-header__link {
  flex-shrink: 0;
}

.section-header--centered {
  text-align: center;
}

.section-header--centered .section-header__intro {
  margin-inline: auto;
}

/* Centered is reserved for the CTA band; it becomes left-aligned on mobile
   (Phase 5 §2.3). */
@media (max-width: 767px) {
  .section-header--centered {
    text-align: left;
  }

  .section-header--centered .section-header__intro {
    margin-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   Two-column content block (Phase 5 §2.9 SplitLayout). Asymmetric ratios via
   modifiers; stacks to one column below 768px; gap space-24 → space-32.
   -------------------------------------------------------------------------- */
.content-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}

@media (min-width: 768px) {
  .content-split {
    grid-template-columns: 1fr 1fr;
  }

  .content-split--45-55 {
    grid-template-columns: 9fr 11fr;
  }

  .content-split--55-45 {
    grid-template-columns: 11fr 9fr;
  }

  .content-split--60-40 {
    grid-template-columns: 3fr 2fr;
  }

  .content-split--70-30 {
    grid-template-columns: 7fr 3fr;
  }
}

@media (min-width: 1024px) {
  .content-split {
    gap: var(--space-32);
  }
}

/* --------------------------------------------------------------------------
   Feature grid (Phase 5 §2.5 Grid) — 2 / 3 / 4 columns with documented
   collapse: 4→2→1 · 3→2→1 · 2→2(tablet)→1(mobile). gap space-16 mobile,
   space-24 tablet+ (the doc's space-20 tablet gap is not on the token scale).
   -------------------------------------------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .feature-grid {
    gap: var(--space-24);
  }

  .feature-grid--2,
  .feature-grid--3,
  .feature-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .feature-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feature-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Statistics grid — layout for the existing StatCard (card.css). 2×2 on
   mobile/tablet, 4-across on desktop (Phase 2 §1.4.1 metric rail).
   -------------------------------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

@media (min-width: 768px) {
  .stat-grid {
    gap: var(--space-24);
  }
}

@media (min-width: 1024px) {
  .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   CTA banner — full-width brand-yellow band (Phase 2 §1.4.11). Centered text
   is reserved for this section (Phase 1 §1.3). Primary + optional secondary
   CTA reuse the Button System.
   -------------------------------------------------------------------------- */
.cta-banner {
  padding-block: var(--space-48);
  background: var(--color-brand-yellow);
}

.cta-banner__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .cta-banner__inner {
    padding-inline: var(--container-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .cta-banner {
    padding-block: var(--space-64);
  }

  .cta-banner__inner {
    padding-inline: var(--container-padding-laptop);
  }
}

@media (min-width: 1280px) {
  .cta-banner__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

.cta-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  margin-block-start: var(--space-24);
}

.cta-banner__actions .button {
  width: 100%;
}

@media (min-width: 768px) {
  .cta-banner__actions {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-32);
  }

  .cta-banner__actions .button {
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   Breadcrumb navigation (Phase 5 §3.8) — nav aria-label="Breadcrumb", 14px
   links, chevron separators, aria-current="page" on the current crumb.
   -------------------------------------------------------------------------- */
.breadcrumb {
  margin-block-end: var(--space-24);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
}

.breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.breadcrumb__separator {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--color-body);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.breadcrumb__item--current {
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}

/* --------------------------------------------------------------------------
   Badges (Phase 5 §13) — status pill, text + color (never color-only),
   radius-full. Variants map to existing tokens with verified contrast:
   primary/success/warning are filled; secondary/neutral are outlined so the
   two green-token variants (secondary / success) stay visually distinct.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  white-space: nowrap;
}

.badge--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.badge--secondary {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-heading);
}

.badge--success {
  background: var(--color-secondary);
  color: var(--color-heading);
}

.badge--warning {
  background: var(--color-brand-yellow);
  color: var(--color-heading);
}

.badge--neutral {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-body);
}

/* --------------------------------------------------------------------------
   Divider (Phase 5 §13 / Phase 1 §6) — 1px border; horizontal default,
   vertical in compact rows (breadcrumbs, stat rows); brand-yellow accent.
   -------------------------------------------------------------------------- */
.divider {
  height: 0;
  margin: var(--space-24) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.divider--inset {
  max-width: var(--measure);
}

.divider--accent {
  border-top: 2px solid var(--color-brand-yellow);
}

.divider--vertical {
  display: inline-block;
  width: 1px;
  height: 1.5em;
  margin: 0;
  vertical-align: middle;
  background: var(--color-border);
}

/* --------------------------------------------------------------------------
   Icon + text list — icon 24 baseline (Phase 5 §14), decorative icons
   aria-hidden; icon→text gap space-8, item gap space-16.
   -------------------------------------------------------------------------- */
.icon-list {
  display: grid;
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
}

.icon-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-block-start: 2px;
  color: var(--color-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-list__text {
  color: var(--color-body);
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
}