/* ============================================================================
   EPIEME HOME — the numbers (03-stats).

   A quiet, editorial stat row in place of the vendor's boxed cards. One
   eyebrow, one headline, one plain-language lede, then four figures set on a
   single baseline and separated by hairlines. No icons, no card chrome, no
   40 %-opacity headline continuation: every piece of text clears WCAG AA on
   its own, the labels read as labels, and the numbers do the talking.

   Markup is a <dl> so assistive tech reads "Bills tracked, 556"; the visual
   order (figure above label) is set here, not in the DOM. The vendor hooks
   `.stats_list` / `.stats_item` / `[data-metric]` are kept so the count-up
   and the scroll-in tween in home-nav.js keep working; every vendor rule
   those classes carry is neutralised below. All authored classes are `st-`.
   ============================================================================ */

.st-section {
  --st-ink: #0b1c15;
  --st-ink-soft: #4c5a51;
  --st-teal: #00896e;
  --st-hairline: #e5eae6;
  --st-gap: clamp(2rem, 4vw, 3.5rem);
}

/* The vendor paints this block on the tertiary (tinted) background with a
   column-gap; keep it on the page's own ground so it reads as part of the
   flow rather than a separate panel. */
.st-section .stats_component.st-component {
  display: flex;
  flex-direction: column;
  gap: var(--st-gap);
  background-color: transparent;
  padding-block: clamp(4rem, 8vw, 7rem);
}

/* ── header ──────────────────────────────────────────────────────────── */
.st-header {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: 40rem;
}

.st-eyebrow {
  margin: 0;
  color: var(--st-teal);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.st-heading {
  margin: 0;
  color: var(--st-ink);
  font-family: var(--_typography---heading-style-h2--font-family);
  font-size: var(--_typography---heading-style-h2--font-size);
  line-height: 1.15;
  font-weight: var(--_typography---heading-style-h2--font-weight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.st-lede {
  margin: 0;
  color: var(--st-ink-soft);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 34rem;
  text-wrap: pretty;
}

/* ── the four figures ────────────────────────────────────────────────── */
.st-section dl.stats_list.st-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--st-hairline);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  place-items: stretch;
}

.st-section .stats_item.st-stat {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
  height: auto;
  padding: 0.25rem 0 0.25rem clamp(1.25rem, 2.5vw, 2rem);
  border: 0;
  border-left: 1px solid var(--st-hairline);
  border-radius: 0;
  background: transparent;
}

.st-section .stats_item.st-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.st-value {
  order: 1;
  margin: 0;
  color: var(--st-ink);
  font-family: var(--_typography---heading-style-h1--font-family);
  font-size: clamp(2.75rem, 5vw, 4.25rem);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.st-label {
  order: 2;
  margin: 0;
  color: var(--st-ink-soft);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .st-section dl.stats_list.st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2rem;
  }
  /* Third figure starts the second row: no divider on its left. */
  .st-section .stats_item.st-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 479px) {
  .st-section .stats_item.st-stat {
    padding-left: 1rem;
  }
  .st-value {
    font-size: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-section .stats_item.st-stat {
    transition: none;
  }
}