/* ============================================================
   responsive.css — mobile menu, FAB, breakpoints
   Breakpoints: 1024 / 860 / 600 / 400
   ============================================================ */

@media (max-width: 1024px) {
  :root { --section-y: clamp(3rem, 7vw, 5rem); }
}

/* ---- Tablet / mobile nav (hamburger) ----
   Trigger at 1024px: below this the full horizontal nav (logo + 6 links +
   CTA + theme + lang) gets cramped and "Book now" clips. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    background: var(--header-bg);
    backdrop-filter: blur(10px);
    padding: 1rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow);
    transform: translateY(-120%);
    transition: transform var(--dur) var(--ease);
  }
  .nav-menu.is-open { transform: translateY(0); }
  .nav-menu > a { width: 100%; padding: 0.6rem 0; font-size: var(--fs-base); }
  /* Links live inside the solid sand panel here, so keep them dark ink
     even while the header itself is still transparent over the hero. */
  .nav-menu > a:not(.nav-cta) { color: var(--heading); text-shadow: none; }
  .nav-cta { margin-top: 0.4rem; }

  /* Hamburger -> X when open */
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .theme-toggle { margin-top: 0.5rem; }
  .lang-switch { margin-top: 0.5rem; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-social { justify-content: flex-start; }

  .boat-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .review-slide { grid-template-columns: 1fr; justify-items: start; }
  .review-photo { max-width: 118px; font-size: 2.2rem; }
  .review-slide .review-text { font-size: var(--fs-base); }
  .slider-arrow { width: 38px; height: 38px; font-size: 1.3rem; background: rgba(255, 255, 255, 0.92); }
  .slider-arrow.prev { left: 2px; }
  .slider-arrow.next { right: 2px; }
}

@media (max-width: 600px) {
  .hero { min-height: 100svh; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 480px) {
  /* Stack the date + guests row so the calendar popup has room */
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  :root { --header-h: 60px; }
  .brand-logo { height: 36px; }
  .brand-name { font-size: var(--fs-base); }
  .fab { width: 52px; height: 52px; }
  .fab svg { width: 27px; height: 27px; }
}