/* ==========================================================================
   Homepage Mobile & Responsive Styles
   Extracted from inline styles for better maintainability
   ========================================================================== */

@media (max-width: 768px) {
    /* Stack the grid columns on mobile */
    .labs-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 !important;
    }
    
    /* Remove sticky positioning on mobile */
    .labs-left-sticky,
    .labs-card-wrapper {
        position: relative !important;
        top: auto !important;
        margin-bottom: 2rem !important;
    }
    
    /* Adjust container padding on mobile */
    .labs-full-container {
        padding: 40px 20px !important;
    }
    
    /* Make cards stack with proper spacing */
    .labs-cards-column {
        margin-top: 0 !important;
    }
    
    /* Reduce font sizes for mobile */
    .labs-label {
        font-size: 1.2rem !important;
    }
    
    .labs-title-large {
        font-size: 1.75rem !important;
    }
    
    /* Stack the service icons vertically within cards on small mobile */
    .category-services {
        flex-direction: column !important;
        gap: 2rem !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    /* Center each service item */
    .category-services > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Adjust icon sizes on mobile */
    .category-services img {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto !important;
    }
    
    /* Adjust text sizes in cards */
    .category-title {
        font-size: 1.25rem !important;
        text-align: center !important;
    }
    
    .service-label {
        font-size: 1.1rem !important;
        text-align: center !important;
    }
    
    .category-services p {
        font-size: 1rem !important;
        text-align: center !important;
    }
    
    /* STICKY POSITIONING FIX FOR DESKTOP ONLY */
    @media (min-width: 769px) {
        /* More specific selectors to override external CSS */
        body main .section-stack-wrapper[data-stack="about"] {
            position: sticky !important;
            position: -webkit-sticky !important;
            top: 75px !important;
            z-index: 10 !important;
            background: #000000 !important;
            min-height: calc(100vh - 75px) !important;
        }
        
        body main .section-stack-wrapper[data-stack="what"] {
            position: sticky !important;
            position: -webkit-sticky !important;
            top: 75px !important;
            z-index: 11 !important;
            min-height: calc(100vh - 75px) !important;
            background: #000000 !important;
        }
        
        /* Ensure sections inside wrappers don't override positioning */
        .section-stack-wrapper .neural-about-section,
        .section-stack-wrapper .neural-what-section {
            position: relative !important;
        }
        
        /* Ensure hero visibility on desktop/tablet */
        .hero-section {
            display: block !important;
        }
        
        .hero-section-mobile {
            display: none !important;
        }
    }
    
    /* Mobile-only styles - wrap in media query */
    @media (max-width: 768px) {
        /* Remove sticky positioning on mobile */
        .section-stack-wrapper[data-stack="about"],
        .section-stack-wrapper[data-stack="what"] {
            position: relative !important;
            top: auto !important;
        }
        
        /* Hero visibility on mobile */
        .hero-section {
            display: none !important;
        }
        
        .hero-section-mobile {
            display: block !important;
            padding: 90px 20px 40px 20px;
            background: #000;
            text-align: center;
        }
        
        .hero-mobile-wrapper {
            max-width: 600px;
            margin: 0 auto;
        }
        
        .hero-mobile-title {
            font-size: clamp(2.5rem, 10vw, 3.5rem);
            font-weight: 300;
            line-height: 1.1;
            margin: 0 0 1.5rem 0;
            letter-spacing: -0.02em;
            color: #ffffff;  /* Make base text white */
        }
        
        .hero-mobile-subtitle {
            font-size: clamp(2.5rem, 10vw, 3.5rem);
            font-weight: 300;
            line-height: 1.1;
            margin: 0 0 1.5rem 0;
            letter-spacing: -0.02em;
            color: #ffffff;  /* Make base text white */
        }
        
        .hero-mobile-text {
            font-size: 1.125rem;
            line-height: 1.5;
            font-weight: 300;
            color: rgba(255, 255, 255, 0.85);
            margin: 0 0 1.5rem 0;
        }
        
        .hero-mobile-subtitle {
            font-size: clamp(2.5rem, 10vw, 3.5rem);
            font-weight: 300;
            line-height: 1.1;
            margin: 0;
            letter-spacing: -0.02em;
        }
        
        /* Neural Core Section Mobile Fixes */
        .section-stack-wrapper[data-stack="core"] {
            height: auto !important;
            min-height: 100vh !important;
        }
        
        .neural-core-section {
            position: relative !important;
            top: 0 !important;
            min-height: 100vh !important;
            height: auto !important;
        }
        
        .core-cards-container {
            padding: 20px 0 !important;
        }
        
        .core-cards-track {
            display: flex !important;
            flex-direction: column !important;
            gap: 20px !important;
            padding: 0 15px !important;
            overflow-x: visible !important;
        }
        
        .core-card {
            flex: 1 1 auto !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 25px 20px !important;
        }
        
        .core-card-title {
            font-size: 1.5rem !important;
        }
        
        .core-card-description {
            font-size: 0.95rem !important;
        }
        
        .core-card-features li {
            font-size: 0.9rem !important;
            padding-left: 20px !important;
            margin-bottom: 10px !important;
        }
        
        /* Also adjust Neural Labs section height on mobile */
        .section-stack-wrapper[data-stack="labs"] {
            min-height: auto !important;
            height: auto !important;
        }
    }
    
    /* FAQ Section Mobile Fixes - Force single column layout */
    .neural-faq-section {
        padding: 40px 0 !important;
    }
    
    .neural-container {
        padding: 0 15px !important;
        max-width: 100% !important;
    }
    
    .neural-faq-categories {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .neural-faq-category {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 1.25rem !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
        grid-column: 1 / -1 !important;
    }
    
    /* Override any nth-child rules that might affect layout */
    .neural-faq-category:nth-child(1),
    .neural-faq-category:nth-child(2),
    .neural-faq-category:nth-child(3),
    .neural-faq-category:nth-child(4) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        width: 100% !important;
    }
    
    .neural-faq-category-title {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .neural-faq-items {
        width: 100% !important;
    }
    
    .neural-faq-item {
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }
    
    .neural-faq-question {
        font-size: 0.95rem !important;
        padding: 0.875rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .neural-faq-answer-content {
        font-size: 0.9rem !important;
        padding: 0.875rem !important;
    }
    
    /* Intelligence Cards Mobile Fixes */
    .intelligence-carousel {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        padding: 0 !important;
        scroll-snap-type: x mandatory !important;
        touch-action: pan-x !important;
    }
    
    .intelligence-carousel-track {
        display: flex !important;
        gap: 15px !important;
        padding: 0 15px !important;
        transform: none !important;
        transition: none !important;
    }
    
    .intelligence-card {
        flex: 0 0 calc(100vw - 30px) !important;
        min-width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
    }
    
    .intelligence-carousel-nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
        margin-top: 1.5rem !important;
    }
    
    .intelligence-nav-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .intelligence-carousel-dots {
        display: flex !important;
        gap: 0.5rem !important;
    }
    
    /* Hide scrollbar but keep functionality */
    .intelligence-carousel::-webkit-scrollbar {
        display: none !important;
    }
    
    .intelligence-carousel {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    
    /* NO CHANGES TO WHAT/WHO sections on mobile - let them use default styles */
    
    /* Fix video sizing on mobile */
    .hero-container-video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        object-fit: cover;
    }
    
    .neural-core-background-video {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-width: unset;
        min-height: unset;
    }
    
    /* Ensure proper aspect ratio on mobile portrait */
    @media (orientation: portrait) {
        .hero-container-video,
        .neural-core-background-video {
            width: 177.77vh; /* 16:9 aspect ratio */
            height: 100%;
        }
    }
    
    /* Ensure proper aspect ratio on mobile landscape */
    @media (orientation: landscape) {
        .hero-container-video,
        .neural-core-background-video {
            width: 100%;
            height: 56.25vw; /* 16:9 aspect ratio */
        }
    }
}

/* Tablet responsive adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .labs-grid {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    
    .labs-left-sticky,
    .labs-card-wrapper {
        position: relative !important;
        top: auto !important;
    }
    
    .category-services {
        gap: 2rem !important;
    }
    
    /* FAQ Section Tablet Fixes */
    .neural-faq-categories {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
    }
}