/* ==========================================================================
   RESPONSIVE.CSS
   Breakpoints, mobile navigation behaviour, and hero video adjustments.
   Mobile-first overrides are layered on top of style.css at each
   breakpoint below.
   ========================================================================== */

/* ---------- Large desktop refinement (tighten nav gaps before wrapping) --- */
@media (max-width: 1180px) {
  .nav-list {
    gap: 1.1rem;
  }

  .nav-list a {
    font-size: 0.72rem;
  }
}

/* ---------- Tablet / small desktop ---------------------------------------- */
@media (max-width: 1024px) {
  .main-nav .nav-list {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-book-btn {
    display: none;
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .split-media {
    order: -1;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .reasons-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-xl);
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-field.full {
    grid-column: auto;
  }
}

/* ---------- Mobile ---------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --header-height: 76px;
  }

  .container,
  .container-narrow {
    padding-inline: var(--space-md);
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    align-items: flex-end;
  }

  .hero-content {
    padding-bottom: var(--space-xl);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .hero-actions .anywhere-book-now-button {
    width: 100%;
  }

  .hero-scroll-cue {
    display: none;
  }

  .trust-bar .container {
    justify-content: flex-start;
    gap: var(--space-xl) var(--space-lg);
  }

  .card-grid,
  .card-grid.cols-2,
  .card-grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .reasons-grid {
    grid-template-columns: 1fr;
  }

  .split-media-tag {
    left: var(--space-sm);
    bottom: -1rem;
    padding: var(--space-sm) var(--space-md);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn,
  .cta-actions .anywhere-book-now-button {
    width: 100%;
  }

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

/* ---------- Small mobile ----------------------------------------------------- */
@media (max-width: 420px) {
  .logo {
    font-size: 1.15rem;
  }

  .mobile-nav-list a {
    font-size: 2rem;
  }
}

/* ---------- Hero video: ensure full coverage on mobile with no letterboxing -- */
@media (max-width: 720px) and (orientation: portrait) {
  .hero-media video {
    object-position: center 30%;
  }
}