/* ==========================================================================
   Responsive — sections are recomposed, not shrunk
   Checked at 1440 / 1280 / 1024 / 768 / 480 / 375
   ========================================================================== */

/* ---- 1280: tighten the nav's generous desktop gap ----------------------- */
@media (max-width: 1280px) {
  .nav__links { gap: 48px; }
}

/* ---- 1024: tablet. Nav collapses; the reel feed tightens. -------------- */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }

  .passes__grid { gap: 20px; }
  .features { gap: 24px; }

  .contact { grid-template-columns: 1fr; }
  .contact__map { aspect-ratio: 16 / 10; }
}

/* ---- 900: three arches no longer fit side by side ----------------------- */
@media (max-width: 900px) {
  .passes__grid {
    grid-template-columns: repeat(2, minmax(0, 240px));
    gap: 24px;
  }
  /* The third card centres itself under the pair. */
  .passes__grid > .pass:last-child { grid-column: 1 / -1; justify-self: center; width: 240px; }
}

/* ---- 768: phone/tablet boundary.
   Feature cards stop being fixed-ratio plaques and become flowing panels,
   so long copy can never spill past the arch.                              */
@media (max-width: 768px) {
  .panel { border-width: 3px; border-radius: 32px; }

  /* One arch per row. Kept narrow so the silhouette stays portrait —
     stretched wide, the arch reads as a squashed dome. */
  .features { grid-template-columns: minmax(0, 300px); justify-content: center; }
  .feature {
    container-type: normal;
    padding: 19% 11% 15%;
    min-height: 320px;
  }
  .feature__title { font-size: 1.3rem; }
  .feature__body  { font-size: 0.925rem; line-height: 1.42; }

  /* Bigger reels, so one sits in the middle with its neighbours peeking. */
  .reels__viewport { --reel-w: clamp(190px, 44vw, 280px); }

  .stall__grid { grid-template-columns: minmax(0, 1fr); }

  .gallery__fig { width: 70vw; }

  .contact__maplink { top: 16px; left: 14px; padding: 9px 13px; }
}

/* ---- 620: one pass card per row ---------------------------------------- */
@media (max-width: 620px) {
  .passes__grid { grid-template-columns: minmax(0, 260px); }
  .passes__grid > .pass:last-child { width: auto; }

  /* Nav has to clear a 44px burger and still breathe. */
  .nav { gap: 0.5rem; }
  .nav__brand img { width: clamp(96px, 26vw, 128px); }
  .nav__actions { gap: 0.4rem; }
  .btn--gold { font-size: 1rem; padding: 10px 18px; }

  .hero__logos { flex-direction: column; gap: 0.75rem; }
  .hero__badge { width: 140px; }
  .hero__mark  { width: 190px; }
}

/* ---- 480: small phones -------------------------------------------------- */
@media (max-width: 480px) {
  /* One reel fills most of the screen, the next one peeks in. */
  .reels__viewport { --reel-w: 62vw; }
  .reels { padding-block: 1rem; }

  .marquee__item { width: 170px; gap: 0.75rem; }
  .marquee__item span { font-size: 1.375rem; }
  .marquee__item img { width: 26px; height: 26px; }

  .faq__q { gap: 1rem; font-size: 0.9rem; }
  .faq__a p { font-size: 0.9rem; padding-inline: 0; }

  .panel { padding: 28px 1rem; border-radius: 26px; }
  .panel__title { margin-bottom: 26px; }

  .gallery__fig { width: 76vw; }

  .contact__list { gap: 14px; }
  .contact__row { font-size: 1rem; }
}

/* ---- 375: the floor. Nothing may overflow here. ------------------------- */
@media (max-width: 375px) {
  .passes__grid { grid-template-columns: minmax(0, 1fr); }
  .stall { padding: 1rem; }
  .btn--gold { padding: 10px 20px; }
}

/* ---- Touch: hover lifts are meaningless, and can stick ------------------ */
@media (hover: none) {
  .pass:hover, .feature:hover { transform: none; filter: none; }
  .gallery__fig:hover img { transform: none; }
}

/* ---- Coarse pointers get larger targets -------------------------------- */
@media (pointer: coarse) {
  .faq__q { padding-block: 16px; }
  .contact__social img { width: 34px; height: 34px; }
}

/* ---- Landscape phones: the hero must not lock to 100svh ---------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: 6rem 3rem; }
}