/* ==========================================================================
   FIREFLY PATTAYA - LUXURY NATURE RETREAT
   Responsive Stylesheet
   ========================================================================== */

/* --- Large Desktops (max-width: 1440px) --- */
@media (max-width: 1440px) {
  :root {
    --container-max: 1200px;
  }
}

/* --- Desktops & Laptops (max-width: 1200px) --- */
@media (max-width: 1200px) {
  :root {
    --container-max: 1020px;
    --section-padding-y: 5.5rem;
  }

  .split-grid {
    gap: 3rem;
  }

  .split-image-box img {
    height: 440px;
  }

  .footer-top {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 2rem;
  }
}

/* --- Tablets & Small Desktops (max-width: 992px) --- */
@media (max-width: 992px) {
  :root {
    --container-max: 720px;
    --header-height: 80px;
  }

  /* Navigation Mobile Drawer */
  .mobile-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(85vw, 380px);
    height: 100vh;
    height: 100dvh;
    background-color: rgba(6, 9, 7, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6rem 2.5rem 3rem 2.5rem;
    gap: 1.5rem;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
    z-index: 1005;
    overflow-y: auto;
    border-left: 1px solid rgba(212, 175, 55, 0.3);
  }

  .nav-menu.menu-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-link {
    font-size: 1.1rem;
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header-actions .btn-book-header {
    display: none;
  }

  .mobile-menu-cta {
    display: block;
    margin-top: 1.5rem;
    width: 100%;
  }

  .mobile-menu-cta .btn {
    width: 100%;
  }

  .mobile-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .mobile-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* Split layout collapses to 1 column */
  .split-grid,
  .split-grid.reversed {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    direction: ltr;
  }

  .split-image-box img {
    height: 380px;
  }

  /* Cards Grid */
  .cards-grid-3 {
    grid-template-columns: 1fr;
    max-width: 580px;
    margin: 0 auto;
  }

  .accommodation-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
    margin: 0 auto;
  }

  /* Editorial Grid */
  .editorial-grid {
    grid-template-columns: 1fr 1fr;
  }

  .item-large-left,
  .item-medium-right,
  .item-third {
    grid-column: span 1;
    height: 300px;
  }

  .booking-section-wrapper {
    margin-top: -20px;
    margin-bottom: 2rem;
  }

  .booking-bar {
    grid-template-columns: 1fr 1fr;
    padding: 1.25rem;
    gap: 0.85rem;
  }

  .booking-bar > div:last-child {
    grid-column: span 2;
  }

  /* Contact Grid */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  /* Footer */
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* --- Mobile Landscape & Tablets (max-width: 768px) --- */
@media (max-width: 768px) {
  :root {
    --container-max: 100%;
    --section-padding-y: 4.5rem;
  }

  .booking-section-wrapper {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
  }

  .booking-bar {
    grid-template-columns: 1fr;
    padding: 1.25rem 1rem;
    gap: 0.85rem;
  }

  .booking-bar > div:last-child {
    grid-column: span 1;
  }

  .booking-bar .btn {
    width: 100%;
  }

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

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

  .night-image-showcase img {
    height: 320px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .lightbox-prev {
    left: 0.5rem;
  }

  .lightbox-next {
    right: 0.5rem;
  }

  .lightbox-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}

/* --- Mobile Portrait (max-width: 480px) --- */
@media (max-width: 480px) {
  .hero-tagline {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    padding: 0.35rem 1rem;
  }

  .btn-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-group .btn {
    width: 100%;
  }

  .acc-actions {
    flex-direction: column;
  }

  .acc-actions .btn {
    width: 100%;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

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

  .form-wrapper {
    padding: 2rem 1.25rem;
  }

  .contact-info-card {
    padding: 2rem 1.25rem;
  }
}

/* --- Small Mobile (max-width: 390px) & (max-width: 360px) --- */
@media (max-width: 390px) {
  .brand-title {
    font-size: 1.05rem;
  }

  .brand-logo-img {
    width: 42px;
    height: 42px;
  }

  .hero-title {
    font-size: 2.4rem;
  }

  .acc-title {
    font-size: 1.5rem;
  }
}


/* Full cinematic subpage heroes */
@media (max-width: 768px) {
  .subpage-hero {
    min-height: 80vh;
    height: 80vh;
  }
}