/* ============================================================
   COMPONENT: Statistics
   FILE: assets/css/statistics.css
   Depends on: statistics.html, statistics.js
   Loaded after hero.css, before the next Stage 5 section's CSS
   (Phase 1.0 §6, in build order).

   Reuses the Foundation exactly as required: colors, type,
   spacing and motion all come from tokens.css; the section
   background is plain white (base.css default), matching the
   "solid surface after a dark gradient Hero" pattern already
   used elsewhere. No global selector is redefined — every rule
   below is scoped under .stats.
   ============================================================ */

.stats {
  background-color: var(--color-white);
  padding-block: var(--space-10);
}

.stats__inner {
  text-align: center;
}

.stats__heading {
  margin: 0 0 var(--space-6);
  color: var(--color-navy);
  font-size: var(--text-h3);
}

/* ------------------------------------------------------------
   GRID
   Single column on mobile, a row of two on tablet/desktop —
   Stage 5.10 correction: only two owner-approved figures remain
   (Years of Experience, Achievements), so this no longer needs
   the four-column desktop layout. Hairline divider between the
   two items reuses the existing border token rather than
   inventing a new one.
------------------------------------------------------------ */
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-3);

  list-style: none;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.stats__number {
  margin: 0;
  color: var(--color-gold);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.stats__label {
  margin: 0;
  color: var(--color-navy);
  font-size: var(--text-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   ENTRANCE MOTION HOOK
   Resting state (no classes) is fully visible: opacity: 1 / no
   transform by default, so a slow or failed statistics.js load
   never hides content — matches the Hero §6 pattern exactly.
   `.js-motion-ready` is added by statistics.js itself,
   synchronously, before it calls AppMotion.staggerChildren().
------------------------------------------------------------ */
.stats__item {
  opacity: 1;
  transform: none;
}

.stats__item.js-motion-ready {
  transition:
    opacity var(--duration-slow) var(--ease-premium),
    transform var(--duration-slow) var(--ease-premium);
  transition-delay: var(--stagger-delay, 0ms);
}

/* ------------------------------------------------------------
   RESPONSIVE
   Breakpoint values copied from tokens.css's documented
   reference values (custom properties cannot be used inside
   @media queries) — same convention hero.css uses.
------------------------------------------------------------ */

/* Tablet and up: row of two, with a hairline divider between
   them. Stage 5.10 correction: was 2x2 on tablet / 4-across on
   desktop for four figures; now a single row of two at every
   breakpoint from tablet up, since only two figures remain. */
@media (min-width: 768px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8) var(--space-4);
  }

  .stats__item {
    position: relative;
  }

  .stats__item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--space-4) / -2);
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: rgba(var(--color-navy-rgb), 0.12);
  }
}

/* Desktop and up: same two-column row, just more breathing room */
@media (min-width: 1024px) {
  .stats {
    padding-block: var(--space-12);
  }
}

/* Small mobile: tighten spacing */
@media (max-width: 479px) {
  .stats {
    padding-block: var(--space-8);
  }

  .stats__grid {
    gap: var(--space-5);
  }
}