/* ==========================================================================
   WAYTOTRIP RESPONSIVE DESIGN SYSTEM v2.0
   Glassmorphism • Fluid Layouts • Mobile-First Optimizations
   ========================================================================== */

/* ═══════════════════════════════════════════════════════
   1. DESKTOP & LARGE SCREENS (max-width: 1400px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1400px) {
    #left-hero-panel {
        width: 38%;
        left: 5%;
    }
    
    .main-heading-premium {
        font-size: 3.2rem;
    }
    
    #right-packages-hud {
        width: 25%;
        right: 2.5%;
    }
    

    
    #bottom-left-map-hud {
        width: 17%;
        left: 2.5%;
    }
}

/* ═══════════════════════════════════════════════════════
   2. LAPTOPS & SMALL DESKTOPS (max-width: 1200px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    #left-hero-panel {
        width: 44%;
        left: 4%;
        top: 20%;
    }
    
    .main-heading-premium {
        font-size: 2.6rem;
    }
    
    .tagline-premium {
        font-size: 0.9rem;
    }
    
    #right-packages-hud {
        width: 28%;
        right: 2%;
        top: 15%;
    }
    

    
    #bottom-left-map-hud {
        width: 19%;
        left: 2%;
    }
    
    .card-title {
        font-size: 1.8rem;
    }
}

/* ═══════════════════════════════════════════════════════
   3. TABLETS & SMALL LAPTOPS (max-width: 991px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Hide social strip on tablet & mobile */
    #social-media-strip {
        display: none !important;
    }

    /* Hero panel wider on tablet */
    #left-hero-panel {
        width: 62%;
        left: 4%;
        top: 16%;
    }
    
    .main-heading-premium {
        font-size: 2.2rem;
    }

    .tagline-premium {
        max-width: 100%;
    }
    
    /* Navigation Glass Mobile Menu */
    .mobile-menu-btn {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: rgba(8, 10, 18, 0.95);
        backdrop-filter: var(--glass-blur-heavy);
        -webkit-backdrop-filter: var(--glass-blur-heavy);
        border-left: 1px solid var(--border-glass);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        z-index: 1000;
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    }
    
    .nav-links.active {
        right: 0;
    }

    .nav-link-item {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.88rem;
        width: 80%;
        text-align: center;
    }
    
    .mobile-menu-btn.active .bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    
    .mobile-menu-btn.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-btn.active .bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    
    #right-packages-hud {
        width: 32%;
        right: 3%;
    }



    #bottom-left-map-hud {
        width: 22%;
        left: 3%;
    }

    /* Drawer layout adjustment */
    .double-column-section {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .showroom-viewer-container {
        height: 220px;
    }
    
    #final-planner-drawer {
        width: 96%;
        height: 88vh;
    }
}

/* ═══════════════════════════════════════════════════════
   4. MOBILE DEVICES (max-width: 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Hide elements per design spec */
    #social-media-strip {
        display: none !important;
    }

    #bottom-left-map-hud {
        display: none !important;
    }

    .location-badge-pill {
        display: none !important;
    }

    /* Hero Panel Full Width on Mobile */
    #left-hero-panel {
        width: 92%;
        left: 4%;
        top: 14%;
    }
    
    .main-heading-premium {
        font-size: 1.85rem;
        line-height: 1.15;
    }
    
    .sub-heading-premium {
        font-size: 0.68rem;
        letter-spacing: 2px;
        padding: 5px 12px;
    }

    .tagline-premium {
        font-size: 0.85rem;
        margin-bottom: 22px;
        max-width: 100%;
    }

    /* Floating Pill Navbar on Mobile */
    #navbar {
        height: 54px;
        top: 10px;
        width: 94%;
        border-radius: var(--radius-pill);
        background: rgba(8, 10, 18, 0.85);
        backdrop-filter: var(--glass-blur-heavy);
        -webkit-backdrop-filter: var(--glass-blur-heavy);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .nav-brand {
        font-size: 1.05rem;
        letter-spacing: 1.5px;
    }



    /* WebGL Canvas & Scroll Section Adjustments */
    #webgl-canvas {
        width: 100vw;
        height: 100vh;
    }

    .scroll-section {
        height: 120vh;
    }

    /* Glass Cards & Cinematic Title Cards */
    .cinematic-title-card {
        padding: 12px 18px;
        width: 88%;
        background: rgba(8, 10, 18, 0.82);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .cinematic-title-card.left-panel,
    .cinematic-title-card.right-panel {
        left: 6%;
        right: auto;
        bottom: 12%;
        text-align: left;
    }

    .card-title {
        font-size: 1.45rem;
    }

    /* Drawer Sheet Mobile Styling */
    .drawer-scroller {
        padding: 18px 15px;
    }

    #booking-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .form-group.full-width,
    .glow-btn.full-width {
        grid-column: span 1;
    }
}

/* ═══════════════════════════════════════════════════════
   5. SMALL MOBILE & PORTRAIT (max-width: 480px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* Hide bottom center capsule on very small screens */
    #bottom-center-capsule {
        display: none !important;
    }

    .main-heading-premium {
        font-size: 1.55rem;
    }

    .loader-logo {
        font-size: 2.1rem;
    }

    .card-title {
        font-size: 1.25rem;
    }

    #final-planner-drawer {
        width: 100%;
        height: 92vh;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    #drawer-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }


}

/* ═══════════════════════════════════════════════════════
   6. RESPONSIVE FOR NEW PREMIUM ENRICHMENT SECTIONS
   ═══════════════════════════════════════════════════════ */
@media (max-width: 991px) {


    .dream-builder-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .builder-right-panel {
        position: relative;
        top: 0;
    }

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

@media (max-width: 768px) {
    #main-content-flow {
        padding-top: 5vh;
    }

    .content-section {
        padding: 5vh 0;
        width: 92%;
    }

    .section-title {
        font-size: 1.8rem;
    }

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

    /* ─── MOBILE HERO COMPACT LAYOUT ─── */
    #left-hero-panel {
        width: 92%;
        left: 4%;
        top: calc(70px + env(safe-area-inset-top));
        display: flex;
        flex-direction: column;
        pointer-events: none;
    }

    #left-hero-panel * {
        pointer-events: auto; /* ensure buttons remain clickable */
    }

    .main-heading-premium {
        font-size: clamp(1.4rem, 5.5vw, 1.9rem);
        line-height: 1.15;
    }

    .sub-heading-premium {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
        padding: 4px 10px;
        align-self: flex-start;
    }

    .tagline-premium {
        font-size: 0.78rem;
        margin-bottom: 12px;
        opacity: 0.85;
    }

    /* ─── MOBILE HUD ENHANCEMENTS (AAA COMPACT NAV PILL) ─── */
    .live-journey-hud {
        top: calc(10px + env(safe-area-inset-top));
        padding: 6px 14px;
        gap: 12px;
        width: 92%;
        max-width: 350px;
        border-radius: var(--radius-pill);
        justify-content: space-around;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    
    .hud-stat {
        flex-direction: row;
        gap: 4px;
        align-items: center;
    }
    
    .hud-label {
        font-size: 0.5rem;
        margin-bottom: 0;
        letter-spacing: 0.5px;
    }
    
    .hud-val {
        font-size: 0.7rem;
    }

    /* ─── MOBILE COMPACT DESTINATION CARD (BOTTOM CENTER) ─── */
    .dest-overlay-card {
        top: auto;
        bottom: calc(85px + env(safe-area-inset-bottom));
        left: 50%;
        transform: translate(-50%, 0) scale(0.9);
        width: 92%;
        max-width: 320px;
        max-height: 28vh;
        padding: 14px 18px;
        border-radius: var(--radius-md);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .dest-overlay-card.active {
        transform: translate(-50%, 0) scale(1.0);
    }
    
    .dest-overlay-badge {
        font-size: 0.55rem;
        letter-spacing: 2px;
        margin-bottom: 2px;
    }
    
    .dest-overlay-icon {
        font-size: 1.6rem;
        margin-bottom: 1px;
    }
    
    .dest-overlay-title {
        font-size: 1.4rem;
        margin: 1px 0;
    }
    
    .dest-overlay-subtitle {
        font-size: 0.72rem;
    }
    
    .dest-overlay-divider {
        margin: 8px auto;
        width: 30px;
    }
    
    .dest-overlay-meta {
        font-size: 0.65rem;
    }

    /* ─── COMPACT STATS GRID (2x2 COLLAPSED) ─── */
    .trust-stats-container {
        padding: 8px 12px;
        margin-top: 8px;
        background: rgba(8, 10, 18, 0.4);
        border: 1px solid rgba(255,255,255,0.05);
        border-radius: var(--radius-md);
        max-width: 280px;
    }
    
    .trust-rating {
        margin-bottom: 4px;
    }
    
    .trust-rating .stars {
        font-size: 0.7rem;
    }
    
    .trust-rating .trust-text {
        font-size: 0.6rem;
    }
    
    .stat-items-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    
    .stat-item {
        padding: 2px 6px;
    }
    
    .stat-number {
        font-size: 0.85rem;
        margin-bottom: 0;
    }
    
    .stat-label {
        font-size: 0.58rem;
    }

    /* ─── MOBILE JOURNEY COMPLETION CARD ─── */
    .journey-complete-card {
        padding: 30px 20px;
        max-width: 320px;
    }

    .complete-header {
        font-size: 0.95rem;
        margin-bottom: 15px;
    }

    .complete-list li {
        padding: 4px 10px;
        font-size: 0.72rem;
    }

    .complete-total {
        font-size: 1.25rem;
    }

    .complete-brand {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    .complete-action-btn {
        padding: 10px 20px;
        font-size: 0.78rem;
    }
}