/* CLS (Cumulative Layout Shift) Fixes for Desktop Only */
/* Target: Reduce layout shift from 0.484 to acceptable levels (<0.1) */

/* Apply fixes only on desktop (min-width: 1024px) */
@media (min-width: 1024px) {

    /* Fix 1: Slider Container - Reserve space before Slick initializes (0.172 CLS) */
    /* Set explicit height to prevent layout shift when slider initializes */
    banner #slider {
        min-height: 550px; /* Adjusted for typical desktop banner height */
        position: relative;
    }

    banner #slider .slick-list {
        min-height: 550px;
    }

    banner #slider .slide {
        min-height: 550px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Prevent slider from collapsing before initialization */
    banner #slider:not(.slick-initialized) {
        min-height: 550px;
        display: block;
    }

    /* Reserve space for first slide to prevent shift */
    banner #slider .slide:first-child {
        display: flex !important;
    }
    
    /* Fix 2: Search Section - Reserve space (0.118 + 0.118 + 0.022 CLS) */
    /* Prevent search section from shifting when content loads */
    .searcSection {
        min-height: 80px; /* Reserve space for search bar */
    }

    .searcSection .searcContainer {
        min-height: 60px;
    }

    /* Fix select dropdowns to prevent shift */
    .searcSection select {
        height: 30px;
        min-width: 175px;
    }

    .searcSection input {
        height: 30px !important;
        min-width: 175px;
    }
    
    /* Fix 3: Logo - Set explicit dimensions (0.052 CLS) */
    /* Prevent logo from causing layout shift */
    header .logo img.responsive {
        width: 400px; /* Set to actual logo width */
        height: 100px; /* Set explicit height */
        max-width: 100%;
        display: block;
    }

    /* Reserve space for logo container */
    header .logo {
        min-height: 100px;
        min-width: 400px;
    }

    /* Ensure lazyloaded logo doesn't shift */
    header .logo img.lazyload,
    header .logo img.lazyloading {
        width: 400px;
        height: 100px;
    }
    
    /* Fix 4: Right Menu - Prevent shift (0.052 CLS) */
    header .rightMenu {
        min-height: 80px;
    }
    
    /* Fix 5: Lazy loaded images - Set aspect ratio */
    img.lazyload,
    img.lazyloading {
        background: #f0f0f0; /* Placeholder background */
    }
    
    /* Ensure images don't cause reflow */
    img.responsive {
        display: block;
    }
    
    /* Fix 6: Slick slider specific fixes */
    .slick-slider {
        visibility: visible !important;
    }
    
    /* Prevent invisible slides from causing shifts */
    .slick-slide {
        visibility: visible;
    }
    
    /* Reserve space for slick track */
    .slick-track {
        display: flex;
        align-items: center;
    }
    
    /* Fix 7: Banner container stability */
    banner {
        display: block;
        width: 100%;
        overflow: hidden;
    }
    
    /* Fix 8: Prevent search section collapse */
    .searcSection .searcContainer .searchTitle {
        display: inline-block;
        vertical-align: middle;
        min-height: 20px;
    }
    
    /* Fix 9: Button stability */
    .searcSection .search-goTo {
        width: 61px;
        height: 27px;
        display: inline-block;
        vertical-align: middle;
    }
    
    /* Fix 10: Reset button stability */
    .searcSection .resetButton {
        min-height: 30px;
    }
    
    /* Fix 11: Ensure header doesn't shift */
    header {
        min-height: 120px;
    }
    
    /* Fix 12: Navigation stability */
    header nav.main {
        min-height: 60px;
    }
    
    /* Fix 13: Prevent font loading shifts */
    body {
        font-display: swap;
    }
    
    /* Fix 14: Slider dots positioning - prevent shift */
    banner #slider .slick-dots {
        position: absolute;
        top: 50%;
        right: 50px;
        transform: translateY(-50%);
        width: 30px; /* Reserve space */
    }
    
    /* Fix 15: Ensure slider images have dimensions */
    banner #slider .slide img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

}

/* Additional stability improvements for all screen sizes */
/* Prevent lazy load flash */
.lazyload,
.lazyloading {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazyloaded {
    opacity: 1;
}

/* Ensure all images have proper aspect ratio to prevent CLS */
@media (min-width: 1024px) {
    /* Slider images aspect ratio */
    banner #slider .slide img {
        aspect-ratio: 16 / 9; /* Adjust based on your actual image ratio */
        object-fit: cover;
    }

    /* Force hardware acceleration for smoother transitions */
    banner #slider,
    banner #slider .slick-list,
    banner #slider .slick-track {
        transform: translateZ(0);
        will-change: transform;
    }

    /* Preload critical images */
    banner #slider .slide:first-child img {
        loading: eager;
    }
}