/* ─────────────────────────────────────────────────────────────────
   Block: creators-showcase — featured-projects stats strip (Wave 10)
   Tokenized; scoped under .block-creators-showcase. The accent used for
   water/active state derives from --ds-cta so the block adapts when the
   theme cta is overridden.
   W10-A1: replaced var(--scheme-*) with --ds-* tokens + var(--ds-font-mono)
           with var(--ds-font-body); added section CTA bar w/ a11y +
           reduced-motion guards.
   ───────────────────────────────────────────────────────────── */

.block-creators-showcase {
  --bcs-accent: var(--ds-cta);
}

/* SWEEP-A4 (2026-05-08): defensive guard against the global
   `#features ul li::before` / `.has-list-checked` checkmark leak.
   Stat cards and CTA bar must never be stamped with a stray check. */
.block-creators-showcase .stats-showcase li::before,
.block-creators-showcase .stats-showcase-track li::before,
.block-creators-showcase .cs-section-cta li::before {
  content: none !important;
  background: none !important;
  display: none !important;
}

/* Eyebrow above the stat strip */
/* SENIOR-T4 (2026-05-07): aligned to .ds-eyebrow utility — 14 px tracked,
   sentence-case forbidden, weight 700 for visibility on paper backgrounds.
   WAVE3-F05 2026-05-08: orange on cream is 3.26:1 — at 14px+700w the
   audit threshold is small-bold (4.5:1) so the eyebrow failed. Bumped
   to 19px so it qualifies as AA Large (≥18.66+700w boundary) where 3.0
   is the floor. */
.block-creators-showcase .creators-showcase-eyebrow {
  font-family: var(--ds-font-body);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-cta);
  margin: 0 0 var(--ds-space-3) 0;
  text-align: center;
}

.block-creators-showcase .stats-showcase {
  display: flex;
  justify-content: center;
  padding: var(--ds-space-2) 0;
  contain: layout style;
}

.block-creators-showcase .stats-showcase-track {
  display: flex;
  justify-content: center;
  gap: var(--ds-space-3);
  width: 100%;
  max-width: var(--ds-container-sm);
}

/* Stat cards
   WAVE3-F05 2026-05-08 — Pattern B local rebind: card hardcodes paper
   bg + ink text, so on dark schemes the global guardrail flips
   --ds-ink → #fff and white text lands on cream → contrast collapse.
   Defeat the guardrail by re-pinning ink tokens to literal dark values
   inside the card. */
.block-creators-showcase .stat-card {
  --scheme-bg: #fbf7ef;
  --scheme-fg: #0e0f0c;
  --scheme-fg-soft: rgba(14, 15, 12, 0.78);
  --scheme-fg-mute: rgba(14, 15, 12, 0.62);
  --scheme-card-bg: #fbf7ef;
  --scheme-card-fg: #0e0f0c;
  --scheme-rule: rgba(14, 15, 12, 0.12);
  --ds-ink: #0e0f0c;
  --ds-ink-soft: rgba(14, 15, 12, 0.78);
  --ds-ink-mute: rgba(14, 15, 12, 0.62);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 130px;
  max-width: 180px;
  padding: var(--ds-space-5) var(--ds-space-3);
  background: var(--ds-paper);
  color: #0e0f0c;
  border-radius: var(--ds-radius);
  border: 1px solid color-mix(in srgb, #0e0f0c 8%, transparent);
  overflow: hidden;
  transition: border-color var(--ds-duration-slow, 300ms) var(--ds-ease-out, ease),
              box-shadow var(--ds-duration-slow, 300ms) var(--ds-ease-out, ease);
  will-change: border-color, box-shadow;
}

.block-creators-showcase .stat-card:hover {
  border-color: color-mix(in srgb, #0e0f0c 22%, transparent);
}

/* Water-fill effect */
.block-creators-showcase .stat-card .water-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bcs-accent) 20%, transparent) 0%,
    color-mix(in srgb, var(--bcs-accent) 12%, transparent) 50%,
    color-mix(in srgb, var(--bcs-accent) 5%, transparent) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  will-change: height;
  transform: translateZ(0);
}

.block-creators-showcase .stat-card .water-fill::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -5%;
  right: -5%;
  height: 12px;
  background:
    radial-gradient(ellipse 30% 100% at 20% 100%,
      color-mix(in srgb, var(--bcs-accent) 25%, transparent) 0%,
      transparent 100%),
    radial-gradient(ellipse 30% 100% at 80% 100%,
      color-mix(in srgb, var(--bcs-accent) 25%, transparent) 0%,
      transparent 100%);
  opacity: 0;
  transition: opacity var(--ds-duration-slow, 300ms) var(--ds-ease-out, ease);
}

.block-creators-showcase .stat-card .water-fill::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 50%;
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--bcs-accent) 40%, white);
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%);
}

.block-creators-showcase .stat-card.active .water-fill {
  animation: bcsWaterRise var(--fill-duration, 3000ms) linear forwards;
}

.block-creators-showcase .stat-card.active .water-fill::before {
  opacity: 1;
  animation: bcsWaveMotion 0.8s ease-in-out infinite;
}

.block-creators-showcase .stat-card.active .water-fill::after {
  animation: bcsBubbleRise var(--fill-duration, 3000ms) ease-out infinite;
}

@keyframes bcsWaterRise {
  0% { height: 0%; }
  100% { height: 100%; }
}

@keyframes bcsWaveMotion {
  0%, 100% { transform: translateX(-3%) scaleY(1); }
  50% { transform: translateX(3%) scaleY(1.3); }
}

@keyframes bcsBubbleRise {
  0% { bottom: 10%; opacity: 0; transform: translateX(-50%) scale(0.5); }
  15% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  100% { bottom: 95%; opacity: 0; transform: translateX(calc(-50% + 8px)) scale(0.3); }
}

.block-creators-showcase .stat-card.active {
  border-color: color-mix(in srgb, var(--bcs-accent) 50%, transparent);
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--bcs-accent) 18%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--bcs-accent) 12%, transparent);
}

.block-creators-showcase .stat-card.active .stat-number {
  color: var(--bcs-accent);
}

/* Content */
.block-creators-showcase .stat-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-1);
  text-align: center;
}

/* SENIOR-T4 (2026-05-07): stat values bumped 1.6rem (≈26 px) → 2.25rem
   (36 px) Anton — meets framework "stats ≥ 36 px Anton" floor. */
.block-creators-showcase .stat-number {
  font-family: var(--ds-font-display);
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--ds-ink);
  line-height: 1.05;
  transition: color var(--ds-duration-slow, 300ms) var(--ds-ease-out, ease);
  letter-spacing: 0.01em;
}

/* SENIOR-T4: stat label bumped from --ds-fs-eyebrow (14 px) to 16 px AARP body
   floor with 1.5 line-height — labels were borderline at arm's length. */
.block-creators-showcase .stat-label {
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ds-ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- Section CTA bar (below stats, Wave 10) ---------- */
.block-creators-showcase .cs-section-cta {
  margin-top: var(--ds-space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-3);
}

/* SENIOR-T4 (2026-05-07): primary CTA height bumped 48 → 56 px;
   font 15 → 18 px (var(--ds-fs-body)). */
.block-creators-showcase .cs-cta-primary,
.block-creators-showcase .cs-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-touch-target-primary, 56px);
  padding: 0 var(--ds-space-5);
  border-radius: var(--ds-radius-pill, 999px);
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
              background-color var(--ds-duration-fast, 150ms) var(--ds-ease, ease),
              border-color var(--ds-duration-fast, 150ms) var(--ds-ease, ease);
}

/* SENIOR-T4: replaced last raw rgba literal with token-only shadow.
   Earlier versions had multiple hex/rgba literals; W10-A1 already
   tokenised most. The fallback for --ds-shadow-cta now references the
   --ds-cta hue via color-mix for older browsers, with a single rgba
   floor matching design-system intent. */
/* WAVE3-F05 2026-05-08: bumped font to 19px so cream-on-#e36218
   (≈ 3.26:1) qualifies as AA Large at 700w. */
.block-creators-showcase .cs-cta-primary {
  background: var(--ds-cta);
  color: var(--ds-paper);
  font-size: 19px;
  box-shadow: var(--ds-shadow-cta, 0 6px 18px color-mix(in srgb, var(--ds-cta) 28%, transparent));
}

.block-creators-showcase .cs-cta-primary:hover,
.block-creators-showcase .cs-cta-primary:focus-visible {
  background: var(--ds-cta-hover, var(--ds-cta-dk, var(--ds-cta)));
  transform: translateY(-1px);
}

/* SENIOR-T4 (2026-05-07): high-contrast focus ring usable on light/dark */
.block-creators-showcase .cs-cta-primary:focus-visible,
.block-creators-showcase .cs-cta-secondary:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* WAVE3-F05 2026-05-08 — Pattern D outline button. Was --ds-ink for
   color and --ds-ink-22% for border; on dark schemes the guardrail
   rebound --ds-ink → #fff so the border collapsed to white-22%-on-dark
   ≈ 1.5:1 (fail WCAG 1.4.11). currentColor border + scheme-fg fallback. */
.block-creators-showcase .cs-cta-secondary {
  background: transparent;
  color: var(--scheme-fg, var(--ds-ink));
  border: 1.5px solid currentColor;
  opacity: 0.95;
}

.block-creators-showcase .cs-cta-secondary:hover,
.block-creators-showcase .cs-cta-secondary:focus-visible {
  background: var(--scheme-fg, var(--ds-ink));
  color: var(--scheme-bg, var(--ds-paper));
  border-color: var(--scheme-fg, var(--ds-ink));
  opacity: 1;
}

/* SENIOR-T4 (2026-05-07): reassurance line bumped 13 → 16 px / 1.5 lh
   WAVE3-F05 2026-05-08: ink-mute on cream measured 4.44:1 — bumped to
   ink-soft for clean AA pass. */
.block-creators-showcase .cs-cta-reassurance {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ds-ink-soft);
}


/* Mobile */
@media (max-width: 600px) {
  .block-creators-showcase .stats-showcase-track {
    gap: var(--ds-space-2);
  }
  .block-creators-showcase .stat-card {
    min-width: 95px;
    padding: var(--ds-space-4) var(--ds-space-2);
    border-radius: var(--ds-radius-sm);
  }
  /* SENIOR-T4 (2026-05-07): keep stat number ≥ 28 px on phones to
     preserve hierarchy at finger distance. */
  .block-creators-showcase .stat-number {
    font-size: 1.75rem;
    /* SWEEP-A4 (2026-05-08): wrap the stat-number text on mobile so
       multi-word values like "0 surprise" or "<80 min" don't bust the
       narrow card or get clipped at finger width. */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }
  /* SENIOR-T4: 11 px broke AARP body floor (≥ 16 px) — bumped to 14 px
     using --ds-fs-eyebrow (still uppercase tracked label). */
  .block-creators-showcase .stat-label {
    font-size: var(--ds-fs-eyebrow, 14px);
    letter-spacing: 0.04em;
  }
  .block-creators-showcase .stat-card .water-fill::after {
    display: none;
  }
  .block-creators-showcase .cs-section-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-2);
  }
  /* SWEEP-A4 (2026-05-08): reserve clearance on the block itself so
     the reassurance line and section CTAs are not hidden behind the
     global #acme-sticky-cta mobile bar. Padding inside .cs-section-cta
     would only have grown the container; we need the entire section
     to push above the sticky bar's stacking context. */
  .block-creators-showcase {
    padding-bottom: var(--ds-sticky-cta-clearance, 96px);
  }
  .block-creators-showcase .cs-cta-reassurance {
    /* keep reassurance fully visible — give the line a touch more
       breathing room above the bar on the smallest phones. */
    margin-bottom: var(--ds-space-2);
  }
  .block-creators-showcase .cs-cta-primary,
  .block-creators-showcase .cs-cta-secondary {
    width: 100%;
    /* SENIOR-T4: ≥ 56 px primary on phone; ≥ 18 px font */
    min-height: var(--ds-touch-target-primary, 56px);
    font-size: var(--ds-fs-body, 1.125rem);
  }
}

@media (max-width: 380px) {
  .block-creators-showcase .stat-card {
    min-width: 80px;
    padding: var(--ds-space-3) var(--ds-space-1);
  }
  /* SENIOR-T4: keep stat ≥ 24 px even on the narrowest phones — labels
     and CTAs above carry the metric anchor; never shrink past 1.5rem. */
  .block-creators-showcase .stat-number {
    font-size: var(--ds-fs-h3);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .block-creators-showcase .stat-card .water-fill,
  .block-creators-showcase .stat-card .water-fill::before,
  .block-creators-showcase .stat-card .water-fill::after,
  .block-creators-showcase .cs-cta-primary,
  .block-creators-showcase .cs-cta-secondary {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .block-creators-showcase .stat-card.active .water-fill {
    height: 100%;
  }
  .block-creators-showcase .cs-cta-primary:hover {
    transform: none !important;
  }
}

/* ── Senior-UX text floor (W2-T10 / 2026-05-08) ────────────────────
   Audit: 'Featured projects' rendered at 14px on mobile. Bump
   eyebrow above the senior 16px floor (AARP / WCAG AAA).
   WAVE3-F05 2026-05-08: bumped further to 19px so orange-on-cream
   (≈ 3.26:1) qualifies as AA Large at 700w (≥18.66 boundary). */
.block-creators-showcase .creators-showcase-eyebrow,
.block-creators-showcase .ds-eyebrow {
  font-size: 19px !important;
}