/* CHAP — responsive layer.
   The design source sets layout with inline styles (as the handoff prototype did), so these
   rules override the serialised inline values by attribute match. Selector strings must match
   the browser's serialisation exactly (e.g. minmax(0px, 1fr), not minmax(0,1fr)).
   Breakpoints follow the handoff README: 1024px and 720px. */

/* ---------- Page gutters: the kinetic bands and pre-reveal offsets are wider than the
   viewport by design; clip them sideways (clip, not hidden, so position: sticky survives). ---------- */
html, body { overflow-x: clip; }

/* ---------- ≤1024px: five- and four-column grids halve, two-column layouts stack ---------- */
@media (max-width: 1024px) {
  /* Home zone cards 5 → 3 */
  [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"] { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
  /* Numbers band 4 → 2 */
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"] { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
  /* Footer 1.6fr 1fr 1fr 1fr → 2 up */
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
  /* Every asymmetric two-column layout stacks: map teaser, detail body, eco chapters, enquiry */
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: minmax(0px, 1.5fr) minmax(0px, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Attractions editorial grid: wide cards full width, the rest half */
  [style*="grid-column: span 8"] { grid-column: span 12 !important; }
  [style*="grid-column: span 4"] { grid-column: span 6 !important; }
  /* Sticky side panels have nothing to sit beside once stacked */
  [style*="position: sticky"][style*="top: 130px"] { position: static !important; }
}

/* ---------- ≤720px: single column, denser type, scrollable map ---------- */
@media (max-width: 720px) {
  [style*="grid-template-columns: repeat(5, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(4, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(3, minmax(0px, 1fr))"],
  [style*="grid-template-columns: repeat(2, minmax(0px, 1fr))"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Date strip stays a grid, four across */
  [style*="grid-template-columns: repeat(7, minmax(0px, 1fr))"] { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; }
  [style*="grid-column: span 8"],
  [style*="grid-column: span 4"] { grid-column: span 12 !important; }
  /* The wide attraction card is too short for its copy at phone width */
  [style*="aspect-ratio: 16 / 9"] { aspect-ratio: 4 / 5 !important; }
  [style*="font-size: clamp(32px, 3.4vw, 52px)"] { font-size: 28px !important; }
  /* Gallery masonry 3 → 2 */
  [style*="columns: 3"] { columns: 2 !important; }
  /* Park map keeps its proportions and scrolls sideways */
  .chap-map-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .chap-map-scroll > * { min-width: 680px; }
  /* The pinned Rush stage sits under the fixed header once it stacks */
  .chap-rush-stage { padding-top: 96px !important; align-content: center; gap: var(--space-6) !important; }
  /* Hero headline floor from the handoff */
  .chap-hero-title { font-size: clamp(44px, 12vw, 96px) !important; }
  /* Oversized display type in section headings needs a floor too */
  h1, h2 { overflow-wrap: break-word; }
}

/* ---------- Touch: the cursor, tilt and magnetic effects are pointer-only ---------- */
@media (hover: none) {
  .chap-cursor-host, .chap-cursor-host * { cursor: auto !important; }
}