/* ========================================================================================
 * stats.css - .stats > .stat > .stat__value + .stat__label (L2 layer).
 * Ported from .cd-stats/.cd-stat (docs/design-source/homepage-template.html, search
 * ".cd-stats"). site.js's initCounters() animates .stat__value[data-count] on scroll into
 * view; the markup ships the final number as text so no-JS/reduced-motion shows it as-is.
 * ======================================================================================== */

.stats{display:grid;gap:var(--cd-5);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr))}
.stat{display:flex;flex-direction:column;gap:var(--cd-1);border-top:2px solid var(--cd-accent);padding-top:var(--cd-4)}
.stat__value{font-size:var(--cd-h3);font-weight:800;color:var(--cd-ink-strong);letter-spacing:-.015em;line-height:1.1;font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--cd-small);color:var(--cd-ink-muted);line-height:1.45}

/* --band: the course pages' closing stats row, brand logo first (live course pages). */
.stats--band{align-items:center;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.stats__logo{width:min(260px,100%);height:auto}
.stats--band .stat__value{font-size:var(--cd-h4)}

/* --compact: a stat row inside a hero's copy column (home hero, under the CTAs): four
   across from 520px, smaller numbers, a thinner accent rule. */
.stats--compact{gap:var(--cd-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:520px){.stats--compact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stats--compact .stat{border-top-width:1px;padding-top:var(--cd-3)}
.stats--compact .stat__value{font-size:var(--cd-h4)}
.stats--compact .stat__label{font-size:.8125rem;line-height:1.35}