/* ============================================================
   responsive.css — Breakpoint refinements
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .chapter__body {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  .chapter__special { order: 2; }

  .media-grid { grid-template-columns: repeat(2, 1fr); }

  .finale__frame { width: 84vw; }

  .nav-arrows { bottom: var(--sp-2); }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
  :root {
    --text-hero: clamp(2.6rem, 12vw, 3.6rem);
    --text-title: clamp(1.7rem, 7vw, 2.3rem);
  }

  .chapter { padding-top: var(--sp-5); }

  .media-grid { grid-template-columns: 1fr; }

  .media-item--hero img,
  .media-item--hero video { aspect-ratio: 4 / 3.4; }

  .chapter-ticks { display: none; }

  .audio-controls {
    top: calc(var(--sp-1) + env(safe-area-inset-top, 0px));
    right: var(--sp-2);
  }

  .icon-btn__label { display: none; }

  .icon-btn { padding: 0.6rem; }

  .nav-arrow { width: 46px; height: 46px; }

  .intro__hint { white-space: normal; width: 80%; text-align: center; }
}

/* ---------- Landscape / short viewports ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .scene { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }

  .chapter { min-height: auto; }

  .intro__title { font-size: clamp(2.2rem, 7vh, 3.2rem); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .anim-kenburns,
  .media-item--hero img,
  .media-item--hero video,
  .finale__hero { animation: none !important; }

  .media-item,
  .chapter__header,
  .chapter__story p,
  .chapter__special {
    opacity: 1 !important;
    transform: none !important;
  }
}