/* ═══════════════════════════════════════════════════════════════
   LAVO — Mobile Responsive Overrides
   Breakpoint: max-width 768px (tablet & mobile)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ─── Hero Section ─── */
    section[class*="bg-lavo-dark"][class*="h-[800px]"] {
        height: auto !important;
        min-height: 500px;
        padding: 80px 0;
        background-position: 65% center;
    }

    section[class*="bg-lavo-dark"] h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1.5rem;
    }

    section[class*="bg-lavo-dark"] h1 br {
        display: none;
    }

    section[class*="bg-lavo-dark"] p[data-animate="hero-subtitle"] {
        font-size: 1.1rem !important;
    }

    section[class*="bg-lavo-dark"] p[data-animate="hero-body"] {
        font-size: 0.9rem !important;
        max-width: 100% !important;
    }

    section[class*="bg-lavo-dark"] p[data-animate="hero-body"] br {
        display: none;
    }

    /* ─── Stats Cards ─── */
    .grid[data-animate="stagger"] > div[class*="aspect-"] {
        aspect-ratio: 16/9 !important;
    }

    .grid[data-animate="stagger"] h3 {
        font-size: 2rem !important;
    }

    /* ─── Platform Section ─── */
    section h2[class*="whitespace-nowrap"] {
        white-space: normal !important;
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* ─── Brands Section (Swiper) — arrows handled by Swiper, no override needed ─── */

    /* ─── Solutions Section ─── */
    section[class*="py-[50px]"] h2[class*="whitespace-nowrap"] {
        white-space: normal !important;
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* ─── Training Banner ─── */
    section[style*="training-bg"] {
        height: auto !important;
        min-height: 350px;
        padding: 60px 16px !important;
    }

    section[style*="training-bg"] h2 {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    /* ─── Video Sections — now Swiper-managed, no CSS override needed ─── */

    /* ─── Community Section ─── */
    section[style*="salon-bg"] > div {
        padding: 40px 16px !important;
    }

    section[style*="salon-bg"] .flex[class*="flex-row"][class*="h-[120px]"] {
        height: auto !important;
        min-height: 100px;
    }

    section[style*="salon-bg"] .flex[class*="flex-row"] > div:first-child {
        width: 65% !important;
    }

    section[style*="salon-bg"] .flex[class*="flex-row"] > div:last-child {
        width: 35% !important;
    }

    /* ─── CTA Section ─── */
    section[style*="cta-bg"] {
        background-position: center top !important;
        background-size: cover !important;
    }

    section[style*="cta-bg"] > div:first-child {
        min-height: 200px !important;
    }

    section[style*="cta-bg"] h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    section[style*="cta-bg"] h2 br {
        display: none;
    }

    section[style*="cta-bg"] .flex[class*="flex-col sm:flex-row"] {
        flex-direction: column !important;
        width: 100%;
    }

    section[style*="cta-bg"] .flex[class*="flex-col sm:flex-row"] button {
        width: 100%;
    }

    /* ─── Footer ─── */
    footer .grid[class*="grid-cols-1"][class*="md:grid-cols-4"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    footer .col-span-1 {
        align-items: center !important;
        text-align: center;
    }

    footer p[class*="uppercase"] {
        text-align: center;
    }

    /* ─── Header ─── */
    header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ─── Mobile Menu ─── */
    #mobile-menu {
        top: 56px;
    }
    #mobile-menu:not(.hidden) {
        animation: slideDown 0.2s ease-out;
    }
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ─── General Container Padding ─── */
    .container.mx-auto {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* ─── Section Padding ─── */
    section[class*="py-[50px]"] {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    /* ─── Animation adjustments for mobile ─── */
    [data-animate] {
        --anim-duration: 0.5s;
        --anim-distance: 20px;
    }

    [data-animate="fade-right"],
    [data-animate="fade-left"] {
        --anim-distance: 15px;
    }

    /* Force visible on mobile to prevent blank sections */
    [data-animate]:not([data-animate-load]) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Override animations.css hidden states */
    [data-animate="fade-up"],
    [data-animate="fade-down"],
    [data-animate="fade-right"],
    [data-animate="fade-left"],
    [data-animate="scale-up"],
    [data-animate="scale-fade"] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    /* Stagger children visible */
    [data-animate="stagger"] > * {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ─── Extra small devices ─── */
@media (max-width: 480px) {
    section[class*="bg-lavo-dark"] h1 {
        font-size: 1.6rem !important;
    }

    section h2 {
        font-size: 1.3rem !important;
    }

    .grid[data-animate="stagger"] h3 {
        font-size: 1.5rem !important;
    }
}