/* ========================================
   RESPONSIVE — MOBILE FIRST
   ======================================== */

/* Tablet and below */
@media (max-width: 1024px) {
  :root {
    --section-pad-y: 100px;
  }

  .suite-row {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .suite-image {
    height: 320px;
    min-height: 320px;
  }

  .suite-image img {
    min-height: 320px;
  }

  .suite-info {
    padding: 40px 32px;
  }

  /* On tablet, alt rows: keep image on top */
  .suite-row-alt .suite-image {
    order: 1;
  }

  .suite-row-alt .suite-info {
    order: 2;
  }

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

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

  .location-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .location-full-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .suite-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .welcome-image img {
    height: 360px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --section-pad-y: 80px;
    --nav-height: 64px;
  }

  body {
    font-size: 16px;
  }

  /* Nav */
  .nav-links {
    display: none;
  }

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

  .nav-toggle {
    display: flex;
  }

  /* Ensure nav is always solid on mobile — no transparent nav on small screens */
  .nav {
    background: var(--white) !important;
    border-bottom: 1px solid rgba(184, 150, 110, 0.15);
  }

  .nav .nav-link {
    color: var(--charcoal);
  }

  .nav .nav-logo-desktop {
    display: none;
  }

  .nav .nav-logo-mobile {
    display: block;
    height: 32px;
  }

  /* Hero */
  .hero-title {
    font-size: clamp(40px, 10vw, 56px);
  }

  .hero-tagline {
    font-size: 15px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .hero-scroll {
    bottom: 24px;
  }

  /* Sections */
  .section-title {
    font-size: clamp(32px, 8vw, 42px);
  }

  .suite-image {
    height: 240px;
  }

  .suite-info {
    padding: 32px 24px;
  }

  .suite-name {
    font-size: 28px;
  }

  /* Facilities */
  .facilities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .facilities-categories {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Location */
  .location-distances {
    grid-template-columns: 1fr 1fr;
  }

  /* Gallery */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item.wide {
    grid-column: span 2;
  }

  /* Activities */
  .activities-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Contact */
  .contact-grid {
    gap: 40px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Booking Bar */
  .booking-bar {
    display: block;
  }

  body {
    padding-bottom: 60px;
  }

  /* Lightbox */
  .lightbox-prev,
  .lightbox-next {
    font-size: 32px;
    padding: 8px;
  }

  /* Page Hero */
  .page-hero {
    height: 40vh;
    min-height: 280px;
  }

  .nearby-categories {
    grid-template-columns: 1fr;
  }

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

  .suite-amenities {
    grid-template-columns: 1fr;
  }

}

/* Small mobile */
@media (max-width: 480px) {
  .hero-actions .btn {
    width: 100%;
  }

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

  .gallery-item.wide {
    grid-column: span 1;
  }

  .location-distances {
    grid-template-columns: 1fr;
  }

  .suite-gallery-grid {
    grid-template-columns: 1fr;
  }

  .legal-content h2 {
    font-size: 22px;
    margin-top: 36px;
  }

  .legal-content p,
  .legal-content li {
    font-size: 15px;
  }

  .cookie-table {
    font-size: 13px;
  }

  .cookie-table th,
  .cookie-table td {
    padding: 10px 12px;
  }
}