/* Hero Section Optimization */
.cs_hero_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    contain: layout;
}

/* Fix hero content layout shift */
.cs_hero_content {
    contain: layout;
    min-height: 200px;
    position: relative;
    z-index: 2;
}

.cs_hero_content_wrapper {
    contain: layout;
    min-height: 200px;
    position: relative;
    z-index: 2;
}

/* Prevent layout shift for images */
img {
    contain: layout;
    height: auto;
}

/* Stable container dimensions */
.container {
    contain: layout;
}

/* Prevent layout shift for dynamic content */
.wow {
    contain: layout;
    min-height: 50px;
    position: relative;
}

/* Fix WOW.js animations to prevent CLS */
.wow.fadeInRight {
    contain: layout;
    min-height: 200px;
    opacity: 1;
    transform: none;
    animation: none;
}

/* Disable animations on mobile to prevent CLS */
@media (max-width: 768px) {
    .wow {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .fadeInRight, .fadeInLeft, .fadeInUp {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Critical CLS Prevention for Hero */
.cs_hero {
    contain: layout;
    min-height: 100vh;
    height: 100vh;
    position: relative;
    overflow: hidden;
    contain: layout style;
    will-change: auto;
}

/* Hero Media Container - Like background-size: cover */
.cs_hero_media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    min-height: 100vh;
    max-height: 100vh;
}

.cs_hero_img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 20%;
    /* LCP Optimization */
    loading: eager;
    fetchpriority: high;
    decoding: async;
    aspect-ratio: 16/9;
    /* Force stable dimensions */
    min-height: 100vh;
    max-height: 100vh;
    object-position: 73% -50px;
}

.cs_hero_overlay {
    contain: layout;
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
}

/* Ensure picture element maintains aspect ratio */
.cs_hero_media picture {
    width: 100%;
    height: 100%;
    display: block;
}

.cs_hero_media picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 73% -50px;
    aspect-ratio: 16/9;
    min-height: 107vh;
    max-height: 100vh;
}

/* Mobile adjustments for hero image positioning */
@media (max-width: 768px) {
    .cs_hero {
        min-height: 86vh;
    }
    
    .cs_hero_img {
        object-position: center 30%;
    }
    
    /* Disable WOW animations on mobile to prevent CLS */
    .wow, [data-wow-duration], [data-wow-delay] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Critical LCP Optimization */
.hero-responsive-bg {
    content-visibility: auto;
    contain-intrinsic-size: 1200px 800px;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Force hardware acceleration for LCP */
.hero-responsive-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: inherit;
    background-size: inherit;
    background-position: inherit;
    background-repeat: inherit;
    z-index: -1;
    will-change: transform;
    transform: translateZ(0);
}

/* Reserve space for fonts to prevent CLS */
body {
    font-display: swap;
}

/* Prevent layout shift from dynamic content */
[data-dynamic] {
    contain: layout style;
}

/* Prevent layout shift from images */
.hero-section img,
.lcp-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}