/**
 * CF Stats — six-mode framework per CF_MODULE_GUIDE §8.
 *
 * Modes:
 *   .cf-stats--light-sky    Briefing-grade default
 *   .cf-stats--light-slate  Analytical / operational
 *   .cf-stats--light-paper  Editorial / long-form (white bg)
 *   .cf-stats--light-mint   Positive outcome / growth (default — green count cue)
 *   .cf-stats--dark-navy    Brand authority anchor
 *   .cf-stats--dark-ops     GSOC / command center
 *
 * Override variables (semantic roles):
 *   --cfst-bg       section background
 *   --cfst-num      big stat number color
 *   --cfst-accent   count animation + suffix glyph color
 *   --cfst-label    small stat label color
 *
 * Mode rule blocks below set the four color variables to brand tokens
 * from cf_core/brand. The base block sets light_mint defaults so the
 * stat block reads as a growth section even if no mode class is applied.
 */

.cf-stats {
  /* Base defaults = light_mint. Mode classes below override. */
  --cfst-bg: var(--cf-apple-pale);
  --cfst-num: var(--cf-navy);
  --cfst-accent: var(--cf-leaf);
  --cfst-label: var(--cf-blue-gray);

  background: var(--cfst-bg);
  padding: 64px 0;
  font-family: var(--cf-font-stack);
}

/* ── Light: Sky (briefing-grade default) ────────────────────────────── */
.cf-stats--light-sky {
  --cfst-bg: var(--cf-sky-light);
  --cfst-num: var(--cf-navy);
  --cfst-accent: var(--cf-sky-mid);
  --cfst-label: var(--cf-blue-gray);
}

/* ── Light: Slate (analytical / operational) ────────────────────────── */
.cf-stats--light-slate {
  --cfst-bg: var(--cf-blue-gray-lightest);
  --cfst-num: var(--cf-navy);
  --cfst-accent: var(--cf-navy);
  --cfst-label: var(--cf-blue-gray);
}

/* ── Light: Paper (editorial / long-form) ───────────────────────────── */
.cf-stats--light-paper {
  --cfst-bg: var(--cf-white);
  --cfst-num: var(--cf-navy);
  --cfst-accent: var(--cf-navy);
  --cfst-label: var(--cf-blue-gray);
}

/* ── Light: Mint (positive outcome / growth) — default ──────────────── */
.cf-stats--light-mint {
  --cfst-bg: var(--cf-apple-pale);
  --cfst-num: var(--cf-navy);
  --cfst-accent: var(--cf-leaf);
  --cfst-label: var(--cf-blue-gray);
}

/* ── Dark: Navy (brand authority) ───────────────────────────────────── */
.cf-stats--dark-navy {
  --cfst-bg: var(--cf-navy);
  --cfst-num: var(--cf-navy-lightest);
  --cfst-accent: var(--cf-sky);
  --cfst-label: color-mix(in srgb, var(--cf-navy-lightest) 75%, transparent);
}

/* ── Dark: Ops (GSOC / command center) ──────────────────────────────── */
.cf-stats--dark-ops {
  --cfst-bg: var(--cf-slate-section);
  --cfst-num: var(--cf-blue-gray-tint);
  --cfst-accent: var(--cf-golden-orange);
  --cfst-label: var(--cf-blue-gray-soft);
}

/* Full-bleed: escape any container and span the viewport edge-to-edge. */
.cf-stats--fullbleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.cf-stats__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.cf-stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 48px;
}

.cf-stats__item {
  text-align: center;
}

.cf-stats__num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 56px;
  line-height: 1;
  margin-bottom: 12px;
  color: var(--cfst-num);
}

.cf-stats__count,
.cf-stats__suffix {
  color: var(--cfst-accent);
}

.cf-stats__label {
  font-family: var(--cf-font-stack);
  font-size: 13px;
  color: var(--cfst-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Dot row — hidden by default; revealed only inside the phone-carousel
   media query below. Lives outside the @media so the default state is
   reliably "not displayed" on every other viewport / input mode. */
.cf-stats__dots { display: none; }

/* ── Phone carousel (touch only) ────────────────────────────────────────
   Below 640px AND with a coarse pointer we restyle the grid into a
   single-row horizontal scroll-snap carousel. Cards keep the full 56px
   number; one centers at a time with the next peeking ~12vw on the
   right. The pointer:coarse guard intentionally excludes mouse /
   trackpad users on a narrow desktop window — horizontal-inside-
   vertical scroll is awkward without touch. Those users keep the
   stacked 1-column layout already produced by the auto-fit grid.    */
@media (max-width: 640px) and (pointer: coarse) {
  .cf-stats { padding: 40px 0; }

  .cf-stats__inner { padding: 0; }

  .cf-stats__grid {
    display: flex;
    grid-template-columns: none;          /* unset the desktop grid */
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 6vw;
    padding: 0 6vw;
    /* Hide native scrollbar so the peek edge reads cleanly. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;       /* don't chain horizontal pulls */
  }
  .cf-stats__grid::-webkit-scrollbar { display: none; }

  .cf-stats__item {
    flex: 0 0 88vw;
    scroll-snap-align: center;
  }

  .cf-stats__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 0 24px;
  }
  .cf-stats__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Inactive dot: low-contrast form of the label color so it tracks
       the active theme mode without needing per-mode rules. */
    background: color-mix(in srgb, var(--cfst-label) 35%, transparent);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .cf-stats__dot.is-active {
    background: var(--cfst-accent);
    transform: scale(1.2);
  }
  .cf-stats__dot:focus-visible {
    outline: 2px solid var(--cfst-accent);
    outline-offset: 2px;
  }
}

/* Non-phone fallback for the older 640px rule — kept for layout
   tightening on narrow tablets / desktop windows where pointer is
   fine. The carousel-specific rules above don't apply here. */
@media (max-width: 640px) and (pointer: fine) {
  .cf-stats { padding: 40px 0; }
  .cf-stats__num { font-size: 42px; }
  .cf-stats__grid { gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-stats__count { transition: none !important; }
  .cf-stats__dot { transition: none !important; }
}