/* ============================================================
   THE SKY · ADULTS ONLY — responsive.css   (load AFTER style.css)
   ============================================================ */

/* ---------------- TABLET (<= 980px) ---------------- */
@media (max-width: 980px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .bar__label { width: 100%; margin: 0 0 0.4rem; }
}

/* ---------------- MOBILE (<= 720px) ---------------- */
@media (max-width: 720px) {
  :root { --header-h: 64px; }

  /* Mobile nav */
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; z-index: 110; }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.75rem; background: var(--sand); transform: translateX(100%); transition: transform 0.4s var(--ease); z-index: 105; }
  .main-nav.open { transform: none; }
  .main-nav a { font-family: var(--font-display); font-size: 1.8rem; }
  .main-nav a::after { display: none; }

  /* The bar: fixed to bottom (thumb zone), respects iOS home indicator */
  .bar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,0.14); box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.4); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .bar__inner { padding: 0.6rem var(--gutter); gap: 0.6rem; }
  .bar__label { display: none; }
  /* Pre-opening: collapse inline email to a single button that opens the modal */
  .bar--waitlist .bar__inline input[type="email"] { display: none; }
  .bar--waitlist .btn { width: 100%; }
  /* Live (2027): hide date fields, show single "Check availability" that opens engine */
  .bar--booking .bf-field { display: none; }
  .bar--booking .btn { width: 100%; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

  /* Layout collapses */
  .split, .split--reverse { grid-template-columns: 1fr; gap: 1.75rem; }
  .split--reverse .split__text { order: 0; }
  .split .media { aspect-ratio: 4 / 3; }
  .grid-3 { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  form .row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .media.tall { grid-row: span 1; aspect-ratio: 1; }
  .gallery .media.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
  .hero { min-height: 80svh; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ---------------- SMALL MOBILE (<= 420px) ---------------- */
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .gallery .media.wide { grid-column: span 1; aspect-ratio: 3 / 2; }
}

/* ---------------- LARGE (>= 1500px) ---------------- */
@media (min-width: 1500px) { :root { --maxw: 1360px; } }