/* =============================================================================
   THE VAULT — responsive.css
   Mobile-first: the base styles suit small screens; these queries scale up and
   reflow the layouts that need it. Loaded after styles.css.
============================================================================= */

/* Default (small screens): collapse multi-column grids */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.split { grid-template-columns: 1fr; }
.split--reverse .split__media { order: 0; }
.reviews { grid-template-columns: 1fr; }
.gallery { grid-template-columns: repeat(2, 1fr); }
.contact-grid { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.menu-list.cols-2, .menu-list.cols-3 { grid-template-columns: 1fr; }
.field-row { grid-template-columns: 1fr; }
.ticket__grid { grid-template-columns: 1fr 1fr; }

/* Show mobile chrome below the desktop breakpoint */
.nav__links, .nav__cta .btn { display: none; }
.nav__toggle { display: inline-flex; }
.sticky-book { display: block; }
body:has(.sticky-book) { padding-bottom: 76px; } /* room for sticky bar */

/* ---- ≥ 600px : phablet / small tablet ---- */
@media (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .reviews { grid-template-columns: repeat(2, 1fr); }
  .menu-list.cols-2 { grid-template-columns: 1fr 1fr; }
}

/* ---- ≥ 900px : tablet landscape ---- */
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .reviews { grid-template-columns: repeat(3, 1fr); }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .menu-list.cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- ≥ 1024px : desktop — reveal full nav, hide mobile chrome ---- */
@media (min-width: 1024px) {
  .nav__links, .nav__cta .btn { display: inline-flex; }
  .nav__toggle { display: none; }
  .sticky-book { display: none !important; }
  body:has(.sticky-book) { padding-bottom: 0; }
}

/* Fine print for very small screens */
@media (max-width: 380px) {
  .btn { padding-inline: 1.3rem; letter-spacing: 0.12em; }
  .hero__cta { gap: 0.6rem; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* Fallback for browsers without :has() — always keep sticky bar off desktop
   via width query above; :has only enhances bottom padding. */
@supports not (selector(:has(*))) {
  .sticky-book { bottom: 0; }
}