/* =============================================================================
   Stat — docs/components/stat.md, and the row shell from sections.md § Stats
   band (Figma `Stats_section`, node 767-10294). A big number with a short
   caption, used in rows of 3–4, separated by 1px x 64px rules.
   The stat itself: column, 8px gap, centred, max-width 220px.

   Value:   typographyStat  — Raleway ExtraBold 48px, 110%, letter-spacing -1.5%
   Caption: typographyLabel — Raleway SemiBold 14px, 140%, letter-spacing 5%

   No count-up animation: motion.md lists stat numbers as deliberately static
   and W2 deleted animateCounter() from js/main.js.
   ============================================================================= */

.stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 220px;
  margin-inline: auto;
  text-align: center;
}

/* Light ground: the division brand reads as EdTech and holds AA on white.
   On a dark section the value switches to --color-division-highlight below. */
.stat-card__number {
  font-size: 3rem;
  font-weight: 800;
  line-height: 110%;
  letter-spacing: -0.015em;
  color: var(--color-division-brand);
}

.stat-card__label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 140%;
  letter-spacing: 0.05em;
  color: var(--color-text-gray);
}

/* ---------------------------------------------------------------------------
   Stats band — sections.md § Stats band. A row of stats with a hairline rule
   between each pair. The rules are markup (<span class="stat-divider">), not
   borders, so they disappear cleanly when the row wraps to 2 x 2.
   --------------------------------------------------------------------------- */
.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-section-md);
}

.stat-row .stat-card {
  flex: 1 1 0;
  min-width: 0;
}

.stat-divider {
  flex-shrink: 0;
  width: 1px;
  height: var(--space-16); /* sections.md: 64px */
  background-color: var(--color-border);
}

/* On a dark ground the rule is a white alpha instead of the grey border. */
:where(.cta-section, .bg-dark, [data-tone='dark']) .stat-divider {
  background-color: var(--color-white-20);
}

/* Dark sections — stat.md's EdTech row */
:where(.cta-section, .bg-dark, [data-tone='dark']) .stat-card__number {
  color: var(--color-division-highlight);
}

:where(.cta-section, .bg-dark, [data-tone='dark']) .stat-card__label {
  color: var(--color-white);
}

/* sections.md § Stats band: 2 x 2 with gapSectionMd below the widest tablet,
   dividers hidden. */
@media (max-width: 900px) {
  .stat-row {
    flex-wrap: wrap;
  }

  .stat-row .stat-card {
    flex: 1 1 40%;
  }

  .stat-divider {
    display: none;
  }
}

@media (max-width: 600px) {
  .stat-card__number {
    font-size: 2.5rem;
  }
}