/* CLS (Cumulative Layout Shift) Fix - Mobile Optimization */

/* ========================================
   1. Font Loading Optimization
   ======================================== */

/* Prevent FOIT (Flash of Invisible Text) */
body {
    font-display: swap;
}

/* Reserve space for web fonts */
.font-loading {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   2. Image Dimension Reservations
   ======================================== */

/* Level card images - always maintain aspect ratio */
.level-card img,
.level-image {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Logo images - fixed dimensions */
img[alt*="Logo"],
img[src*="logo"] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

/* Blog images */
.blog-image,
img[alt*="blog"],
img[alt*="Blog"] {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

/* ========================================
   3. Navigation Bar Stability
   ======================================== */

/* Fixed height for navigation to prevent shift */
nav {
    min-height: 80px;
    height: 80px;
}

/* Mobile menu - reserve space when closed */
.mobile-menu {
    transition: max-height 0.3s ease-in-out;
    overflow: hidden;
}

.mobile-menu:not(.active) {
    max-height: 0;
}

.mobile-menu.active {
    max-height: 500px;
}

/* ========================================
   4. Content Container Stability
   ======================================== */

/* Hero section - prevent shift on load */
.hero-section,
section.py-16,
section.py-20 {
    min-height: fit-content;
}

/* Level grid container - maintain layout */
#levels-container {
    min-height: 400px;
}

/* Placeholder cards - exact same dimensions as real cards */
.level-card-placeholder {
    aspect-ratio: 0.75;
    min-height: 280px;
}

/* ========================================
   5. Dynamic Content Loading
   ======================================== */

/* Reserve space for loading indicators */
#loading-indicator {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FAQ content - smooth expansion without shift */
[id$="-content"] {
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
}

[id$="-content"].hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ========================================
   6. Mobile-Specific Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Fixed mobile navigation height */
    nav {
        min-height: 64px;
        height: 64px;
    }
    
    /* Level cards - consistent sizing */
    .level-card {
        min-height: 240px;
    }
    
    /* Hero section - stable height */
    .hero-section {
        min-height: 500px;
    }
    
    /* Search inputs - prevent zoom on iOS */
    input[type="text"],
    input[type="number"],
    input[type="search"] {
        font-size: 16px !important;
    }
}

/* ========================================
   7. Carousel/Slider Stability
   ======================================== */

/* 3D Carousel - reserve space */
.carousel-3d-wrapper {
    min-height: 500px;
    position: relative;
}

.carousel-container {
    min-height: 400px;
    position: relative;
}

/* Carousel items - prevent shift during transitions */
.carousel-item,
.carousel-3d-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   8. Button and Interactive Elements
   ======================================== */

/* Prevent button size changes on hover */
button,
.btn-primary,
.btn-secondary {
    min-height: 44px; /* Touch target size */
    padding: 12px 24px;
}

/* Level tab buttons - consistent sizing */
.level-tab-btn {
    min-height: 40px;
    white-space: nowrap;
}

/* ========================================
   10. Icon and SVG Stability
   ======================================== */

/* Font Awesome icons - reserve space */
i.fas,
i.far,
i.fab {
    display: inline-block;
    width: 1em;
    text-align: center;
}

/* SVG icons - fixed dimensions */
svg {
    width: 1em;
    height: 1em;
    display: inline-block;
}

/* ========================================
   11. Text Content Stability
   ======================================== */

/* Prevent text reflow from font loading */
h1, h2, h3, h4, h5, h6 {
    font-display: swap;
    line-height: 1.2;
}

p {
    line-height: 1.6;
}

/* Truncate text to prevent overflow */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========================================
   12. Performance Optimizations
   ======================================== */

/* Use GPU acceleration for transforms */
.level-card,
.carousel-item,
img {
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce paint areas */
.level-card:hover {
    will-change: transform;
}

/* Level card layout consistency - prevent height variations */
.level-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.level-card .level-text-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 120px; /* Fixed minimum height for text area */
}

.level-card .level-title {
    min-height: 3.5rem; /* Reserve space for 2 lines of title */
    margin-bottom: 0.5rem;
}

/* Ensure bottom info section stays at bottom */
.level-card .level-text-content > div:last-child {
    margin-top: auto;
}

/* ========================================
   13. Lazy Loading Optimization
   ======================================== */

/* Images below fold - lazy load with placeholder */
img[loading="lazy"] {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
}

/* ========================================
   14. Aspect Ratio Containers
   ======================================== */

/* Video containers - Enhanced for CLS prevention */
.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    contain: layout style paint;
    background-color: #111827;
    border-radius: 0.5rem;
    overflow: hidden;
}

.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Video skeleton loader */
#video-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111827;
    z-index: 1;
}

/* Responsive video aspect ratios */
.video-wrapper[data-mobile-mode="2"],
.video-container[data-mobile-mode="2"] {
    aspect-ratio: 9/16;
}

@media (max-width: 768px) {
    .video-wrapper {
        /* Ensure stable height on mobile */
        min-height: 200px;
    }
}

/* ========================================
   15. Critical CSS for Above-the-Fold
   ======================================== */

/* Ensure above-the-fold content is styled immediately */
.hero-section,
nav,
.level-card:nth-child(-n+4) {
    contain: layout style paint;
}

/* ========================================
   16. Prevent Reflow from Ads/Scripts
   ======================================== */

/* Reserve space for potential ad slots */
.ad-slot {
    min-height: 250px;
    background: #f9fafb;
}

/* ========================================
   17. Smooth Transitions Without CLS
   ======================================== */

/* Use transform instead of position changes */
.smooth-move {
    transition: transform 0.3s ease;
}

.smooth-move:hover {
    transform: translateY(-4px);
}

/* Avoid margin/padding changes */
.no-shift {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   18. Mobile Touch Optimization
   ======================================== */

@media (max-width: 768px) {
    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }
    
    /* Larger touch targets */
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
}