/**
 * Carrousel pour le bloc "Home Slider" (Vue home_slider, affichage Block).
 * S'applique a la sortie "Liste non mise en forme" de la Vue, transformee
 * en carrousel via carousel.js.
 */

.kh-hs-carousel {
  position: relative;
  overflow: hidden;
  height: 60vh;
  min-height: 320px;
  max-height: 620px;
}

.kh-hs-carousel__track {
  display: flex;
  height: 100%;
  transition: transform .6s ease;
}

.kh-hs-carousel__slide {
  position: relative;
  min-width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.kh-hs-carousel__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kh-hs-carousel__slide a {
  display: block;
  width: 100%;
  height: 100%;
}

.kh-hs-carousel__slide .views-field,
.kh-hs-carousel__slide .field-content {
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .kh-hs-carousel {
    height: 80vh;
    min-height: 420px;
    max-height: 720px;
    background: var(--kh-color-bg-soft, #f3e6da);
  }

  /* Sur mobile, on privilegie afficher l'image entiere (portrait le plus
     souvent) plutot que de la rogner : object-fit: contain au lieu de
     cover. Le fond de la carousel comble l'espace autour si le ratio de
     l'image ne remplit pas exactement le cadre. */
  .kh-hs-carousel__slide img {
    object-fit: contain;
  }
}

/* Repli CSS pur (si JS desactive) : masque les slides "mobile only" des
   qu'on depasse la largeur mobile. Le JS (carousel.js) retire en plus ces
   slides du DOM au demarrage pour que le carrousel (dots/index) ne compte
   pas des slides invisibles. */
@media (min-width: 768px) {
  .kh-hs-carousel__slide--mobile-only {
    display: none;
  }
}

/* Fleches precedent / suivant */
.kh-hs-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  color: var(--kh-color-text, #000);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.kh-hs-carousel__arrow:hover { background: #fff; }
.kh-hs-carousel__arrow--prev { left: 16px; }
.kh-hs-carousel__arrow--next { right: 16px; }

/* Puces */
.kh-hs-carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2;
}
.kh-hs-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  padding: 0;
}
.kh-hs-carousel__dot.is-active {
  background: var(--kh-color-accent, #b69e4e);
}

@media (max-width: 600px) {
  .kh-hs-carousel__arrow { width: 32px; height: 32px; font-size: 16px; }
}