/**
 * Hero Carousel - styles
 *
 * L'aspect-ratio est posé sur CHAQUE SLIDE (et non plus sur le container).
 * Raison : permet aux slides d'avoir leur propre ratio sur mobile selon
 * qu'une image mobile est uploadée ou non.
 *   - Slide par défaut       : aspect-ratio 2048/840 (desktop ratio)
 *   - Slide avec image mobile : aspect-ratio mobile (4:5 etc.) en dessous du BP
 *
 * Côté Swiper, on active `autoHeight: true` quand la bannière mobile est
 * activée pour que le wrapper s'adapte à la hauteur de la slide active.
 *
 * La pagination est toujours un sibling de .clpac-hero-carousel (dans le wrap) :
 *   - mode overlay : position: absolute au-dessus de l'image
 *   - mode below   : position: static, en flow, sous l'image
 */

.clpac-hero-carousel-wrap {
    position: relative;
    width: 100%;
}

/* Full-bleed : déborde du container Elementor.
   overflow-x:clip empêche le scroll horizontal sans bloquer overflow-y. */
.clpac-hero-carousel-wrap.is-fullwidth {
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    overflow-x: clip;
}

.clpac-hero-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* La règle mobile (@media + aspect-ratio + object-position) est injectée
   inline par render.php avec le breakpoint dynamique d'Elementor.
   Elle ne s'applique qu'aux slides qui ont une image mobile uploadée
   (.clpac-hero-slide--has-mobile). Les autres gardent le ratio desktop. */

/* La slide porte l'aspect-ratio : c'est elle qui détermine la hauteur. */
.clpac-hero-carousel .clpac-hero-slide {
    aspect-ratio: 2048 / 840;
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Fallback pour navigateurs sans aspect-ratio (rares : <Chrome 88, <FF 89, <Safari 15) */
@supports not (aspect-ratio: 1) {
    .clpac-hero-carousel .clpac-hero-slide {
        aspect-ratio: auto;
        padding-top: calc(840 / 2048 * 100%);
        height: 0;
    }
    .clpac-hero-carousel .clpac-hero-slide > * {
        position: absolute;
        inset: 0;
    }
}

.clpac-hero-carousel .clpac-hero-slide__link {
    display: block;
    width: 100%;
    height: 100%;
}

/* L'élément <picture> wrappe l'<img> en mode art direction.
   Par défaut il est inline → on le force en block pour qu'il remplisse la slide. */
.clpac-hero-carousel picture {
    display: block;
    width: 100%;
    height: 100%;
}

.clpac-hero-carousel .clpac-hero-carousel__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
}

/* Effet fade : Swiper passe les slides en position: absolute */
.clpac-hero-carousel.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}

.clpac-hero-carousel.swiper-fade .swiper-slide-active {
    pointer-events: auto;
}

/* ========================================
   Pagination - styles communs aux 2 modes
   ======================================== */
.clpac-hero-carousel-wrap .swiper-pagination {
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    pointer-events: auto;
}

.clpac-hero-carousel-wrap .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #E5E5E5;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, width 0.2s ease, height 0.2s ease;
    margin: 0 4px;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.clpac-hero-carousel-wrap .swiper-pagination-bullet:hover {
    transform: scale(1.1);
}

.clpac-hero-carousel-wrap .swiper-pagination-bullet-active {
    background-color: #C9744A;
}

/* ========================================
   Mode OVERLAY : pagination par-dessus l'image
   ======================================== */
.clpac-hero-carousel-wrap--dots-overlay .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
}

/* ========================================
   Mode BELOW : pagination en flow, sous l'image
   ======================================== */
.clpac-hero-carousel-wrap--dots-below .swiper-pagination {
    position: static;
    width: 100%;
}

/* État éditeur vide */
.clpac-hero-carousel-empty {
    padding: 40px;
    text-align: center;
    background: #f5f5f5;
    border: 2px dashed #ccc;
    color: #666;
    font-size: 14px;
}