/* MOBILE CLS PREVENTION - Critical fixes for layout shifts on mobile devices */

/* Viewport and font loading stability */
@viewport {
    width: device-width;
    zoom: 1.0;
}

/* Enhanced mobile hero stability */
@media (max-width: 768px) {
    /* Container stability */
    .hero {
        padding: 120px 20px 60px !important;
        min-height: 100vh !important;
        height: auto !important;
        contain: layout style paint;
        isolation: isolate;
    }
    
    /* Hero content dimensions - prevent shifts */
    .hero-content {
        min-height: 280px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        contain: layout;
        transform: translateZ(0); /* Force GPU layer */
    }
    
    /* Typography stability */
    .hero h1 {
        font-size: 2.8rem !important;
        min-height: 95px !important;
        line-height: 1.05 !important;
        margin-bottom: 18px !important;
        width: 100% !important;
        contain: layout;
        font-display: swap;
        text-rendering: optimizeSpeed;
        word-spacing: -2px;
    }
    
    .hero h1 span {
        display: inline-block !important;
        will-change: auto;
        contain: layout style;
    }
    
    .hero p {
        min-height: 45px !important;
        margin-bottom: 22px !important;
        font-size: 1.05rem !important;
        width: 100% !important;
        line-height: 1.4 !important;
        font-display: swap;
        contain: layout;
    }
    
    /* Button stability */
    .btn {
        min-width: 175px !important;
        padding: 12px 28px !important;
        min-height: 46px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-display: swap;
        contain: layout style;
    }
    
    /* Navigation stability */
    .nav {
        height: 80px !important;
        contain: layout style;
    }
    
    .logo {
        min-width: 120px !important;
        min-height: 40px !important;
        contain: layout;
    }
}

/* Ultra-narrow mobile devices */
@media (max-width: 480px) {
    .hero {
        padding: 100px 15px 40px !important;
        min-height: 90vh !important;
    }
    
    .hero-content {
        min-height: 250px !important;
        padding: 10px !important;
    }
    
    .hero h1 {
        font-size: 2.4rem !important;
        min-height: 85px !important;
        line-height: 1.0 !important;
        margin-bottom: 15px !important;
        word-spacing: -1px;
    }
    
    .hero p {
        min-height: 40px !important;
        margin-bottom: 20px !important;
        font-size: 1rem !important;
    }
    
    .btn {
        min-width: 160px !important;
        padding: 10px 24px !important;
        min-height: 42px !important;
        font-size: 0.9rem !important;
    }
}

/* Font loading optimization */
@media (max-width: 768px) {
    * {
        font-display: swap !important;
        text-rendering: optimizeSpeed !important;
    }
    
    /* Prevent font swap layout shifts */
    .hero *,
    .nav *,
    .btn * {
        font-synthesis: none;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Critical Web Fonts fallback */
@font-face {
    font-family: 'Inter Mobile Fallback';
    size-adjust: 105%;
    ascent-override: 85%;
    descent-override: 22%;
    line-gap-override: 0%;
    src: local('Arial'), local('Helvetica'), local('sans-serif');
    unicode-range: U+0020-007F; /* Basic Latin */
}

/* Performance optimizations */
@media (max-width: 768px) {
    .hero-img-overlay {
        will-change: auto;
        contain: layout style paint;
    }
    
    .hero::before,
    .hero::after {
        contain: layout style paint;
    }
}