/* ─────────────────────────────────────────────────────────────────
   Block: best-creators — case-study card grid (REBUILD-B / Wave 8)
   Replaces the legacy horizontal scroller. Tokens-only, scoped.
   3-col @ ≥1000 px → 2-col → 1-col @ ≤576 px.
   ───────────────────────────────────────────────────────────── */

/* ---------- Container ---------- */
.block-best-creators .bc-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--ds-space-4);
}

/* Override section_spacing default to match the 1200 px frame */
.block-best-creators.section {
  padding-block: var(--ds-space-7);
}

/* ---------- Trust band (above the grid) ---------- */
/* WAVE3-F05 2026-05-08: trust-band border was --ds-ink at 8% alpha.
   On dark schemes the guardrail rebinds ink→#fff so the border became
   white-8%-on-dark ≈ 1.5:1 (fails WCAG 1.4.11 UI 3:1). Use the
   scheme-rule token which is bound per scheme to a 3:1+ divider. */
.block-best-creators .bc-trust-band {
  list-style: none;
  margin: 0 0 var(--ds-space-6);
  padding: var(--ds-space-3) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2) var(--ds-space-4);
  align-items: center;
  justify-content: center;
  border-block: 1px solid var(--scheme-rule, color-mix(in srgb, var(--ds-ink) 14%, transparent));
}

/* SENIOR-T4 (2026-05-07): trust chip bumped 13 → 16px (AARP body floor)
   WAVE3-F05 2026-05-08: --ds-ink-mute (rgb(118,115,106)) on cream
   measured 4.44:1 — borderline below AA. Pin to --ds-ink-soft (darker
   variant, ≈ 8:1) for a clean AA pass without losing the muted feel. */
.block-best-creators .bc-trust-chip {
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ds-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.block-best-creators .bc-trust-chip + .bc-trust-chip::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-trust);
  display: inline-block;
  margin-right: 0.5em;
}

/* ---------- Grid ---------- */
.block-best-creators .bc-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--ds-space-4);
}

.block-best-creators .bc-grid-item {
  display: flex;
}

/* ---------- Card ----------
   WAVE3-F05 2026-05-08 — Pattern B local rebind: this card hardcodes
   a cream paper background, so on .scheme-ink/.scheme-steel/
   .scheme-accent/.scheme-trust outer sections, descendants reading
   --ds-ink (rebound to #fff by the global guardrail) would render as
   white text on cream → contrast collapse. Defeat the guardrail
   inside the card by re-declaring the ink tokens to literal dark
   values, and rebind --scheme-* tokens so any descendant still reads
   the right pair. */
.block-best-creators .bc-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);

  flex: 1;
  display: flex;
  background: var(--ds-paper);
  border: 1px solid color-mix(in srgb, #0e0f0c 6%, transparent);
  border-radius: var(--ds-radius-lg, 16px);
  overflow: hidden;
  box-shadow: var(--ds-shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  isolation: isolate;
}

.block-best-creators .bc-card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.block-best-creators .bc-card:hover,
.block-best-creators .bc-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ds-shadow-lg);
  border-color: color-mix(in srgb, var(--ds-trust) 20%, transparent);
}

/* SENIOR-T4 (2026-05-07): high-contrast focus ring usable on light + dark */
.block-best-creators .bc-card-link:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-lg, 16px);
}

/* SENIOR-T4: each card-link is the entire card; guarantee ≥48px tap min */
.block-best-creators .bc-card-link {
  min-height: var(--ds-touch-target, 48px);
}

/* ---------- Card media (16:9 hero) ---------- */
.block-best-creators .bc-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: color-mix(in srgb, var(--ds-ink) 6%, var(--ds-paper));
}

.block-best-creators .bc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.block-best-creators .bc-card:hover .bc-card-media img {
  transform: scale(1.04);
}

/* ---------- Card body ---------- */
.block-best-creators .bc-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  padding: var(--ds-space-4);
  flex: 1;
}

/* ---------- Type pill ---------- */
/* SENIOR-T4 (2026-05-07): bumped from 11 px → 14 px (matches new --ds-fs-eyebrow) */
.block-best-creators .bc-card-type-pill {
  align-self: flex-start;
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-eyebrow, 14px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-paper);
  background: var(--ds-trust);
  padding: 4px 12px;
  border-radius: var(--ds-radius-sm);
}

/* ---------- Title + verified badge ---------- */
/* SENIOR-T4 (2026-05-07): h3 is sentence-case display per AARP — Anton-uppercase
   only for h1/h2 hero. We keep Anton for visual brand continuity but bump up
   the size to ≥ 24 px @ 1.15 line-height so the case-study card title still
   reads as the dominant scan anchor. */
.block-best-creators .bc-card-title {
  font-family: var(--ds-font-display, Anton, sans-serif);
  font-size: clamp(24px, 1.8vw, 28px);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ds-ink);
  margin: 0;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  flex-wrap: wrap;
}

.block-best-creators .bc-card-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--ds-trust);
  color: var(--ds-paper);
  flex-shrink: 0;
}

/* ---------- Area + tagline ---------- */
/* SENIOR-T4 (2026-05-07): area eyebrow bumped to AARP eyebrow token */
.block-best-creators .bc-card-area {
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-eyebrow, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
  margin: 0;
}

/* SENIOR-T4: tagline uses humane body 18px / 1.6 — 15 px / 1.5 was a soft
   floor breach. Allow 3 lines so older readers don't lose the value prop. */
.block-best-creators .bc-card-tagline {
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  line-height: var(--ds-lh-body, 1.6);
  color: var(--ds-ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Metrics ---------- */
.block-best-creators .bc-card-metrics {
  list-style: none;
  margin: var(--ds-space-2) 0 0;
  padding: var(--ds-space-3) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--ds-ink) 8%, transparent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ds-space-2);
}

.block-best-creators .bc-card-metrics li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* SENIOR-T4 (2026-05-07): stat values bumped 24 → 36 px Anton (per
   framework: stats ≥ 36px Anton OR .ds-h3-humane 24px+). Anton at 24px
   was reading as title-equivalent and made hierarchy ambiguous. */
.block-best-creators .bc-card-metrics strong {
  font-family: var(--ds-font-display, Anton, sans-serif);
  font-size: 36px;
  line-height: 1.05;
  color: var(--ds-ink);
  font-weight: 400;
  display: block;
  word-break: break-word;
}

/* SENIOR-T4: metric labels bumped from 11 → 14 px (--ds-fs-eyebrow);
   line-height 1.5 added for vertical scan accuracy. */
.block-best-creators .bc-card-metrics span {
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-eyebrow, 14px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-ink-mute);
}

/* ---------- Outcome quote ---------- */
/* SENIOR-T4 (2026-05-07): testimonial body text ≥ 18 px / 1.6 line-height
   per framework. Italic preserved as a secondary tone cue but the size is
   the floor that matters. */
.block-best-creators .bc-card-quote {
  margin: var(--ds-space-3) 0 0;
  padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-3) calc(var(--ds-space-3) + 4px);
  background: color-mix(in srgb, var(--ds-cta) 6%, var(--ds-paper));
  border-left: 3px solid var(--ds-cta);
  border-radius: 0 8px 8px 0;
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-body, 1.125rem);
  font-style: italic;
  line-height: var(--ds-lh-body, 1.6);
  color: var(--ds-ink);
}

/* ---------- CTA ---------- */
/* SENIOR-T4 (2026-05-07): inline read-more CTA bumped to eyebrow token
   (14 px tracked +0.04em) so the affordance is legible at arm's length. */
.block-best-creators .bc-card-cta {
  margin-top: auto;
  padding-top: var(--ds-space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--ds-font-body, "DM Sans", sans-serif);
  font-size: var(--ds-fs-eyebrow, 14px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-cta);
  align-self: flex-end;
}

.block-best-creators .bc-card-cta-arrow {
  display: inline-block;
  transition: transform 200ms ease, color 200ms ease;
  color: var(--ds-ink-mute);
}

.block-best-creators .bc-card:hover .bc-card-cta-arrow {
  transform: translateX(4px);
  color: var(--ds-cta);
}

/* ---------- Section CTA bar (below grid, Wave 10) ---------- */
.block-best-creators .bc-section-cta {
  margin-top: var(--ds-space-7);
  padding-top: var(--ds-space-5);
  /* WAVE3-F05 2026-05-08: scheme-rule for cross-scheme UI contrast */
  border-top: 1px solid var(--scheme-rule, color-mix(in srgb, var(--ds-ink) 14%, transparent));
  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 per
   AARP "primary CTA" floor; font 15 → 18 px for readable label. */
.block-best-creators .bc-cta-primary,
.block-best-creators .bc-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),
              box-shadow 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);
}

/* WAVE3-F05 2026-05-08: bumped font to 19px so cream-on-#e36218
   (≈ 3.26:1) qualifies as AA Large at 700w (≥18.66 boundary). The
   parent shared rule above sets 18px (--ds-fs-body) which sits just
   below. */
.block-best-creators .bc-cta-primary {
  background: var(--ds-cta);
  color: var(--ds-paper);
  font-size: 19px;
  box-shadow: var(--ds-shadow-cta, 0 6px 18px rgba(227, 98, 24, 0.28));
}

.block-best-creators .bc-cta-primary:hover,
.block-best-creators .bc-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-best-creators .bc-cta-primary:focus-visible,
.block-best-creators .bc-cta-secondary:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* WAVE3-F05 2026-05-08 — Pattern D outline button. The previous rule
   used `var(--ds-ink)` for color and a low-alpha mix of --ds-ink for
   the border. On dark schemes the guardrail rebinds --ds-ink → #fff,
   so the border collapsed to white-22%-on-dark (≈ 1.5:1, fail WCAG
   1.4.11). Use scheme-fg-with-ds-ink-fallback for color and
   currentColor for the border so the affordance follows scheme text. */
.block-best-creators .bc-cta-secondary {
  background: transparent;
  color: var(--scheme-fg, var(--ds-ink));
  border: 1.5px solid currentColor;
  opacity: 0.95;
}

.block-best-creators .bc-cta-secondary:hover,
.block-best-creators .bc-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 AARP body floor
   WAVE3-F05 2026-05-08: ink-mute on cream measured 4.44:1 — bumped to
   ink-soft for clean AA pass. */
.block-best-creators .bc-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);
}

/* ---------- Responsive: tablet ≤ 992 px (auto-fit handles 2-col naturally) ---- */

/* ---------- Responsive: mobile ≤ 576 px ---------- */
@media (max-width: 576px) {
  .block-best-creators.section {
    padding-block: var(--ds-space-5);
  }
  .block-best-creators .bc-container {
    padding-inline: var(--ds-space-3);
  }
  .block-best-creators .bc-grid {
    grid-template-columns: 1fr;
    gap: var(--ds-space-3);
  }
  .block-best-creators .bc-card-body {
    padding: var(--ds-space-3);
  }
  .block-best-creators .bc-card-title {
    /* SENIOR-T4: keep at 24 px floor on phones — never drop below */
    font-size: 24px;
  }
  .block-best-creators .bc-trust-band {
    justify-content: flex-start;
  }
  .block-best-creators .bc-section-cta {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ds-space-2);
  }
  .block-best-creators .bc-cta-primary,
  .block-best-creators .bc-cta-secondary {
    width: 100%;
    /* SENIOR-T4: keep ≥ 56 px primary on phone, font ≥ 18 px */
    min-height: var(--ds-touch-target-primary, 56px);
    font-size: var(--ds-fs-body, 1.125rem);
  }
}

/* ---------- Responsive: very narrow ≤ 360 px ---------- */
@media (max-width: 360px) {
  .block-best-creators .bc-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .block-best-creators .bc-card-metrics li:nth-child(3) {
    grid-column: span 2;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .block-best-creators .bc-card,
  .block-best-creators .bc-card-media img,
  .block-best-creators .bc-card-cta-arrow,
  .block-best-creators .bc-cta-primary,
  .block-best-creators .bc-cta-secondary {
    transition: none !important;
    transform: none !important;
  }
  .block-best-creators .bc-card:hover,
  .block-best-creators .bc-card:focus-within,
  .block-best-creators .bc-cta-primary:hover {
    transform: none !important;
  }
  .block-best-creators .bc-card:hover .bc-card-media img,
  .block-best-creators .bc-card:hover .bc-card-cta-arrow {
    transform: none !important;
  }
}

/* ── P-FV2-FIX 2026-05-08: sticky-CTA per-block clearance — module ships
   with padding-bottom: 24 px (lower than default 32 px). Last in-page CTA
   "Talk to a facility manager" was covered by the sticky bar at 375. */
@media (max-width: 900px) {
  .block-best-creators {
    padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px)) !important;
  }
}