@media (max-width: 900px) {
    .header-container { flex-direction: column; }
    nav { order: 3; width: 100%; display: none; flex-direction: column; text-align: center; }
    nav.active { display: flex; }
    .menu-toggle { display: block; }
    .header-actions { order: 2; }
}

@media (max-width: 800px) {
    .story-thumb { width: 92px; height: 60px; }
    .gallery-main { min-height: 180px; }
    .preview-item img, .preview-item video { width: 72px; height: 54px; }
}

/* ==========================================================
   THE DEFINITIVE MOBILE FIX
   ========================================================== */
@media (max-width: 768px) {
    /* 1. Base Reset */
    html, body {
        margin: 0 !important; padding: 0 !important; background-color: #0d382c !important;
    }

    /* 2. The Compact Header (Locked at 110px) */
    header {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 110px !important; 
        background: #0d382c !important;
        z-index: 9999 !important;
        padding: 0 !important; border: none !important;
    }

    /* The coordinate anchor */
    header .header-container {
        position: relative !important; 
        width: 100% !important; height: 100% !important;
        display: block !important; padding: 0 !important; margin: 0 !important;
    }

    /* 3. THE SECRET FIX: Dissolve the wrapper trapping the buttons */
    .header-actions {
        display: contents !important; 
    }

    /* 4. MIDDLE TOP: Logo & Text */
    .logo {
        position: absolute !important;
        top: 10px !important; left: 50% !important; 
        transform: translateX(-50%) !important;
        display: flex !important; justify-content: center !important;
        align-items: center !important;
        margin: 0 !important; padding: 0 !important;
        width: max-content !important;
    }
    /* Scale logo slightly so it breathes */
    .logo-image { height: 45px !important; width: 45px !important; }
    .logo-text { font-size: 1.5rem !important; }

    /* 5. BOTTOM LEFT: Languages */
    .lang {
        position: absolute !important;
        bottom: 10px !important; left: 10px !important;
        display: flex !important; gap: 4px !important;
        margin: 0 !important; padding: 0 !important;
    }
    .lang button { 
        margin: 0 !important; padding: 4px 8px !important; font-size: 12px !important; min-width: auto !important;
    }

    /* 6. BOTTOM MIDDLE: Hamburger Menu */
    .menu-toggle {
        position: absolute !important;
        bottom: 10px !important; left: 50% !important; 
        transform: translateX(-50%) !important;
        display: block !important; margin: 0 !important;
    }

    /* 7. BOTTOM RIGHT: WhatsApp */
    .btn-whatsapp {
        position: absolute !important;
        bottom: 10px !important; right: 10px !important;
        margin: 0 !important; display: inline-flex !important;
        padding: 6px 10px !important; font-size: 12px !important;
    }

    /* 8. DROPDOWN MENU: Opens under the header */
    nav {
        position: fixed !important;
        top: 110px !important; left: 0 !important; width: 100% !important;
        background: #0d382c !important; z-index: 9998 !important;
    }

    /* 9. KILL THE MASSIVE GAP (Overrides main.css 600px min-height) */
    .hero {
        padding-top: 130px !important; 
        margin-top: 0 !important;
        min-height: 0 !important; /* This removes the giant empty space */
        height: auto !important;
        display: flex !important; 
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
    
    .page-header {
        padding-top: 130px !important;
    }
}