/* ============================================================
   Experior FM — Responsive Breakpoints
   Mobile-first responsive adjustments for all components.
   ============================================================ */

/* ── Tablet (max-width: 1024px) ── */
@media (max-width: 1024px) {
    :root {
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --text-4xl: 2rem;
    }

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

    .split {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .split--reverse {
        direction: ltr;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    /* Hero slider: 2 cards visible */
    .hero-slider__slide {
        flex: 0 0 50%;
    }
}

/* ── Small Tablet / Large Phone (max-width: 768px) ── */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.25rem;
        --text-6xl: 2.5rem;
        --text-4xl: 1.75rem;
        --text-3xl: 1.5rem;
        --space-3xl: 4rem;
        --space-2xl: 3rem;
    }

    /* Header adjustments */
    .logo-img {
        height: 42px;
    }

    .site-header__cta {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    /* When mobile nav is open, INSTANTLY remove backdrop-filter from the scrolled header.
       backdrop-filter creates a containing block for fixed descendants,
       which traps the full-screen nav overlay inside the 80px header.
       We must also override the header transition so the removal is immediate
       — otherwise the 0.4s backdrop-filter transition keeps the containing
       block active during the animation, causing a visible flash/delay. */
    .site-header.scrolled.mobile-nav-open {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: background 0.4s ease, box-shadow 0.4s ease;
    }

    /* Mobile Navigation — animated overlay */
    .main-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: var(--z-overlay);
        align-items: center;
        justify-content: center;
        gap: var(--space-lg);
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, visibility 0.25s;
    }

    .main-nav.mobile-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ── Mobile Nav Logo ── */
    .mobile-nav-logo {
        display: block;
        position: relative;
        overflow: hidden;
        border-radius: var(--radius-md);
        opacity: 0;
        transform: scale(0.85);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .main-nav.mobile-open .mobile-nav-logo {
        opacity: 1;
        transform: scale(1);
    }

    .mobile-nav-logo__img {
        display: block;
        height: 40px;
        width: auto;
        animation: mobileLogoPulse 3s ease-in-out infinite;
    }

    /* Continuous glow shimmer across the logo */
    .mobile-nav-logo::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(236, 25, 112, 0.1) 30%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(160, 172, 8, 0.1) 70%,
            transparent 100%
        );
        animation: mobileLogoShimmer 2.5s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes mobileLogoPulse {
        0%, 100% {
            filter: drop-shadow(0 0 4px rgba(236, 25, 112, 0.15));
            transform: scale(1);
        }
        50% {
            filter: drop-shadow(0 0 12px rgba(236, 25, 112, 0.35))
                    drop-shadow(0 0 20px rgba(160, 172, 8, 0.15));
            transform: scale(1.03);
        }
    }

    @keyframes mobileLogoShimmer {
        0%   { left: -60%; }
        50%  { left: 100%; }
        100% { left: 100%; }
    }

    /* Override desktop entrance animation at mobile */
    .main-nav__item {
        animation: none;
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* Staggered slide-in when menu opens */
    .main-nav.mobile-open .main-nav__item {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav.mobile-open .main-nav__item:nth-child(1) { transition-delay: 0.03s; }
    .main-nav.mobile-open .main-nav__item:nth-child(2) { transition-delay: 0.06s; }
    .main-nav.mobile-open .main-nav__item:nth-child(3) { transition-delay: 0.09s; }
    .main-nav.mobile-open .main-nav__item:nth-child(4) { transition-delay: 0.12s; }
    .main-nav.mobile-open .main-nav__item:nth-child(5) { transition-delay: 0.15s; }
    .main-nav.mobile-open .main-nav__item:nth-child(6) { transition-delay: 0.18s; }

    /* Reverse stagger on close */
    .main-nav.mobile-closing .main-nav__item:nth-child(6) { transition-delay: 0.02s; }
    .main-nav.mobile-closing .main-nav__item:nth-child(5) { transition-delay: 0.04s; }
    .main-nav.mobile-closing .main-nav__item:nth-child(4) { transition-delay: 0.06s; }
    .main-nav.mobile-closing .main-nav__item:nth-child(3) { transition-delay: 0.08s; }
    .main-nav.mobile-closing .main-nav__item:nth-child(2) { transition-delay: 0.10s; }
    .main-nav.mobile-closing .main-nav__item:nth-child(1) { transition-delay: 0.12s; }

    .main-nav__list {
        flex-direction: column;
        gap: var(--space-xs);
        text-align: center;
    }

    .main-nav__link {
        font-size: var(--text-lg);
        padding: 0.75rem 2rem;
    }

    /* Mobile nav open: reset white text to dark on white overlay (all pages) */
    .site-header:not(.scrolled) .main-nav.mobile-open .main-nav__link {
        color: var(--color-dark);
    }

    .site-header:not(.scrolled) .main-nav.mobile-open .main-nav__link:hover {
        color: var(--color-primary);
        background: var(--color-primary-bg);
    }

    .site-header:not(.scrolled) .main-nav.mobile-open .main-nav__link.active {
        color: var(--color-primary);
    }

    .main-nav__link.active::after {
        display: none;
    }

    /* Hero */
    .hero {
        min-height: 400px;
    }

    .hero--home {
        min-height: 70vh;
    }

    .hero__title {
        font-size: var(--text-4xl);
    }

    .hero--home .hero__title {
        font-size: var(--text-5xl);
    }

    .hero__actions {
        flex-direction: column;
    }

    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Grid */
    .grid--3 {
        grid-template-columns: 1fr;
    }

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

    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .footer__bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    /* Hero slider: 1 card visible */
    .hero-slider__slide {
        flex: 0 0 100%;
    }

    .hero-slider {
        margin-top: var(--space-lg);
    }
}

/* ── Phone (max-width: 480px) ── */
@media (max-width: 480px) {
    .logo-img {
        height: 34px;
    }

    .logo-img--footer {
        height: 32px;
    }

    :root {
        --text-5xl: 2rem;
        --text-6xl: 2.25rem;
        --text-4xl: 1.5rem;
        --space-3xl: 3rem;
        --space-2xl: 2rem;
        --space-md: 1rem;
    }

    .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }

    .hero--home {
        min-height: 60vh;
    }

    .section-title {
        font-size: var(--text-3xl);
    }

    .btn--lg {
        padding: 0.85rem 1.8rem;
        font-size: var(--text-sm);
    }

    .card {
        padding: var(--space-md);
    }

    .stat__number {
        font-size: var(--text-4xl);
    }

    /* Hero slider: compact cards */
    .hero-slider__card {
        padding: var(--space-sm);
    }

    .hero-slider__icon {
        width: 40px;
        height: 40px;
    }

    .hero-slider__title {
        font-size: var(--text-sm);
    }

    .hero-slider__desc {
        font-size: var(--text-xs);
    }
}

/* ── Reduced Motion: disable mobile menu animations ── */
@media (prefers-reduced-motion: reduce) {
    .main-nav {
        transition: none;
    }

    .main-nav__item {
        transition: none;
        opacity: 1;
        transform: none;
    }
}