/* =============================================================================
   CASES — small-screen text + chrome normalisation (tokens.css only).
   Applies to the real dossier DOM built by folio.js / carousels.js / videoblock.js.
   Two jobs:
     (1) TAP-to-play affordance shown when html.tap-mode is set (_touch.js).
     (2) Re-base the section's oversized display/script type — which folio.css
         sizes in *viewport* units (vw) and folio.js auto-fits with a 48px FLOOR —
         onto CONTAINER units, and let big words WRAP, so nothing overflows a phone.
   Desktop (>=900) is untouched → the LOCKED approved layout from folio.css.
============================================================================= */

/* ---- TAP affordance: a persistent ▶ over each video tile on touch devices ---- */
.tap-mode .fo-card--v .fo-card__media,
.tap-mode .vb-tile { cursor: pointer; }
.tap-mode .fo-card--v .fo-card__media::before,
.tap-mode .vb-tile::before {
  content: '\25B6'; position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(22px, 7cqw, 34px); color: var(--color-accent);
  text-shadow: 0 2px 14px rgba(0,0,0,.55); pointer-events: none;
  background: radial-gradient(circle at center,
              color-mix(in srgb, var(--color-ink) 30%, transparent) 0 30%, transparent 60%);
  transition: opacity .2s ease;
}
.tap-mode .fo-card--v.is-active .fo-card__media::before,
.tap-mode .vb-tile.is-active::before { opacity: 0; }

/* touch: kill the case-viewer aspect-ratio transition so first play never
   animates a resize that slides the video out from under the finger */
.tap-mode .fo-cz2__viewer, .tap-mode .cz1__viewer { transition: none; }

/* ============================ SMALL SCREENS (< 900) ============================ */
@container (max-width: 899.98px) {
  /* token --margin-inline is vw-based (inflated in a narrow preview box) — use
     container-relative inline padding so the card width is predictable */
  .fo[data-mode="dossier"] { padding: var(--space-7) clamp(16px, 4cqw, 28px); }

  /* dossier masthead */
  .fo__dossier-head { margin-bottom: var(--space-6); gap: var(--space-3); }
  .fo__dossier-title { font-size: clamp(48px, 15cqw, 96px) !important; padding-bottom: var(--space-2); }
  .fo__dossier-lead { font-size: var(--fs-body); }
  .fo__chapters { gap: var(--space-6); }

  /* chapter cards: comfortable padding, stacked head so the name gets full width */
  .fo-ch, .fo-ch--flag { padding: var(--space-6) var(--space-5); gap: var(--space-5); }
  .fo-ch__head { grid-template-columns: 1fr; gap: var(--space-2); align-items: start; }
  .fo-ch__idx { font-size: clamp(48px, 15cqw, 76px) !important; }
  /* override folio.js's auto-fit (inline, non-important) + its 48px floor + nowrap */
  .fo-ch__name {
    font-size: clamp(26px, 7.4cqw, 46px) !important;
    white-space: normal !important; overflow-wrap: anywhere; line-height: .94; --fo-bleed: 1;
  }
  .fo-ch__scope { font-size: var(--fs-body); max-width: none; }

  /* script kickers are sized in vw by tokens — re-base on the container & let wrap */
  .fo-req__kicker, .fo-feat__kicker, .fo__kicker {
    font-size: clamp(26px, 8.5cqw, 40px) !important; white-space: normal !important;
  }
  .fo-req__lead, .fo-feat__lead, .fo-feat__scope { font-size: var(--fs-body); max-width: none; }

  /* DMs (Beauty AI) read full width */
  .fo-req__grid { columns: 1; }
  .fo-dm__text { font-size: var(--fs-body); }

  /* carousels + case viewer fill the column (no cramped fixed box) */
  .cz1, .fo-cz2 { grid-template-columns: 1fr; gap: var(--space-5); }
  .cz1__stage, .fo-cz2__stage { width: 100%; justify-content: center; }
  .cz1__viewer, .fo-cz2__viewer { max-width: none; flex: 1 1 auto; min-width: 0; }

  /* Before/After: big, centred phone */
  .fo-feat { grid-template-columns: 1fr; gap: var(--space-5); }
  .fo-baw__frame { max-width: min(320px, 78cqw); margin-inline: auto; }
}

/* ============================ PHONES ONLY (< 600) ============================ */
@container (max-width: 599.98px) {
  /* the carousel viewer should fill the whole column — so move the ‹ › arrows
     OUT of the flex row and OVERLAY them on the viewer edges (story/reel style).
     Otherwise the side arrows squeeze the video into a tiny middle strip. */
  .cz1__stage, .fo-cz2__stage { position: relative; display: block; }
  .cz1__viewer, .fo-cz2__viewer { width: 100%; max-width: none !important; margin-inline: auto; }
  .cz1__nav, .fo-cz2__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: var(--space-8); height: var(--space-8);
    background: color-mix(in srgb, var(--color-accent) 92%, transparent);
    box-shadow: 0 4px 16px rgba(0,0,0,.45);
  }
  .cz1__nav:active, .fo-cz2__nav:active { transform: translateY(-50%) scale(.92); }
  .cz1__stage .cz1__nav:first-child,  .fo-cz2__stage .fo-cz2__nav:first-child  { left: var(--space-3); }
  .cz1__stage .cz1__nav:last-child,   .fo-cz2__stage .fo-cz2__nav:last-child   { right: var(--space-3); }
}

/* tablet keeps cover-rail thumbs a touch larger for fat fingers */
@container (min-width: 600px) and (max-width: 899.98px) {
  .cz1__cov, .fo-cz2__cov { width: calc(var(--space-9) + var(--space-3)); }
  .fo-ch__name { font-size: clamp(40px, 8cqw, 72px) !important; }
  .fo-ch__idx  { font-size: clamp(60px, 11cqw, 96px) !important; }
}