/**
 * Case Study Carousel AB - Divi 5 custom module (parent + child)
 * Layout: Swiper slidesPerView='auto' + centeredSlides. Slide active plus haute
 * que les inactives via .swiper-slide-active. Overlay coloré en mix-blend hard-light.
 */

.ab-cs-carousel {
  --ab-cs-dot-color:         #FCFBF7;
  --ab-cs-dot-active-color:  #F62E02;
  --ab-cs-dot-size:          4px;
  --ab-cs-dot-gap:           12px;
  --ab-cs-dot-inactive-width: 18px;
  --ab-cs-dot-active-width:   70px;

  --ab-cs-slide-height:        500px;
  --ab-cs-slide-active-height: 600px;
  --ab-cs-slide-radius:        5px;
  --ab-cs-slide-gap:           0px;

  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.ab-cs-carousel__inner {
  display: block;
  width: 100%;
}

/* Viewport (container Swiper).
   overflow visible pour que les slides prev/next soient visibles en entier
   au-delà des bords du container, pas juste croppées. */
.ab-cs-carousel__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  padding: 20px 0;
}

/* ---- SLIDE ----
   La largeur est calculée par Swiper via slidesPerView (option JS).
   Le slot du slide fait toujours la hauteur MAX (active) pour éviter tout
   layout shift quand un slide change d'état. Seule la card interne anime sa
   hauteur, ce qui donne une transition fluide sans saccade. */
.ab-cs-carousel-item {
  height: var(--ab-cs-slide-active-height);
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}

/* Card: par défaut à la hauteur inactive, transition douce vers active */
.ab-cs-carousel-item__card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--ab-cs-slide-height);
  border-radius: var(--ab-cs-slide-radius);
  overflow: hidden;
  color: #FCFBF7;
  text-decoration: none;
  isolation: isolate;
  transition:
    height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 400ms ease;
}

/* Slide active (au centre) : card à la hauteur max + shadow.
   Le slot du slide reste à la même hauteur, seule la card grandit. */
.ab-cs-carousel .swiper-slide-active .ab-cs-carousel-item__card {
  height: var(--ab-cs-slide-active-height);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
.ab-cs-carousel-item__card--link {
  cursor: pointer;
}

/* Media (image de fond + overlay) */
.ab-cs-carousel-item__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--ab-cs-slide-radius);
  z-index: 0;
}
.ab-cs-carousel-item__bg,
.ab-cs-carousel-item__bg-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ab-cs-carousel-item__bg-placeholder {
  background: linear-gradient(135deg, #444, #222);
}
.ab-cs-carousel-item__overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: hard-light;
  pointer-events: none;
}

/* Logo (top center) */
.ab-cs-carousel-item__logo {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 32px 24px 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.ab-cs-carousel-item__logo img {
  max-width: 60%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Texte (bottom center) */
.ab-cs-carousel-item__text {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 24px 24px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ab-cs-carousel-item__title {
  font-family: 'PP Fragment Sans', 'PP Fragment', sans-serif;
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  color: #FCFBF7;
  text-transform: uppercase;
  margin: 0;
}
.ab-cs-carousel-item__description {
  font-family: 'PP Fragment Glare', 'PP Fragment', serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #FCFBF7;
  margin: 0;
  max-width: 90%;
}

/* Builder preview (pas de Swiper): flex row justify-center pour donner un aperçu. */
.ab-cs-carousel__viewport:not(.swiper-initialized) .ab-cs-carousel__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: var(--ab-cs-slide-gap);
  transform: none !important;
  padding: 0 var(--ab-cs-slide-gap);
  align-items: center;
}

/* ---- Dots pagination ---- */
.ab-cs-carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ab-cs-dot-gap);
  margin-top: 32px;
  padding: 0;
  position: static !important;
  width: auto !important;
}
.ab-cs-carousel__dot,
.ab-cs-carousel__dots .swiper-pagination-bullet {
  height: var(--ab-cs-dot-size);
  width: var(--ab-cs-dot-inactive-width);
  background-color: var(--ab-cs-dot-color);
  opacity: 1;
  margin: 0 !important;
  border-radius: 0;
  cursor: pointer;
  transition:
    background-color 250ms ease,
    width 250ms ease;
  display: inline-block;
}
.ab-cs-carousel__dot.is-active,
.ab-cs-carousel__dots .swiper-pagination-bullet-active {
  background-color: var(--ab-cs-dot-active-color);
  width: var(--ab-cs-dot-active-width);
}

.ab-cs-carousel__viewport.swiper-initialized {
  cursor: grab;
}
.ab-cs-carousel__viewport.swiper-initialized:active {
  cursor: grabbing;
}
.ab-cs-carousel__dots .swiper-pagination-bullet:focus-visible {
  outline: 2px solid var(--ab-cs-dot-active-color);
  outline-offset: 3px;
}

/* ==============================================================
   Swiper core styles (extraits)
   ============================================================== */
.ab-cs-carousel .swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.ab-cs-carousel .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  align-items: center;
  transition-property: transform;
  box-sizing: content-box;
}
.ab-cs-carousel .swiper-slide {
  flex-shrink: 0;
  position: relative;
  transition-property: transform, height;
  display: flex;
}
.ab-cs-carousel .swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.ab-cs-carousel .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}