/**
 * Slider Publicitario — solo se carga cuando el slider está activo y tiene
 * al menos un banner válido (ver class-frontend.php).
 */

.shsr-slider {
  --shsr-slider-speed: 500ms;
  --shsr-slider-max-h: 420px;
  --shsr-slider-max-h-mobile: 280px;
  --shsr-slider-focal: center;
  position: relative;
  width: 100%;
  margin: 0 0 1.75rem;
  overflow: hidden;
  background: #fff7ed;
}

/* ------------------------------------------------------------------
   Modo "cover" (predeterminado): el banner llena TODO el espacio, sin
   franjas de color a los lados. Lo que sobra de la imagen se recorta
   según el punto focal elegido en el backend.
   ------------------------------------------------------------------ */
.shsr-slider--fit-cover {
  height: var(--shsr-slider-max-h);
}

.shsr-slider--fit-cover .shsr-slider__slide img {
  object-fit: cover;
  object-position: var(--shsr-slider-focal);
}

/* ------------------------------------------------------------------
   Modo "contain": la imagen se ve completa, sin recortar nada. Lo que
   falta para llenar el recuadro se rellena con el color de fondo.
   ------------------------------------------------------------------ */
.shsr-slider--fit-contain {
  height: var(--shsr-slider-max-h);
  /* El JS sustituye la altura fija por la proporción real de la imagen
     (height:auto + aspect-ratio). Este tope evita que una imagen muy alta
     ocupe media pantalla; si se alcanza, la imagen se centra y las franjas
     quedan a los lados, nunca arriba y abajo. */
  max-height: var(--shsr-slider-max-h);
}

.shsr-slider--fit-contain .shsr-slider__slide img {
  object-fit: contain;
  object-position: center;
}

/* ------------------------------------------------------------------
   Modo "auto": el slider adopta la forma exacta de la imagen (lo hace
   slider.js). Ni recorte ni franjas; la altura la manda la imagen.
   ------------------------------------------------------------------ */
.shsr-slider--fit-auto {
  aspect-ratio: 21 / 6; /* solo hasta que el JS mida la imagen real */
}

.shsr-slider--fit-auto .shsr-slider__slide img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 640px) {
  .shsr-slider--fit-cover,
  .shsr-slider--fit-contain {
    height: var(--shsr-slider-max-h-mobile);
  }

  .shsr-slider--fit-contain {
    max-height: var(--shsr-slider-max-h-mobile);
  }
}

.shsr-slider__track {
  width: 100%;
  height: 100%;
}

/* Fade: diapositivas apiladas, se alternan por opacidad */
.shsr-slider--fade .shsr-slider__track {
  position: relative;
}

.shsr-slider--fade .shsr-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--shsr-slider-speed) ease;
  pointer-events: none;
}

.shsr-slider--fade .shsr-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Horizontal: fila que se desplaza en X */
.shsr-slider--horizontal .shsr-slider__track {
  display: flex;
  flex-direction: row;
  height: 100%;
  transition: transform var(--shsr-slider-speed) ease;
}

.shsr-slider--horizontal .shsr-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

/* Vertical: columna que se desplaza en Y */
.shsr-slider--vertical .shsr-slider__track {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--shsr-slider-speed) ease;
}

.shsr-slider--vertical .shsr-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.shsr-slider__slide {
  display: block;
}

.shsr-slider__slide a,
.shsr-slider__slide .shsr-slider__no-link {
  display: block;
  width: 100%;
  height: 100%;
}

.shsr-slider__slide img {
  display: block;
  width: 100%;
  height: 100%;
  /* El object-fit real lo define el modo de ajuste elegido en el backend
     (.shsr-slider--fit-cover / --fit-contain / --fit-auto, arriba). */
}

.shsr-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(23, 23, 23, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.shsr-slider__arrow:hover {
  background: rgba(23, 23, 23, 0.8);
}

.shsr-slider__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.shsr-slider__arrow--prev {
  left: 12px;
}

.shsr-slider__arrow--next {
  right: 12px;
}

.shsr-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 8px;
}

.shsr-slider__dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}

.shsr-slider__dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 640px) {
  .shsr-slider--mobile-swipe-only .shsr-slider__arrow,
  .shsr-slider--mobile-swipe-only .shsr-slider__dots {
    display: none;
  }
}