/* 
    Mura Next Gen - Responsive CSS
*/

@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .mega-dropdown { width: 500px; }
    .hero-headline { font-size: 60px; }
}

@media (max-width: 992px) {
    .container { max-width: 720px; }
    
    .nav-links { display: none; } /* Mobile menu logic in JS */
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-col:first-child { grid-column: span 2; }
    
    .section-title h2 { font-size: 32px; }

    .services-grid, .events-grid, .blog-preview-grid, .destinations-grid, .packages-grid, .mission-vision-grid, .dest-card-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .mega-dropdown.mobile-stack {
        position: relative !important;
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        grid-template-columns: 1fr !important;
        background: transparent !important;
        display: none; /* Controlled by JS or active class */
    }

    .nav-links.active .mega-dropdown.mobile-stack {
        display: none; /* Hidden by default in mobile menu */
        margin-top: 10px;
        padding-left: 15px !important;
    }

    .nav-links.active .has-dropdown.open .mega-dropdown.mobile-stack {
        display: block !important;
    }

    .mega-item {
        padding: 15px !important;
        background: rgba(255,255,255,0.05) !important;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .mega-item h4, .mega-item p {
        color: white !important;
    }

    .blog-filters {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .filter-btn {
        flex: 1 1 40%;
        font-size: 12px !important;
        padding: 8px 15px !important;
    }

    .packages-grid > div {
        flex-direction: column !important;
    }

    .packages-grid img {
        width: 100% !important;
        height: 200px !important;
    }

    .usp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .service-card, .blog-card {
        padding: 40px 20px !important;
    }

    .service-card h3 {
        font-size: 24px !important;
    }
    
    .split-layout {
        flex-direction: column !important;
        text-align: center;
        gap: 30px !important;
    }

    .hero-title, .hero-highlight {
        font-size: 48px !important;
        line-height: 1.2 !important;
    }

    .typed-container {
        flex-direction: column;
        gap: 5px;
    }

    .typed-prefix {
        font-size: 14px;
    }

    #typed-text {
        font-size: 18px !important;
        letter-spacing: 3px !important;
    }

    .hero-desc {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 20px; }
    
    .top-bar { height: auto; padding: 8px 0; font-size: 11px; }
    .top-bar .container { flex-direction: column; gap: 8px; text-align: center; }
    .top-bar-info { flex-direction: column; gap: 4px; }
    .top-bar-info span { margin-right: 0; justify-content: center; }
    .top-bar-socials { justify-content: center; }
    
    header { 
        position: relative !important; 
        top: 0 !important; 
        background: var(--navy) !important;
        z-index: 1002 !important;
    }
    
    nav { 
        height: auto; 
        padding: 12px 0 !important; 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: space-between !important; 
        align-items: center !important;
    }
    
    .logo { 
        padding: 4px 8px !important; 
        border-width: 1px !important;
        max-width: 120px;
        margin: 0 !important;
        flex-shrink: 0;
    }
    
    .logo img { 
        height: 45px !important; 
    }
    
    .logo-text { display: none; } /* Hide text logo on small screens to save space */
    
    .hero-title, .hero-highlight {
        font-size: 32px !important;
        line-height: 1.1 !important;
    }

    .hero-desc {
        font-size: 15px !important;
        margin-bottom: 30px !important;
    }

    #typed-text {
        font-size: 16px !important;
        letter-spacing: 2px !important;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        gap: 15px !important;
    }

    /* Move floating buttons to avoid overlap with hero buttons */
    .floating-btns {
        right: auto !important;
        left: 20px !important;
        bottom: 20px !important;
    }

    .scroll-top-btn {
        left: auto !important;
        right: 20px !important;
        bottom: 20px !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-col:first-child { grid-column: span 1; }
    
    section { padding: 50px 0; }
    
    .btn { width: 100%; }

    /* Fix header overlap */
    nav .btn-gold {
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        width: auto !important;
        margin-left: auto !important;
        margin-right: 12px !important;
        flex-shrink: 0;
        order: 0 !important;
        transition: opacity 0.3s ease;
    }

    .mobile-toggle {
        display: block !important;
        flex-shrink: 0;
        margin: 0 !important;
        font-size: 22px;
        order: 0 !important;
        color: white;
        width: 30px;
        text-align: right;
    }
}

@media (max-width: 480px) {
    .usp-grid {
        grid-template-columns: 1fr !important;
    }

    .hero-content h2 {
        font-size: 30px !important;
    }
    
    .section-title h2 {
        font-size: 28px;
    }

    .mobile-toggle {
        display: block !important;
        margin-left: 15px;
    }

    .logo-mng {
        font-size: 18px;
        padding: 2px 6px;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}