/*
 * Mobile-specific styles for AITAI
 * Only applies to screens below 768px (md breakpoint)
 *
 * Usage: Add fixes here instead of inline styles to avoid breaking desktop
 */

/* Prevent scroll when mobile nav is open */
body.mobile-nav-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    /* ============================================
       NAVIGATION
       ============================================ */

    /* Backdrop blur behind mobile nav */
    body.mobile-nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 40;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Reduce nav top position on mobile */
    header.fixed {
        position: fixed !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        transform: translateX(0) !important;
        -webkit-transform: translateX(0) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    header.-translate-x-1\/2 {
        --tw-translate-x: 0 !important;
        transform: translateX(0) !important;
    }

    /* When mobile menu is open, extend height but keep same position */
    nav.mobile-menu-open {
        background-color: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        height: calc(100vh - 1rem) !important;
        height: calc(100dvh - 1rem) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Mobile menu content area - flexbox layout */
    nav.mobile-menu-open .mobile-nav-menu {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Nav links area - takes remaining space */
    nav.mobile-menu-open .mobile-nav-menu > div:first-child {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Auth section - stays at bottom */
    nav.mobile-menu-open .mobile-nav-auth {
        flex: 0 !important;
    }

    /* Mobile nav link styling */
    .mobile-nav-link {
        font-size: 1.75rem !important;
        padding: 1rem 1.25rem !important;
    }

    /* Nav items slide in animation */
    @keyframes slideInFromLeft {
        from {
            opacity: 0;
            transform: translateX(-2rem);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    nav.mobile-menu-open .mobile-nav-link {
        animation: slideInFromLeft 0.3s ease-out forwards;
    }

    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(1) { animation-delay: 0.05s; opacity: 0; }
    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(2) { animation-delay: 0.1s; opacity: 0; }
    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(3) { animation-delay: 0.15s; opacity: 0; }
    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(4) { animation-delay: 0.2s; opacity: 0; }
    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(5) { animation-delay: 0.25s; opacity: 0; }
    nav.mobile-menu-open .mobile-nav-menu > div:first-child a:nth-child(6) { animation-delay: 0.3s; opacity: 0; }

    nav.mobile-menu-open .mobile-nav-auth {
        animation: slideInFromLeft 0.3s ease-out forwards;
        animation-delay: 0.35s;
        opacity: 0;
    }

    /* Member dashboard button - smaller text, white */
    .mobile-nav-auth a[href="/dashboard"] {
        font-size: 1.125rem !important;
        color: #ffffff !important;
    }

    /* Light nav mode - dark text */
    .mobile-nav-light .mobile-nav-link {
        color: #1e1b24 !important;
    }

    /* Dark nav mode - light text */
    .mobile-nav-dark .mobile-nav-link {
        color: #ffffff !important;
    }

    /* ============================================
       HERO SECTIONS (all pages)
       ============================================ */

    /* Hero section - no padding, full bleed */
    section.pt-4.pb-8 {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Remove rounded corners on hero cards */
    section.pt-4.pb-8 > div > div {
        border-radius: 0 !important;
    }

    /* Remove shadow on hero for full-bleed look */
    section.pt-4.pb-8 .shadow-2xl {
        box-shadow: none !important;
    }

    /* Hero content padding for nav clearance and spacing */
    section.pt-4.pb-8 .pt-24 {
        padding-top: 7rem !important;
        padding-bottom: 4rem !important;
    }

    /* ============================================
       HOME PAGE
       ============================================ */

    /* Prevent horizontal scroll from text animations */
    body, html {
        overflow-x: hidden !important;
    }

    /* Hide pillar section mosaic/matrix animations on mobile */
    .lg\:flex.items-center.justify-center.relative,
    .relative.flex.items-center.justify-center[style*="height: 600px"] {
        display: none !important;
    }

    /* Reduce pillar section height on mobile */
    .min-h-\[85vh\] {
        min-height: auto !important;
    }

    /* Reduce section padding on mobile */
    .py-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .pt-24 {
        padding-top: 2.5rem !important;
    }

    .pb-24 {
        padding-bottom: 2.5rem !important;
    }

    .pt-32 {
        padding-top: 2.5rem !important;
    }

    .pb-32 {
        padding-bottom: 2.5rem !important;
    }

    .pt-16 {
        padding-top: 2rem !important;
    }

    .pb-16, .pb-20 {
        padding-bottom: 2rem !important;
    }

    /* Reduce margin between sections */
    .mb-12 {
        margin-bottom: 1.5rem !important;
    }

    .mt-12 {
        margin-top: 1.5rem !important;
    }

    /* ============================================
       ABOUT PAGE
       ============================================ */

    /* How We Work / Our Team sections - moderate padding */
    .min-h-\[85vh\].py-24 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    /* Our Partners section - more padding */
    section.pb-24[style*="padding-top: 5rem"] {
        padding-top: 8rem !important;
        padding-bottom: 6rem !important;
    }

    /* Team cards - constrain image height (mobile) */
    .aspect-\[3\/4\] {
        aspect-ratio: 1 / 1 !important;
        max-height: 180px !important;
    }


    /* ============================================
       ENGAGE PAGE
       ============================================ */


    /* ============================================
       PROGRAMS PAGE
       ============================================ */


    /* ============================================
       CONTACT PAGE
       ============================================ */


    /* ============================================
       DASHBOARD
       ============================================ */

    /* One column layout for dashboard grids */
    .grid.md\:grid-cols-2,
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Reduce dashboard container top padding */
    [style*="padding-top: 180px"] {
        padding-top: 80px !important;
    }

    /* ============================================
       GENERAL / SHARED
       ============================================ */

}

/* ============================================
   TABLET STYLES (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Team cards - smaller images on tablet */
    .aspect-\[3\/4\] {
        aspect-ratio: 1 / 1 !important;
        max-height: 220px !important;
    }
}

/* ============================================
   HIDE MOSAIC ANIMATION BELOW 1200px
   ============================================ */
@media (max-width: 1199px) {
    #mosaic-animation {
        display: none !important;
    }
}