/* ============================================================
   KODAI RESORT — Global Responsive Fixes
   Add this file as the LAST stylesheet in base.html
   <link rel="stylesheet" href="{% static 'css/public/responsive.css' %}">
   ============================================================ */

/* ── 1. NAVBAR ── */
@media (max-width: 992px) {
  nav {
    padding: 16px 20px !important;
  }
  nav.scrolled {
    padding: 12px 20px !important;
  }
  .nav-links {
    display: none !important;
  }
  .nav-hamburger {
    display: block !important;
  }
}

/* ── 2. HERO ── */
@media (max-width: 768px) {
  .hero {
    height: 100svh; /* safe viewport height on iOS */
  }
  .hero-title {
    font-size: clamp(2.4rem, 10vw, 5rem) !important;
  }
  .hero-sub {
    font-size: 0.95rem !important;
    padding: 0 8px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: center;
    gap: 12px !important;
  }
  .hero-ctas a {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
}

/* ── 3. BOOKING BAR ── */
@media (max-width: 768px) {
  .booking-bar-inner {
    flex-direction: column !important;
  }
  .booking-field {
    border-right: none !important;
    border-bottom: 1px solid rgba(201,168,76,0.15) !important;
    padding: 16px 20px !important;
  }
  .booking-submit {
    padding: 18px 20px !important;
    justify-content: center;
    width: 100%;
  }
}

/* ── 4. MEMBER / GUEST BANNER ── */
@media (max-width: 768px) {
  .member-banner-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 14px 20px !important;
    gap: 12px !important;
  }
  .member-actions {
    flex-wrap: wrap;
    gap: 8px !important;
  }
  .guest-teaser {
    flex-wrap: wrap;
    padding: 10px 20px !important;
    font-size: 11px !important;
    gap: 6px !important;
    justify-content: center;
  }
  .teaser-divider { display: none; }
}

/* ── 5. SECTIONS — global padding ── */
@media (max-width: 992px) {
  section {
    padding: 70px 24px !important;
  }
  .contact-section,
  .events-section {
    padding: 70px 24px !important;
  }
}
@media (max-width: 480px) {
  section {
    padding: 50px 16px !important;
  }
}

/* ── 6. ABOUT GRID ── */
@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-img-stack {
    height: 320px !important;
  }
  .about-img-stack img:last-child {
    width: 50% !important;
    height: 220px !important;
  }
  .about-stats {
    gap: 24px !important;
  }
}

/* ── 7. ROOMS CAROUSEL ── */
@media (max-width: 992px) {
  .rooms-header {
    padding: 0 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .rooms-track {
    padding: 0 20px 20px !important;
    gap: 14px !important;
  }
  .room-tile {
    flex: 0 0 290px !important;
    height: 400px !important;
  }
  .rooms-arrow { display: none !important; }
}
@media (max-width: 480px) {
  .room-tile {
    flex: 0 0 260px !important;
    height: 380px !important;
  }
}

/* ── 8. AMENITIES GRID ── */
@media (max-width: 992px) {
  .amenities-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}
@media (max-width: 480px) {
  .amenities-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 9. GALLERY MASONRY (home) ── */
@media (max-width: 992px) {
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto !important;
  }
  .gallery-masonry .tall,
  .gallery-masonry .wide {
    grid-row: span 1 !important;
    grid-column: span 1 !important;
  }
  .gallery-item {
    height: 180px !important;
  }
}
@media (max-width: 480px) {
  .gallery-masonry {
    grid-template-columns: 1fr !important;
  }
  .gallery-item {
    height: 200px !important;
  }
}

/* ── 10. EVENTS GRID ── */
@media (max-width: 992px) {
  .events-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 600px) and (max-width: 992px) {
  .events-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 11. TESTIMONIALS ── */
@media (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 600px) and (max-width: 992px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 12. CONTACT ── */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* ── 13. FOOTER ── */
@media (max-width: 992px) {
  footer {
    padding: 60px 24px 30px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px !important;
  }
}
@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ── 14. ALL ROOMS PAGE ── */
@media (max-width: 992px) {
  .rooms-page {
    padding: 50px 20px 70px !important;
  }
  .rooms-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  .filter-inner {
    flex-direction: column !important;
  }
  .filter-field {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  }
  .filter-submit {
    padding: 18px !important;
  }
  .page-hero {
    padding: 110px 20px 60px !important;
  }
}
@media (max-width: 600px) {
  .rooms-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 15. BOOKING FORM PAGE ── */
@media (max-width: 900px) {
  .hero-strip, .breadcrumb-bar { display: none !important; }
  .main-wrapper {
    grid-template-columns: 1fr !important;
    padding: 20px 16px 80px !important;
    gap: 24px !important;
  }
  .summary-card {
    position: static !important;
    order: -1; /* show summary above form on mobile */
    margin-bottom: 0 !important;
  }
  .field-row {
    grid-template-columns: 1fr !important;
  }
  .steps { display: none !important; }
  .form-block { padding: 22px 16px !important; }
}

/* ── 16. EVENT DETAIL PAGE ── */
@media (max-width: 1024px) {
  .event-body-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 20px 80px !important;
  }
  .event-content {
    padding: 50px 0 0 !important;
  }
  .event-sidebar {
    position: static !important;
    padding-top: 0 !important;
  }
  .event-hero-content {
    padding: 0 20px 50px !important;
  }
  .highlights-grid {
    grid-template-columns: 1fr !important;
  }
  .event-photo-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  .event-photo-grid .photo-item.main {
    grid-row: span 1 !important;
    height: 260px;
  }
  .event-photo-grid .photo-item { height: 180px; }
  .other-events-section { padding: 60px 20px !important; }
  .other-events-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 600px) and (max-width: 1024px) {
  .other-events-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 17. GALLERY PAGE ── */
@media (max-width: 1200px) {
  .masonry-grid { columns: 3 !important; }
}
@media (max-width: 900px) {
  .masonry-grid { columns: 2 !important; }
  .gallery-section { padding: 40px 16px 80px !important; }
  .filter-inner { padding: 0 16px !important; }
  .stats-bar {
    gap: 20px !important;
    padding: 20px 16px !important;
    flex-wrap: wrap;
  }
  .stat-divider { display: none; }
}
@media (max-width: 500px) {
  .masonry-grid { columns: 1 !important; }
  .lightbox-nav { display: none !important; }
}

/* ── 18. PAYMENT PAGE ── */
@media (max-width: 820px) {
  .checkout-wrap {
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .left-panel { padding: 2rem 1.5rem !important; }
  .lp-tiles {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .rp-scroll { padding: 1.5rem 1.5rem 0 !important; }
  .rp-sticky-footer { padding: 1rem 1.5rem 1.5rem !important; }
}
@media (max-width: 600px) {
  .rp-sticky-footer { display: none !important; }
  .mobile-sticky-cta { display: block !important; }
}

/* ── 19. PROFILE PAGE ── */
@media (max-width: 768px) {
  .profile-hero {
    padding: 40px 20px 0 !important;
  }
  .profile-hero-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  .profile-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 2rem !important;
  }
  .profile-name { font-size: 2rem !important; }
  .profile-body {
    padding: 28px 20px 60px !important;
  }
  .overview-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .settings-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .logout-card {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 28px 20px !important;
  }
  .booking-content {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px !important;
  }
  .booking-price { width: 100%; text-align: left !important; }
  .profile-tabs-bar { overflow-x: auto; }
  .profile-tabs-inner { min-width: max-content; }
  .tab-btn {
    padding: 14px 18px !important;
    font-size: 11px !important;
  }
}
@media (max-width: 480px) {
  .overview-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── 20. AUTH PAGES (login / register) ── */
@media (max-width: 768px) {
  body:has(.auth-left) {
    grid-template-columns: 1fr !important;
  }
  .auth-left { display: none !important; }
  .auth-right {
    padding: 48px 24px !important;
    min-height: 100svh;
  }
  .field-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 21. BOOKING SUCCESS ── */
@media (max-width: 600px) {
  .success-card {
    padding: 40px 24px !important;
  }
}

/* ── 22. BOOKING CONFIRMED (payment_success) ── */
@media (max-width: 760px) {
  .s-content {
    grid-template-columns: 1fr !important;
    padding: 1.25rem 1rem !important;
  }
  .right-col { order: -1; }
  .btn-row {
    grid-template-columns: 1fr !important;
  }
  .date-tiles {
    grid-template-columns: 1fr !important;
  }
}

/* ── 23. MAP SECTION ── */
@media (max-width: 768px) {
  .map-section {
    height: 260px !important;
  }
}

/* ── 24. MOBILE MENU — ensure it always works ── */
.mobile-menu { display: flex !important; } /* always in DOM, hidden via transform */

/* ── 25. TOUCH-FRIENDLY tap targets ── */
@media (max-width: 768px) {
  .btn-gold,
  .btn-outline-white,
  .btn-book,
  .btn-submit,
  .btn-reserve,
  .btn-save,
  .btn-logout {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 26. Prevent horizontal scroll globally ── */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}