/* ========================================
 * CLS (Cumulative Layout Shift) Fixes
 * ========================================
 * 
 * Targeted CSS to prevent layout shifts without breaking existing layouts
 * Addresses Google Search Console CLS issues
 */

/* ==========================================================================
   GLOBAL IMAGE DIMENSION FALLBACK - CRITICAL FOR CLS
   ========================================================================== */

/* 
 * Ensure images with width/height attributes maintain aspect ratio
 * This prevents layout shifts when images load

 THIS BROKE THE IMAGE ON INDUSTRIES PAGE, SO REMOVING.
 img[width][height] {
    height: auto;
    max-width: 100%;
}
*/

/* 
 * For images with explicit dimensions, ensure they don't exceed container
 * while maintaining their intrinsic aspect ratio
 */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent images from causing horizontal overflow */
figure img,
picture img,
.wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   HOMEPAGE HERO CAROUSEL - PREVENT CLS
   ========================================================================== */

/* Reserve minimum height ONLY for homepage hero carousel - be very specific */
.homepage_hero .featured-slider-one {
    min-height: 600px; /* Reserve space for hero on desktop */
}

.homepage_hero .featured-slider-one .f-slider-layer {
    min-height: 600px; /* Maintain height through carousel initialization */
}

.homepage_hero .owl-carousel .owl-item {
    min-height: 600px;
}

/* Mobile responsive heights */
@media (max-width: 768px) {
    .homepage_hero .featured-slider-one,
    .homepage_hero .featured-slider-one .f-slider-layer,
    .homepage_hero .owl-carousel .owl-item {
        min-height: 400px; /* Smaller height for mobile */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .homepage_hero .featured-slider-one,
    .homepage_hero .featured-slider-one .f-slider-layer,
    .homepage_hero .owl-carousel .owl-item {
        min-height: 500px; /* Medium height for tablets */
    }
}

/* ==========================================================================
   ELEMENTOR SECTIONS - PREVENT SHIFTS
   ========================================================================== */

/* Only apply to homepage Elementor sections to avoid breaking other pages */
.home .elementor-section {
    min-height: 40px; /* Prevent complete collapse */
}

/* ==========================================================================
   PRELOADER - PREVENT CLS
   ========================================================================== */

/* Ensure preloader doesn't cause shift when it disappears */
.preloader {
    position: fixed; /* Use fixed to keep it out of document flow */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}





/* ==========================================================================
   FONT LOADING - PREVENT FOIT (ALREADY HANDLED)
   ========================================================================== */
/* 
 * Font loading is already optimized with font-display: swap
 * in functions.php and Google Fonts URL
 */

/* ==========================================================================
   CAROUSEL IMAGE CONTAINERS - PREVENT CLS
   ========================================================================== */

/* Swiper carousel cards - reserve space */
.cpt-carousel-solutions .carousel-image,
.cpt-carousel-industries .carousel-image,
.cpt-carousel-products .carousel-image,
.cpt-carousel-parts .carousel-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.cpt-carousel-solutions .carousel-image img,
.cpt-carousel-industries .carousel-image img,
.cpt-carousel-products .carousel-image img,
.cpt-carousel-parts .carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Generic carousel card image containers */
.carousel-card .carousel-image {
    min-height: 200px;
    aspect-ratio: 4 / 3;
}

/* ==========================================================================
   DETAIL PAGE HERO IMAGES - PREVENT CLS
   ========================================================================== */

/* Solution/Industry hero images */
.slanted-image-container {
    /* Remove fixed aspect-ratio to allow image's natural ratio */
    min-height: 300px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
}

.slanted-image-container img {
    /* Show full image without cropping */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Product/Part hero images */
.product-hero-image {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-hero-image img {
    max-height: 400px;
    width: auto;
    height: auto;
}

/* ==========================================================================
   GALLERY THUMBNAILS - PREVENT CLS
   ========================================================================== */

.gallery-thumbnails .thumbnail-item {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.gallery-thumbnails .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   TEAM BANNER - PREVENT CLS
   ========================================================================== */

.experts-list .team-member-image {
    aspect-ratio: 3 / 4;
    min-height: 200px;
    overflow: hidden;
}

.experts-list .team-member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   LATEST NEWS / BLOG CARDS - PREVENT CLS
   ========================================================================== */

.news-card .news-image,
.blog-card .blog-image,
.article-card .article-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.news-card .news-image img,
.blog-card .blog-image img,
.article-card .article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   CASE STUDY CARDS - PREVENT CLS
   ========================================================================== */

.case-study-card .case-study-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.case-study-card .case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   NAVIGATION / HEADER - PREVENT CLS
   ========================================================================== */

/* Logo should have fixed dimensions */
.header-style-one .logo img,
.site-logo img,
.custom-logo {
    max-height: 60px;
    width: auto;
    height: auto;
}

/* Main navigation - prevent height changes */
.desktop-nav {
    min-height: 80px;
}

@media (max-width: 991px) {
    .desktop-nav {
        min-height: 60px;
    }
}

/* ==========================================================================
   FOOTER - PREVENT CLS
   ========================================================================== */

footer,
.site-footer {
    min-height: 200px;
}