/*
 * home.css — homepage (front-page.php) styles. Consumes tokens.css only; zero
 * literals outside the one sanctioned @media breakpoint (commented with its
 * token name). Enqueued only on the real front page (see functions.php).
 *
 * Built across PLAN Steps 2–4, section by section (hero → about → pillars →
 * stats → showcase → email capture → brand statement). The original scaffold
 * (.section-stub) placeholder rules were removed once every slot was built.
 */

/* — Section rhythm — every homepage slot shares one vertical cadence — */
.home-section {
  padding-block: var(--space-80);
}

/* (The .section-stub scaffold marker was removed once every homepage slot was
 * built — Step 4. Re-introduce it from history if a future template needs the
 * indexed placeholder pattern.) */

/* ============================================================
 * Hero (Step 2 → UI-rework Phase 1) — full-bleed background photo
 * behind left-set copy (ref-01 composure, dark palette). A real
 * (placeholder-grade) hero image backs the whole section edge-to-
 * edge; a tokenized scrim keeps the white copy legible. Copy is
 * held to a narrow measure and anchored LEFT at every breakpoint.
 * ============================================================ */
.home-hero {
  padding-block: var(--space-96);
  /* Full-bleed hero photo (client photography, Phase 5 D — a woman seated with
     the glowing Glow panel, subject right) + a tokenized scrim so left-set white
     copy stays legible.
     Mobile-first: a top→bottom scrim darkens where the copy sits; the --bp-lg
     override swaps to a left→right scrim that reveals the subject on the right.
     Scrim alpha reuses the color-mix(--color-bg … transparent) idiom already used by
     .build-note / .price--placeholder; the gradient stops are functional (mask-like),
     not design-palette values. */
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--color-bg) 85%, transparent),
      color-mix(in srgb, var(--color-bg) 58%, transparent)
    ),
    url("../img/photos/hero-home-2400.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.home-hero__copy {
  max-width: var(--container-narrow);
}

.home-hero__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-20);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-hero__title {
  margin-block-end: var(--space-24);
  letter-spacing: var(--tracking-tight);
}

.home-hero__lead {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-32);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* Hero CTA row — Add (primary) + Explore the stack (ghost); wraps on narrow
   viewports. */
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
}

.home-hero__price {
  margin-block-end: var(--space-32);
}

/* Quiet build marker for the provisional headline/lead copy (styling via the
   shared .build-note component; this only sets its spacing in the hero). */
.home-hero__note {
  margin-block-start: var(--space-16);
}

@media (min-width: 1024px) /* --bp-lg */ {
  /* Desktop: swap to a left→right scrim so the copy column stays dark and legible
     while the subject on the right of the photo reads clearly. */
  .home-hero {
    background-image:
      linear-gradient(
        to right,
        color-mix(in srgb, var(--color-bg) 90%, transparent),
        color-mix(in srgb, var(--color-bg) 60%, transparent) 45%,
        transparent 80%
      ),
      url("../img/photos/hero-home-2400.jpg");
    background-position: center right;
  }
}

/* — Entrance: a quiet staggered fade-up (WHOOP-like, restrained). Applied only
     when motion is welcome, so reduced-motion users get the final state with no
     animation and nothing hidden. — */
@media (prefers-reduced-motion: no-preference) {
  .home-hero__copy > * {
    animation: spalux-rise var(--duration-slow) var(--ease-out) both;
  }

  .home-hero__copy > *:nth-child(1) { animation-delay: var(--duration-fast); }
  .home-hero__copy > *:nth-child(2) { animation-delay: calc(var(--duration-fast) * 2); }
  .home-hero__copy > *:nth-child(3) { animation-delay: calc(var(--duration-fast) * 3); }
  .home-hero__copy > *:nth-child(4) { animation-delay: calc(var(--duration-fast) * 4); }
  .home-hero__copy > *:nth-child(5) { animation-delay: calc(var(--duration-fast) * 5); }
  .home-hero__copy > *:nth-child(6) { animation-delay: calc(var(--duration-fast) * 6); }
}

@keyframes spalux-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-12));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
 * About (Step 3, sub-step 1) — concise, science-adjacent brand
 * copy. Editorial two-up: eyebrow + short heading | body, with
 * generous air. Mobile-first single column; split from --bp-md.
 * ============================================================ */
.home-about__inner {
  display: grid;
  gap: var(--space-32);
  align-items: start;
}

/* UI-rework Phase 3: sync this section's grid gap to the shared --space-40
   rhythm. Compound selector (.container.home-about__inner) so it also wins over
   the --bp-md gap:64 override below. */
.container.home-about__inner {
  gap: var(--space-40);
}

.home-about__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-about__title {
  letter-spacing: var(--tracking-tight);
}

.home-about__body {
  max-width: var(--container-narrow);
  color: var(--color-text-muted);
}

.home-about__body .build-note {
  margin-block-start: var(--space-16);
}

@media (min-width: 768px) /* --bp-md */ {
  .home-about__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-64);
  }
}

/* ============================================================
 * Brand pillars (Step 3, sub-step 2) — icon · title · terse copy,
 * generous air (ref-02 vibe). 1-up → 3-up at --bp-md.
 * ============================================================ */
.home-pillars__head {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-48);
}

.home-pillars__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-pillars__title {
  letter-spacing: var(--tracking-tight);
}

.home-pillars__grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-40);
}

.pillar__icon {
  display: inline-flex;
  margin-block-end: var(--space-20);
  color: var(--color-brand); /* restrained red accent on the monoline mark */
}

.pillar__icon svg {
  width: var(--space-32);
  height: var(--space-32);
}

.pillar__title {
  margin-block-end: var(--space-12);
}

.pillar__copy {
  color: var(--color-text-muted);
}

.home-pillars__note {
  margin-block-start: var(--space-32);
}

@media (min-width: 768px) /* --bp-md */ {
  .home-pillars__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-48);
  }
}

/* ============================================================
 * Recovery highlights BENTO (UI-rework Phase 2 rebuild) — an
 * asymmetric 7-block grid (ref bento-01/02): 3 MEDIA blocks
 * (1 video with a bottom-left play/pause control + 2 image
 * blocks with a caption overlaid at the foot), 2 TEXT PANELS
 * with background (one holds the brand button), and 2 BARE
 * text blocks with no background/padding (one holds an inline
 * link). Media are tokenized placeholders until real assets
 * land. Mobile 2-col mosaic → explicit 4-col × 3-row layout at
 * --bp-md. Grid spans/positions are structural integers, not
 * design values.
 * ============================================================ */
.home-bento__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column with varied media aspects */
  gap: var(--space-12);
}

/* UI-rework Phase 3: once revealed, open the tight mosaic to the shared
   --space-40 section rhythm (the grid ul is the [data-reveal] element, so
   reveal.js adds .is-revealed to it). */
.home-bento__grid.is-revealed {
  gap: var(--space-40);
}

/* — Base block — sharp clinical edges; grounds content to the foot. — */
.bento-b {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-12);
  min-width: 0;
  border-radius: var(--radius-none);
}

/* Text panel WITH background (the classic bento tile look). */
.bento-b--panel {
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
}

/* Bare text block: no background, no padding — reads as intentional
   negative space, sitting directly on the page. */
.bento-b--bare {
  padding: 0;
  background: none;
  border: 0;
}

/* Media block (video + image) — fills its grid area; content overlays. */
.bento-b--media {
  overflow: hidden;
  padding: 0;
  min-height: var(--bento-media-min); /* off-scale component dimension (token) — keeps media a real box */
  /* Cap the width to the grid cell: on mobile these blocks carry an aspect-ratio,
     and where the --bento-media-min floor exceeds the aspect-derived height the
     browser would otherwise derive width from that height (min-height * 16/9) and
     overflow the page. max-width:100% pins width to the cell so only height floors. */
  max-width: 100%;
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
}

/* Full-bleed photo in the image blocks — sits under the ::after scrim and the
   z-indexed caption (the .photo--fill wrapper is absolute; see components.css). */
.bento-b__photo {
  position: absolute;
  inset: 0;
}

/* Faint centered placeholder marker (kept for any block still without an asset). */
.bento-b__media-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  text-align: center;
}

/* The <video> fills the block behind the control. */
.bento-b__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--color-surface);
}

/* Bottom scrim on the image blocks so an overlaid caption stays legible
   once a real photo lands (reuses the hero's color-mix(--color-bg …
   transparent) scrim idiom — functional, not a palette value). */
.bento-b--tall::after,
.bento-b--wide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--color-bg) 82%, transparent),
    transparent 55%
  );
  pointer-events: none;
}

/* Image caption — overlaid at the block foot, above the scrim. */
.bento-b__caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
}

.bento-b__caption-title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.bento-b__caption-sub {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* — Video play/pause control — bottom-left corner (ref bento-01). — */
.bento-b__playpause {
  position: absolute;
  left: var(--space-24);
  bottom: var(--space-24);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  padding: 0;
  color: var(--color-text);
  background-color: color-mix(in srgb, var(--color-bg) 55%, transparent);
  border: var(--border-hairline) solid color-mix(in srgb, var(--color-text) 30%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.bento-b__playpause:hover,
.bento-b__playpause:focus-visible {
  background-color: color-mix(in srgb, var(--color-bg) 35%, transparent);
  border-color: var(--color-text);
}

.bento-b__playpause svg {
  width: var(--space-20);
  height: var(--space-20);
}

/* Play glyph when paused, pause glyph when playing (data-playing set in
   bento.js; default paused → play glyph, since a source-less placeholder
   cannot autoplay). */
.bento-b__icon--pause { display: none; }
.bento-b__playpause[data-playing="true"] .bento-b__icon--play  { display: none; }
.bento-b__playpause[data-playing="true"] .bento-b__icon--pause { display: block; }

/* — CTA panel — eyebrow · title · brand button. — */
.bento-b__eyebrow {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand); /* the single red accent */
}

.bento-b__title {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.bento-b__btn {
  align-self: flex-start;
}

/* — Stat panel figure + label (real specs). — */
.bento-b__figure {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.bento-b__label {
  margin: 0;
  color: var(--color-text-muted);
}

/* — Bare fact line + the bare block's lead line (display-weight). — */
.bento-b__fact,
.bento-b__lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

/* — Inline text link (not a button) on the bare block. — */
.bento-b__link {
  align-self: flex-start;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-brand);
  text-decoration: none;
  padding-block-end: var(--space-2);
  border-bottom: var(--border-hairline) solid color-mix(in srgb, var(--color-brand) 45%, transparent);
  transition: color var(--duration-fast), border-color var(--duration-fast);
}

.bento-b__link:hover,
.bento-b__link:focus-visible {
  color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

.home-bento__note {
  margin-block-start: var(--space-24);
}

/* Mobile (single column): media carry varied aspect ratios so the column has
   rhythm (16:9 video/banner, 3:4 portrait) rather than a uniform box stack. */
.bento-b--media { aspect-ratio: 16 / 9; }
.bento-b--tall  { aspect-ratio: 3 / 4; }

@media (min-width: 640px) /* --bp-sm */ {
  /* Large phone / small tablet: 2-col mosaic — the 3 media span full-width and
     the 4 text tiles pair across the columns (dense packing tucks one beside
     each panel). Tall reverts to landscape now that it is full-width. */
  .home-bento__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
  }
  .bento-b--tall { aspect-ratio: 16 / 9; }
  .bento-b--video,
  .bento-b--tall,
  .bento-b--wide { grid-column: 1 / -1; }
}

@media (min-width: 1024px) /* --bp-lg */ {
  /* Explicit 4-col × 3-row composition — media-led and asymmetric (below this
     the 2-col mosaic above carries mobile + tablet, where 4 columns get cramped):
     ┌───────────┬───────┬─────┐
     │           │       │ cta │   (video 2×2 · tall 1×2 · cta 1×1)
     │   video   │ tall  ├─────┤
     │           │       │link │
     ├─────┬─────┼───────┴─────┤
     │stat │fact │    wide      │   (stat · fact 1×1 · wide 2×1)
     └─────┴─────┴─────────────┘ */
  .home-bento__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, minmax(var(--space-96), auto));
    grid-auto-flow: row;
  }
  /* Grid areas drive media height here — drop the mobile 16:9 aspect. */
  .bento-b--media { aspect-ratio: auto; }
  .bento-b--video  { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .bento-b--tall   { grid-column: 3;          grid-row: 1 / span 2; }
  .bento-b--cta    { grid-column: 4;          grid-row: 1; }
  .bento-b--linked { grid-column: 4;          grid-row: 2; }
  .bento-b--stat   { grid-column: 1;          grid-row: 3; }
  .bento-b--fact   { grid-column: 2;          grid-row: 3; }
  .bento-b--wide   { grid-column: 3 / span 2; grid-row: 3; }
}

/* ============================================================
 * Recovery Stack showcase (Step 4, sub-step 1) — present gun ·
 * panel · bundle as clinical stack-cards (ref-02 vibe: title +
 * terse copy + price, generous air). The bundle is the featured
 * card and the one you buy. 1-up → 3-up at --bp-lg. A measured
 * scroll reveal is layered on via [data-reveal] at the file end.
 * ============================================================ */
.home-showcase__head {
  max-width: var(--container-narrow);
  margin-block-end: var(--space-48);
}

.home-showcase__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-showcase__title {
  letter-spacing: var(--tracking-tight);
}

.home-showcase__lead {
  margin-block-start: var(--space-20);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.home-showcase__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-40);
}

/* — Stack card — surface panel, hairline edge, sharp corners. Column layout so
     the price/CTA foot bottom-aligns across cards of differing copy length. — */
.stack-card {
  position: relative; /* anchors the .card-link stretched overlay (gun/panel cards) */
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-24);
  background-color: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-none);
}

/* Featured (bundle): brand-red edge is the accent that marks the one you buy —
   restrained, no fill wash (red stays an accent, never a background). */
.stack-card--featured {
  border-color: var(--color-brand);
}

/* Clickable showcase cards — every card carries a .card-link on the title, so
   the whole card links to its product page (the bundle → /recovery-routine/).
   Give them a tactile hover + keyboard focus cue (edge brightens, surface
   lifts) matching the shop cards. The title link inherits the heading colour
   (not the brand-red base <a>). */
.stack-card__title .card-link,
.stack-card__title .card-link:hover {
  color: inherit;
}

.stack-card:has(.card-link) {
  transition: border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.stack-card:has(.card-link):hover,
.stack-card:has(.card-link):focus-within {
  border-color: var(--color-text-muted);
  background-color: var(--color-surface-2);
}

/* Featured (bundle) keeps its brand edge on hover — still lifts the surface. */
.stack-card--featured:has(.card-link):hover,
.stack-card--featured:has(.card-link):focus-within {
  border-color: var(--color-brand);
}

/* The bundle's Add CTA sits above the stretched title link (.card-link::after,
   z-index 1), so it stays its own click target. */
.stack-card__cta {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .stack-card:has(.card-link) {
    transition: none;
  }
}

.stack-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Pill badge — the sanctioned pill shape; brand fill marks the featured card.
   UI-rework Phase 3: lifted out of flow onto the card's top-right edge, half-
   hanging above it (translateY(-50%)). Anchored to .stack-card (position:
   relative); the card has no overflow:hidden, so it is not clipped. */
.stack-card__badge {
  position: absolute;
  top: 0;
  right: var(--space-16);
  transform: translateY(-50%);
  z-index: 1;
  padding: var(--space-4) var(--space-12);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-brand);
  border-radius: var(--radius-pill);
}

.stack-card__copy {
  color: var(--color-text-muted);
}

/* Foot pins the price (and, on the featured card, the Buy CTA) to the card
   bottom so the row reads as an aligned set. */
.stack-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.stack-card__cta {
  align-self: flex-start;
}

.home-showcase__note {
  margin-block-start: var(--space-32);
}

@media (min-width: 1024px) /* --bp-lg */ {
  .home-showcase__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-40);
  }
}

/* ============================================================
 * Brand statement (Step 4, sub-step 3) — the closing beat.
 * Oversized display type with a single brand-red accent fragment
 * (ref-04 typographic confidence + accent discipline). Left-set
 * so it reads as a deliberate manifesto, distinct from the
 * centered capture above it.
 * ============================================================ */
.home-statement__text {
  font-size: var(--type-display);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* The one accent — a single red fragment carries the statement (red stays an
   accent, never a wash). */
.home-statement__accent {
  color: var(--color-brand);
}

.home-statement__lead {
  max-width: var(--container-narrow);
  margin-block-start: var(--space-24);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.home-statement__note {
  margin-block-start: var(--space-16);
}

/* — Homepage showcase reveal stagger (Step 4 → Step 14 → UI-rework Phase 1). The
     generic [data-reveal] primitive lives in components.css (site-wide); this keeps
     only the showcase-grid-specific stagger so the three cards rise in sequence.
     Gated on motion-welcome to match the primitive. — */
@media (prefers-reduced-motion: no-preference) {
  /* The gun/panel cards are both [data-reveal] and now hover-interactive (they
     carry .card-link). The reveal primitive sets `transition: opacity, transform`
     and would outrank the hover transition, dropping its easing — so restate the
     full list here (higher specificity + later source wins) so BOTH the reveal and
     the hover cue ease. Property order is fixed so the stagger delays target only
     the reveal props. */
  .has-reveal .stack-card:has(.card-link) {
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
  }

  /* Delays map 1:1 to the transition props; the hover props (border/surface) stay
     at 0s so the hover cue is never delayed. The bundle (nth-child 3) has no
     .card-link → the base 2-prop reveal transition; the extra delay values are
     harmlessly ignored there. */
  .has-reveal .home-showcase__grid > [data-reveal]:nth-child(2) {
    transition-delay: var(--duration-fast), var(--duration-fast), 0s, 0s;
  }

  .has-reveal .home-showcase__grid > [data-reveal]:nth-child(3) {
    transition-delay: calc(var(--duration-fast) * 2), calc(var(--duration-fast) * 2), 0s, 0s;
  }
}

/* ============================================================
 * "In practice" slider (UI-rework Phase 1) — static left intro
 * (eyebrow · headline · lead · ← → arrows) beside a horizontal,
 * swipeable peek-track of lifestyle "moment" cards (ref slider-01
 * vibe, dark/sharp/tokenized skin). Mobile: intro stacked above the
 * track. --bp-lg: two columns (intro | track). The track scrolls
 * natively (touch/trackpad); slider.js enhances the arrows.
 * `--peek` is a structural "cards-visible" count (incl. the peek) —
 * like a grid span, not a design value.
 * ============================================================ */
.home-slider__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.home-slider__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.home-slider__title {
  letter-spacing: var(--tracking-tight);
}

.home-slider__lead {
  max-width: var(--container-narrow);
  margin-block-start: var(--space-20);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.home-slider__nav {
  display: flex;
  gap: var(--space-16);
  margin-block-start: var(--space-32);
}

/* Circular arrow — pill shape (sanctioned interactive shape); ghost at rest,
   brand on hover/focus (the section's interactive red accent). Rendered
   `disabled` in markup; slider.js enables + manages the end states. */
.home-slider__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-56);
  height: var(--space-56);
  padding: 0;
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}

.home-slider__arrow svg {
  width: var(--space-24);
  height: var(--space-24);
}

.home-slider__arrow:hover:not(:disabled),
.home-slider__arrow:focus-visible {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

/* Disabled (at a track end) — dimmed via the color-mix idiom, no opacity literal. */
.home-slider__arrow:disabled {
  color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-border) 55%, var(--color-bg));
  cursor: default;
}

/* Track — horizontal flex row, native scroll + snap; scrollbar hidden. */
.home-slider__track {
  --peek: 1.2; /* cards visible incl. the peek (structural count, like a grid span) */
  display: flex;
  gap: var(--space-40);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  list-style: none;
  margin: 0;
  padding: 0;
  scrollbar-width: none; /* Firefox */
}

.home-slider__track::-webkit-scrollbar {
  display: none; /* WebKit */
}

.home-slider__track:focus-visible {
  outline: var(--border-thin) solid var(--color-brand);
  outline-offset: var(--space-4);
}

.slide-card {
  flex: 0 0 calc((100% - (var(--peek) - 1) * var(--space-16)) / var(--peek));
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  scroll-snap-align: start;
}

.slide-card__media {
  width: 100%;
}

.slide-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.slide-card__eyebrow {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* The one red accent at rest — the featured moment's eyebrow. */
.slide-card--featured .slide-card__eyebrow {
  color: var(--color-brand);
}

.slide-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.home-slider__note {
  margin-block-start: var(--space-24);
}

@media (min-width: 768px) /* --bp-md */ {
  .home-slider__track { --peek: 2.2; }
}

@media (min-width: 1024px) /* --bp-lg */ {
  .home-slider__inner {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-64);
    align-items: center;
  }

  .home-slider__track {
    --peek: 2.4;
    min-width: 0; /* allow the track to shrink inside its grid cell so it scrolls */
  }
}