/* ─────────────────────────────────────────────────────────────────
   block-numbers — stat counters (T9)
   ----------------------------------------------------------------
   Two display modes:
   - .mode-grid  : large Anton numerals (clamp 48–128px) over uppercase
                   DM Sans labels. Count-up animation via JS.
   - .mode-pills : legacy autoplay-pills layout (preserved for back-compat).
   Tokens used: --ds-cta, --ds-accent, --ds-paper, --ds-ink,
                --ds-font-heading, --ds-font-body, --ds-space-*.
   ───────────────────────────────────────────────────────────────── */

.block-numbers {
  position: relative;
}

/* SWEEP-A4 (2026-05-08): defensive guard against the legacy
   `#features ul li::before` / `.has-list-checked` checkmark leak.
   Numbers grid items must never get a stray checkmark stamp.
   Note: `.numbers-pill::before` is intentional (active-state pulse) and
   left untouched; we only block leaks on direct LI descendants. */
.block-numbers .numbers-grid > li::before,
.block-numbers .numbers-pills > li::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

.block-numbers .section-numbers {
  padding-top: var(--ds-space-5);
  padding-bottom: var(--ds-space-5);
}

/* ─── GRID MODE (default) ─────────────────────────────────────── */
.block-numbers .numbers-grid {
  display: grid;
  gap: var(--ds-space-6) var(--ds-space-5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 auto;
  padding: 0;
  list-style: none;
  align-items: start;
}

.block-numbers .numbers-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.block-numbers .numbers-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block-numbers .numbers-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.block-numbers .numbers-grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* WAVE-10 (2026-05-07) — explicit responsive ramp:
   mobile = 2 cols, tablet = 3 cols, desktop = configured (4 or 6). */
@media (max-width: 1024px) {
  .block-numbers .numbers-grid.cols-4,
  .block-numbers .numbers-grid.cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .block-numbers .numbers-grid.cols-3,
  .block-numbers .numbers-grid.cols-4,
  .block-numbers .numbers-grid.cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* SWEEP-A4 (2026-05-08): previously this breakpoint dropped the grid
   to 1 column at ≤ 380 px (catches iPhone SE / Android compact). At
   375 px the 1-up rendering wastes vertical real estate and breaks
   the "stat strip" rhythm — 4 stats stack 4-deep instead of 2x2.
   Lowered to ≤ 320 px so 375 px viewports retain the 2-up grid; only
   ultra-narrow legacy devices fall back to 1-up. */
@media (max-width: 320px) {
  .block-numbers .numbers-grid,
  .block-numbers .numbers-grid.cols-2,
  .block-numbers .numbers-grid.cols-3,
  .block-numbers .numbers-grid.cols-4,
  .block-numbers .numbers-grid.cols-6 { grid-template-columns: 1fr; }
}

.block-numbers .numbers-stat {
  margin: 0;
  padding: var(--ds-space-3) var(--ds-space-2);
  text-align: center;
  position: relative;
}

.block-numbers .numbers-stat-value {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  font-size: clamp(48px, 8vw, 128px);
  font-weight: 400;
  line-height: 0.95;
  /* FIX-NUMS (2026-05-08): default to brand CTA orange so the hero
     digits pop on light/paper schemes. Scheme-scoped overrides below
     swap to --scheme-fg (white) on dark / accent / trust schemes —
     orange-on-orange contrast was 1.49 (WCAG fail, needs 4.5). */
  color: var(--ds-cta);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.04em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
  /* Smooth count-up: avoid layout jumps */
  min-width: 1ch;
}

.block-numbers .numbers-prefix,
.block-numbers .numbers-suffix {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  font-size: 0.65em;
  color: var(--ds-cta);
  opacity: 0.92;
  letter-spacing: 0;
}

.block-numbers .numbers-num {
  display: inline-block;
}

/* FIX-NUMS (2026-05-08): when the section is rendered inside a colored
   scheme (accent / trust / steel / ink), the brand orange digits would
   collide with the orange/dark backgrounds. Adopt --scheme-fg (white)
   so digits read cleanly. Light schemes (paper / sand / cream) keep
   the CTA orange treatment defined above.

   FIX-NUMBG-20260508: also fire on `#numbers` directly because
   acme-polish.css paints that section with `background: var(--ds-accent)`
   without using a `.scheme-accent` class. The Pattern B rebind in
   acme-polish maps --ds-ink → #fff for descendants, but does not touch
   --ds-cta — so the digit color stayed orange. The added `#numbers`
   selector below catches that case. */
#numbers .numbers-stat-value,
#numbers .numbers-prefix,
#numbers .numbers-suffix,
.scheme-accent .block-numbers .numbers-stat-value,
.ds-scheme-accent .block-numbers .numbers-stat-value,
.scheme-trust .block-numbers .numbers-stat-value,
.ds-scheme-trust .block-numbers .numbers-stat-value,
.scheme-ink .block-numbers .numbers-stat-value,
.ds-scheme-ink .block-numbers .numbers-stat-value,
.scheme-steel .block-numbers .numbers-stat-value,
.ds-scheme-steel .block-numbers .numbers-stat-value,
.scheme-accent .block-numbers .numbers-prefix,
.scheme-accent .block-numbers .numbers-suffix,
.ds-scheme-accent .block-numbers .numbers-prefix,
.ds-scheme-accent .block-numbers .numbers-suffix,
.scheme-trust .block-numbers .numbers-prefix,
.scheme-trust .block-numbers .numbers-suffix,
.ds-scheme-trust .block-numbers .numbers-prefix,
.ds-scheme-trust .block-numbers .numbers-suffix,
.scheme-ink .block-numbers .numbers-prefix,
.scheme-ink .block-numbers .numbers-suffix,
.ds-scheme-ink .block-numbers .numbers-prefix,
.ds-scheme-ink .block-numbers .numbers-suffix,
.scheme-steel .block-numbers .numbers-prefix,
.scheme-steel .block-numbers .numbers-suffix,
.ds-scheme-steel .block-numbers .numbers-prefix,
.ds-scheme-steel .block-numbers .numbers-suffix {
  color: var(--scheme-fg);
}

/* count-up animation hint — runtime adds .is-counting class */
.block-numbers .numbers-num.is-counting {
  /* purely visual; the value text is replaced by JS during animation */
  font-variant-numeric: tabular-nums;
}

/* SENIOR-T4 (2026-05-07): labels bumped 0.875rem (14 px) → 1rem (16 px)
   AARP body floor; line-height 1.4 → 1.5 for vertical scan accuracy.
   Big Anton numerals already pass at clamp(48px, 8vw, 128px). */
.block-numbers .numbers-stat-label {
  margin-top: var(--ds-space-2);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  font-weight: 700;
  color: var(--ds-ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.5;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .block-numbers .numbers-num,
  .block-numbers .pill-num { transition: none !important; animation: none !important; }
}

/* ─── PILLS MODE (legacy) ─────────────────────────────────────── */
.block-numbers .numbers-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ds-space-3);
  margin: 0;
  padding: 0;
}

.block-numbers .numbers-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  background: var(--scheme-card-bg);
  border: 1.5px solid var(--scheme-rule);
  border-radius: var(--ds-radius-pill);
  cursor: default;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
  position: relative;
  overflow: hidden;
}

.block-numbers .numbers-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scheme-card-bg);
  opacity: 0;
  transition: opacity var(--ds-duration) var(--ds-ease-out);
  border-radius: inherit;
}
.block-numbers .numbers-pill:hover::before { opacity: .6; }

.block-numbers .numbers-pill.active {
  border-color: var(--ds-cta);
  transform: scale(1.02);
  box-shadow: var(--ds-shadow-md);
}

@keyframes block-numbers-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .8;  transform: scale(1.02); }
}
.block-numbers .numbers-pill.active::before {
  opacity: .5;
  animation: block-numbers-pulse 1.5s ease-in-out infinite;
}

.block-numbers .numbers-pill .pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--scheme-fg-mute);
  flex-shrink: 0;
  transition: background var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out);
}

.block-numbers .numbers-pill.active .pill-dot {
  background: var(--ds-cta);
  box-shadow: 0 0 8px var(--ds-cta);
  animation: block-numbers-dot 1s ease-in-out infinite;
}

@keyframes block-numbers-dot {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.3); }
}

.block-numbers .numbers-pill .pill-value {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  font-size: var(--ds-fs-display-sm);
  font-weight: 400;
  color: var(--scheme-fg);
  line-height: 1;
  letter-spacing: 0.005em;
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0.04em;
}
.block-numbers .numbers-pill .pill-prefix,
.block-numbers .numbers-pill .pill-suffix { font-size: 0.7em; opacity: 0.9; }

.block-numbers .numbers-pill.active .pill-value { color: var(--ds-cta); }

/* SENIOR-T4 (2026-05-07): pill label bumped 0.75rem (12 px) →
   1rem (16 px) AARP body floor; tighter tracking.
   SWEEP-A4 (2026-05-08): dropped `white-space: nowrap` — long labels
   like "Google rating - 200+ reviews" forced the pill past the
   viewport edge on phones. Allow natural wrap; the pill flexes its
   height to fit, which is preferable to clipped copy at finger width. */
.block-numbers .numbers-pill .pill-label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  line-height: 1.5;
  font-weight: 700;
  color: var(--scheme-fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}

.block-numbers .numbers-pill .pill-sep {
  width: 3px;
  height: 3px;
  background: var(--scheme-fg-mute);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Raw HTML stat-card support — when authors emit large numerals via raw */
.block-numbers .stat,
.block-numbers .stat-value {
  font-family: var(--ds-font-heading, var(--ds-font-display));
  color: var(--scheme-fg);
  font-size: var(--ds-fs-display-lg);
  line-height: 1;
}

/* SENIOR-T4 (2026-05-07): raw-fallback stat-label bumped to 16 px / 1.5 lh */
.block-numbers .stat-label {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body-sm);
  line-height: 1.5;
  color: var(--scheme-fg-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@media (max-width: 768px) {
  .block-numbers .section-numbers {
    padding-top: var(--ds-space-4);
    /* SWEEP-A4 (2026-05-08): reserve space for the global
       #acme-sticky-cta mobile bar so the last stat row is not hidden
       behind it. Token contract: --ds-sticky-cta-clearance. */
    padding-bottom: calc(var(--ds-space-4) + var(--ds-sticky-cta-clearance, 96px));
  }
  .block-numbers .numbers-pills { gap: var(--ds-space-2); }
  /* SENIOR-T4 (2026-05-07): pill min-height bumped 44 → 48 px AARP min. */
  .block-numbers .numbers-pill {
    padding: var(--ds-space-2) var(--ds-space-4);
    gap: var(--ds-space-2);
    min-height: var(--ds-touch-target, 48px);
  }
  /* SENIOR-T4: never drop labels below 16 px on phones. */
  .block-numbers .numbers-pill .pill-label,
  .block-numbers .stat-label {
    font-size: var(--ds-fs-body-sm);
    line-height: 1.5;
    letter-spacing: 0.06em;
  }
  .block-numbers .numbers-stat-label {
    font-size: var(--ds-fs-body-sm);
    line-height: 1.5;
  }
  /* SWEEP-A4 (2026-05-08): clamp the giant stat-value at the smallest
     viewport — 8vw of 320 still gives ≈ 26 px floor, which together
     with the existing tabular-nums keeps the column sane. */
  .block-numbers .numbers-stat-value {
    font-size: clamp(40px, 12vw, 72px);
  }
}