/* ==========================================================================
   RESPONSIVE: desktop-first, breakpoints at 1100 / 980 / 640 / 440
   ========================================================================== */

@media (max-width: 1100px) {
  .nav-links { gap: 24px !important; }
}

/* ---------- Tablet & below: mobile nav, stacked panels ---------- */
@media (max-width: 980px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: grid; }
  .hdr-in { flex-wrap: nowrap !important; gap: 12px !important; }
  .hdr-in > .btn { margin-left: auto; }

  .mobile-nav {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-primary); border-top: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 40px -20px rgba(5,31,62,.55);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .5s var(--ease-out), visibility 0s .5s;
  }
  .mobile-nav.is-open { max-height: calc(100vh - var(--header-h-scrolled)); overflow-y: auto; visibility: visible; transition-delay: 0s; }
  .mobile-nav nav { padding: 8px var(--gutter) 28px; display: flex; flex-direction: column; }
  .m-link { display: flex; align-items: center; min-height: 56px; font: 800 italic 22px var(--font-heading); color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
  .m-link:hover { color: var(--color-accent-soft); }
  .mobile-nav .btn { margin-top: 24px; min-height: 56px; font-size: 17px; }

  .wd { flex-direction: column; height: auto; }
  .wd-item { flex: none; min-height: 340px; }
  .wd-desc { opacity: 1; max-height: 160px; transform: none; }
  .wd-cta { opacity: 1; max-height: 48px; margin-top: 18px; transform: none; }
  .fl { grid-template-columns: 1fr; grid-template-rows: none; }
  .fl .a, .fl .b, .fl .c { grid-column: auto; grid-row: auto; min-height: 280px; }
  .hero-ph { width: 100%; opacity: .22; -webkit-mask-image: none; mask-image: none; }
  .faq-a { padding-right: 0; }
  .hero-h1 { font-size: 46px !important; }
  .fab.wa { right: 16px; bottom: 16px; }
  .fab.top { right: 22px; bottom: 88px; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  .hdr .btn__text { display: none; }
  .hdr-in > .btn { padding: 0 !important; width: 48px; min-height: 48px; }
  .logo-pill { padding: 5px 10px; }
  .logo-pill img { height: 44px !important; }
  .hdr.on .logo-pill img { height: 40px !important; }
  .wd-item { min-height: 380px; }
  .stat-card { padding: 24px 22px; }
  .post__body { padding: 24px; }
  #contact .btn { width: 100%; }
  .about-photo { border-radius: 28px !important; }
}

@media (max-width: 480px) {
  .hero-h1 { font-size: 40px !important; }
  .book-card { padding: 24px !important; border-radius: 20px !important; }
  .eyebrow__text { letter-spacing: .14em; font-size: 12px; }
}

@media (max-width: 440px) {
  .book-grid { grid-template-columns: 1fr !important; }
  .book-grid .span-2 { grid-column: auto; }
}

/* Short laptop screens: keep the booking card inside the first viewport */
@media (min-width: 981px) and (max-height: 780px) {
  #top .wrap { padding-top: 40px !important; padding-bottom: 190px !important; }
}