/* ==========================================================================
   responsive.css — every breakpoint, in one place.

   Base (in the files before this one) is the phone layout. The Figma frame is
   desktop-only, so every rule below 1024px is a deliberate addition rather
   than a translation of the file.

   ~320–767   phone     single column, nav drawer, no busts
   768–1199   tablet    passes and the triad go three-up, ornaments return
   1200–1599  desktop   Figma nav and hero composition, pinned artist rail
   1600+      large     frozen at design size, centred
   ========================================================================== */

/* ==========================================================================
   >= 600px
   ========================================================================== */
@media (min-width: 600px) {
  :root { --gutter: 28px; }

  .grid { grid-template-columns: 58.54% 39.03%; }   /* 872.2 / 581.5 of 1490 */

  .footer__cols {
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
    justify-items: start;
    text-align: left;
    gap: clamp(22px, 5.510vw, 95.2px);
  }
}

/* ==========================================================================
   >= 768px — tablet
   ========================================================================== */
@media (min-width: 768px) {
  .tickets { grid-template-columns: repeat(3, 1fr); }
  .ticket { aspect-ratio: 397.3 / 629.2; }
  .ticket__body { gap: 0; padding: 10.95% 16.65% 9.7%; }

  .rule-ornament { display: block; }
  .triad { grid-template-columns: repeat(3, 1fr); }
  .different__inner { padding-top: calc(100vw * 0.6285 * 0.45); }
  .intro__statue { display: block; }
}

/* ==========================================================================
   >= 1024px — desktop nav and the fixed Figma hero composition
   ========================================================================== */
@media (min-width: 1024px) {
  :root { --gutter: 40px; }

  .nav__burger { display: none; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__links.is-open {
    position: static;
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding-left: clamp(0px, 3.472vw, 60px);
    padding-block: 0;
    background: none;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
  }
  .nav__links.is-open a { padding: 0; font-size: var(--text-lg); }

  /* Hero becomes the exact 1728 x 1436.7 Figma box; children are placed by
     percentage inside it and are free to bleed past the bottom edge. */
  .hero {
    aspect-ratio: 1728 / 1436.7;
    overflow: visible;
    padding-top: 0;
  }
  /* At the design width the backdrop takes its Figma geometry: image 35 runs
     to its natural 1622 height and bleeds past the hero, over the intro. */
  .hero__bg { inset: 0 auto auto 0; left: -0.48%; width: 100.95%; height: auto; }
  /* Scoped through .hero__bg on purpose: the base rule is `.hero__bg img`
     (0,1,1), so a bare `.hero__stars` (0,1,0) loses on specificity no matter
     how late it appears — which is why the desktop backdrop used to collapse
     to zero height and fall back to the page's tiled starfield. */
  .hero__bg .hero__stars { position: relative; inset: auto; height: auto; object-fit: fill; }
  .hero__bg .hero__damask { top: -0.8%; left: -1.26%; width: 102.5%; height: auto; object-fit: fill; }
  .hero__title { position: absolute; top: 13.02%; left: 50%; margin: 0; transform: translateX(-50%); z-index: 4; }
  .hero__artists { position: absolute; top: 36.33%; left: 0; width: 100%; }
  .hero__roses { position: absolute; top: 90.43%; left: 0; width: 100%; margin: 0; z-index: var(--z-raised); }

  /* Statues hang off the intro block at their Figma offsets. */
  .intro__statue--l { top: 41.2%; }
  .intro__statue--r { top: 24.6%; }

  /* Headline sits +359 below the arch top (Figma 4743.5 vs arch 4384.5). */
  .different__inner { padding-top: clamp(180px, 17.766vw, 307px); }

  /* The manjira box has a transparent tail; the heading rides back up over it
     so it lands at Figma's +533, matching the overlapping Figma frames. */
  .lineup__head { margin-top: -50px; }

  /* The pinned rail replaces the swipe carousel from here up. */
  .rail-progress { display: block; }
}

/* ==========================================================================
   >= 1200px — footer takes its Figma arrangement
   ========================================================================== */
@media (min-width: 1200px) {
  .footer { min-height: 335.6px; padding-bottom: 0; }
  .footer__logo { position: absolute; left: 4.44%; top: clamp(26px, 2.584vw, 44.65px); }
  .footer__top { justify-items: center; gap: 0; }
  .footer__bottom { margin-top: clamp(60px, 7.5vw, 130px); }
  .social { position: absolute; left: 5.41%; bottom: clamp(20px, 2.6vw, 45px); }
}

/* ==========================================================================
   Pointer capability — the custom cursor is for mice only
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor summary { cursor: none; }
  body.has-custom-cursor .cursor { display: block; }
}