/* ═══════════════════════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════════════════════ */

/* 1. Desktop: Force grid to stretch so left slider matches right stack height perfectly. */
@media (min-width: 1024px) {
    .ces-hero__container {
        align-items: stretch !important;
    }
}

/* Remove the old padding and flex constraints from the primary card 
   so the slider can bleed perfectly to the edges. */
.ces-hero__primary-card.ces-hero-slider {
    padding: 0 !important; /* Force override of mobile paddings */
    overflow: hidden;
    position: relative;
    border-radius: var(--ces-radius-xl, 24px);
    display: block; /* Override previous flex layout */
    background: transparent; /* Remove gray background so any weird gaps are invisible, though there shouldn't be any now */

    /* Constrain the width, let height adapt naturally on mobile */
    width: 100%;
    min-height: 0 !important; /* CRITICAL: removes the 480px min-height from hero.css */
}

@media (min-width: 1024px) {
    .ces-hero__primary-card.ces-hero-slider {
        /* On desktop, let CSS Grid stretch it to EXACTLY match the right stack */
        height: 100%;
        min-height: 0 !important; /* CRITICAL: Prevents native image height from blowing up the row */
    }
    
    .ces-hero-slider .swiper-wrapper {
        height: 100% !important; /* Overrides autoHeight on desktop */
    }
    
    .ces-hero-slider .swiper-slide {
        height: 100% !important;
    }
    
    .ces-hero-slide-img {
        height: 100% !important;
        object-fit: cover !important; /* Fill grid perfectly on desktop */
    }
}

/* Ensure the wrapper takes full width */
.ces-hero-slider .swiper-wrapper {
    width: 100%;
}

.ces-hero-slider .swiper-slide {
    width: 100%;
    height: auto; /* Natural height for autoHeight calculation */
    overflow: hidden;
}

.ces-hero-slide-link {
    display: block;
    width: 100%;
    height: 100%;
}

.ces-hero-slide-img {
    width: 100%;
    height: auto; /* Natural image height on mobile (no cropping, no spaces) */
    display: block;
}

/* ── 1px Progress Bar ── */
.ces-hero-progress-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px; /* 2px for better visibility, visually reads as a thin line */
    background: rgba(255, 255, 255, 0.2);
    z-index: 20;
}

.ces-hero-progress-bar {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    transform-origin: left center;
    transform: scaleX(0); /* Controlled by JS */
    /* Transition is removed so Swiper's RAF can update it seamlessly */
}