/* stats_banner block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   stats banner, audience-coloured items */

.stats-banner { background: var(--surface-dark); color: var(--white); position: relative; }
.stats-banner--dark { background: var(--surface-dark); }
/* (The scanline ::before texture was removed 2026-08-05 — it read as an unwanted
   pinstripe on the dark ground.) */
.stats-banner__grid { display: grid; gap: 1.6rem; font-variant-numeric: tabular-nums; }
.stats-banner__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.stats-banner__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.stats-banner__item { border-top: 4px solid var(--accent-on-dark); padding-top: 1.2rem; }
.stats-banner__item--students { border-top-color: var(--aud-students); }
.stats-banner__item--parents { border-top-color: var(--aud-parents); }
.stats-banner__item--employers { border-top-color: var(--aud-employers); }
.stats-banner__number { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 2.75rem); line-height: 1; color: var(--white); }
.stats-banner__prefix, .stats-banner__suffix { font-size: .6em; vertical-align: .32em; }
.stats-banner__label { font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; color: var(--accent-on-dark); margin: .5rem 0 .4rem; }
/* number_accent was emitted and consumed by nothing, so the label was always
   the brand's on-dark accent. `lime` IS that default and needs no rule of its
   own; `white` now does something. `magenta` was removed from the field: it did
   not carry on the navy ground. */
.stats-banner--accent-white .stats-banner__label { color: var(--white); }
.stats-banner__note { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .75); }
@media (max-width: 64em) { .stats-banner__grid[data-count="3"], .stats-banner__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .stats-banner__grid { grid-template-columns: 1fr !important; } }
