/* ============================================
   COMPREHENSIVE RESPONSIVE FIXES
   Perfect UX on iPhone, Android, tablets, desktop
   No horizontal scroll, touch-friendly spacing
   ============================================ */

/* Base Responsive Improvements */
html {
    font-size: 16px; /* Base for rem calculations */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden !important;
}

/* Bootstrap Grid Fixes - Only margin/padding, NOT width (let Bootstrap handle responsive widths) */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

[class*="col-"] {
    box-sizing: border-box !important;
}

/* Mobile-only: Force single column and remove padding */
@media (max-width: 768px) {
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

* {
    max-width: 100%;
    box-sizing: border-box;
}

img, video {
    max-width: 100%;
    height: auto;
}

/* Iframes: only max-width — do NOT use height: auto (embeds like maps need explicit height) */
iframe {
    max-width: 100%;
}

/* Keep header/nav logo contained - do not let it stretch or repeat below header */
.navbar img,
.nav-logo img {
    height: auto;
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Prevent horizontal scroll globally */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative;
}

/* Container improvements - responsive padding only, preserve Bootstrap max-width on desktop */
.container {
    width: 100% !important;
    padding-left: clamp(15px, 4vw, 20px) !important;
    padding-right: clamp(15px, 4vw, 20px) !important;
    box-sizing: border-box !important;
}

/* Only force max-width: 100% on mobile to prevent overflow */
@media (max-width: 768px) {
    .container {
        max-width: 100% !important;
    }
}

/* Touch-friendly minimum sizes (44x44px) - MOBILE ONLY
   (Keeping this global was changing desktop UI like navbar Enquire + arrows) */
@media (max-width: 768px) {
    button, 
    a.button,
    .btn,
    .book-now-btn,
    .book-room-btn,
    .submit-btn,
    .cta-btn,
    .hamburger,
    .carousel-btn,
    .lightbox-prev,
    .lightbox-next {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: clamp(12px, 2vw, 15px) clamp(20px, 4vw, 35px) !important;
        font-size: clamp(0.95rem, 2vw, 1.1rem) !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Input fields - responsive and prevent iOS zoom */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: clamp(12px, 2vw, 15px) !important;
    min-height: 44px !important; /* Touch-friendly */
}

/* Form rows - responsive grid */
.form-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(15px, 3vw, 20px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Section headers - responsive font sizes */
.section-header h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.2;
}

.section-header p {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important;
}

/* Navigation - responsive (only logo sizing globally, nav-link only on mobile) */
.nav-logo img {
    height: clamp(50px, 8vw, 80px) !important;
    width: auto !important;
    max-width: 100% !important;
}

.nav-logo h2 {
    font-size: clamp(1.2rem, 4vw, 1.8rem) !important;
}

/* Nav links - only apply responsive styles on mobile */
@media (max-width: 768px) {
    .nav-link {
        padding: clamp(8px, 2vw, 12px) !important;
        font-size: clamp(0.9rem, 2vw, 1rem) !important;
    }
}

/* Hero section - responsive */
.hero {
    height: clamp(50vh, 75vh, 85vh) !important;
    min-height: clamp(300px, 50vh, 480px) !important;
}

.slide-content h1 {
    font-size: clamp(1.8rem, 6vw, 3.5rem) !important;
    padding: 0 clamp(15px, 5vw, 30px) !important;
    line-height: 1.2;
}

.slide-content p {
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    padding: 0 clamp(15px, 5vw, 30px) !important;
}

/* Room cards - responsive (only sizing, NOT width - let Bootstrap handle layout) */
.room-image {
    height: clamp(200px, 30vw, 250px) !important;
}

.room-content {
    padding: clamp(20px, 4vw, 30px) !important;
}

.room-content h3 {
    font-size: clamp(1.2rem, 3vw, 1.5rem) !important;
}

/* Mobile-only: Force room cards to full width */
@media (max-width: 768px) {
    .room-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Facilities - responsive */
.facilities-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)) !important;
    gap: clamp(20px, 4vw, 30px) !important;
}

.facility-card {
    padding: clamp(25px, 5vw, 40px) clamp(20px, 4vw, 30px) !important;
}

.facility-icon {
    width: clamp(60px, 10vw, 80px) !important;
    height: clamp(60px, 10vw, 80px) !important;
}

.facility-icon i {
    font-size: clamp(1.5rem, 4vw, 2rem) !important;
}

/* Attractions - responsive (only sizing, NOT layout - preserve 2-column grid on desktop) */
.attraction-image {
    height: clamp(250px, 40vw, 400px) !important;
}

.attraction-content {
    padding: clamp(25px, 6vw, 60px) clamp(20px, 5vw, 40px) !important;
}

.attraction-content h3 {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem) !important;
}

/* Mobile-only: Force single column layout */
@media (max-width: 768px) {
    .attraction-slide {
        grid-template-columns: 1fr !important;
    }
}

.carousel-btn {
    width: clamp(40px, 8vw, 50px) !important;
    height: clamp(40px, 8vw, 50px) !important;
}

/* Gallery - responsive */
.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
    gap: clamp(15px, 3vw, 20px) !important;
    justify-items: stretch !important;
    align-items: stretch !important;
}

.gallery-item {
    aspect-ratio: 4 / 3 !important; /* Consistent aspect ratio on all devices */
    height: auto !important;
    width: 100% !important;
}

/* Footer - responsive */
.footer-content {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
    gap: clamp(25px, 5vw, 40px) !important;
}

/* Enquiry form - comprehensive responsive */
.enquiry-modal-content {
    width: 100% !important;
    max-width: 600px !important; /* Centered card */
    padding: clamp(20px, 4vw, 25px) clamp(15px, 3vw, 25px) !important;
    box-sizing: border-box !important;
    overflow: visible !important; /* No scroll trap - allow page scroll */
    overflow-x: hidden !important;
    max-height: none !important; /* No height restriction */
}

#enquiryForm {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#enquiryForm .form-row {
    grid-template-columns: 1fr !important;
    gap: clamp(12px, 2.5vw, 15px) !important;
    margin-bottom: clamp(15px, 3vw, 20px) !important;
}

#enquiryForm .form-field-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

#enquiryForm .form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(10px, 2vw, 15px) !important;
    width: 100% !important;
    margin-top: clamp(20px, 4vw, 25px) !important;
}

#enquiryForm .form-actions button,
#enquiryForm .form-actions a {
    width: 100% !important;
    min-height: 44px !important;
    padding: clamp(12px, 2.5vw, 14px) clamp(15px, 4vw, 20px) !important;
}

/* Lightbox - responsive */
.lightbox-content {
    max-width: 95% !important;
    max-height: 95vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.lightbox-close {
    font-size: clamp(28px, 6vw, 35px) !important;
    top: clamp(15px, 3vw, 30px) !important;
    right: clamp(20px, 4vw, 50px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
}

.lightbox-nav {
    padding: 0 clamp(15px, 4vw, 50px) !important;
}

.lightbox-prev,
.lightbox-next {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: clamp(12px, 2.5vw, 15px) clamp(15px, 3vw, 20px) !important;
}

/* ============================================
   MOBILE SPECIFIC (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Single column layouts */
    .form-row,
    #enquiryForm .form-row {
        grid-template-columns: 1fr !important;
    }
    
    .attraction-slide {
        grid-template-columns: 1fr !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
    }
    
    /* Stack buttons vertically */
    .form-actions {
        flex-direction: column !important;
    }
    
    /* Reduce padding */
    section {
        padding: clamp(40px, 8vw, 60px) 0 !important;
    }
    
    .room-content,
    .facility-card,
    .attraction-content {
        padding: clamp(20px, 4vw, 30px) !important;
    }
    
    /* Map section: ensure iframe has height on mobile */
    .map-container iframe {
        height: 350px !important;
        min-height: 300px !important;
    }
    
    /* Hero adjustments */
    .hero {
        height: clamp(50vh, 60vh, 70vh) !important;
        min-height: 300px !important;
    }
    
    .slide-content {
        padding: 0 20px !important;
    }
    
    /* Navigation */
    .nav-menu {
        gap: 0.5rem !important;
    }
    
    .nav-link {
        padding: 15px !important;
        font-size: 1rem !important;
    }
}

/* ============================================
   SMALL MOBILE (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
    
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    /* Even tighter spacing */
    section {
        padding: clamp(30px, 6vw, 40px) 0 !important;
    }
    
    /* Enquiry page: keep title below fixed navbar, no clipping */
    .enquiry-section,
    body.enquiry-page .enquiry-section {
        padding-top: 100px !important;
        overflow: visible !important;
        min-height: 0 !important;
    }
    
    .section-header {
        margin-bottom: clamp(30px, 6vw, 40px) !important;
    }
    
    /* Smaller hero */
    .hero {
        height: 50vh !important;
        min-height: 280px !important;
    }
    
    /* Compact cards */
    .room-content,
    .facility-card {
        padding: 15px !important;
    }
    
    /* Smaller icons */
    .facility-icon {
        width: 60px !important;
        height: 60px !important;
    }
    
    .facility-icon i {
        font-size: 1.5rem !important;
    }
    
    /* Enquiry form compact */
    .enquiry-modal-content {
        padding: 15px 12px 20px !important;
    }
    
    #enquiryForm input,
    #enquiryForm select {
        padding: 12px !important;
        font-size: 16px !important;
    }
}

/* ============================================
   TABLET (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .facilities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .gallery-item {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
    }
}

/* ============================================
   LARGE SCREENS (min-width: 1200px)
   ============================================ */
@media (min-width: 1200px) {
    .container {
        max-width: 1200px !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        height: 100vh !important;
        min-height: 100vh !important;
    }
    
    .section-header {
        margin-bottom: 30px !important;
    }
    
    section {
        padding: 30px 0 !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .navbar,
    .hamburger,
    .hero-nav,
    .carousel-btn,
    .lightbox,
    .enquiry-modal {
        display: none !important;
    }
    
    body {
        overflow: visible !important;
    }
}