/*
 * Carruseles de tarjetas — "las entrevistadas que dan voz a Buena Banda" y
 * "destacados en YouTube".
 *
 * El slider de Webflow desplaza la máscara entera de un salto: en la fila de
 * entrevistadas caben tres o cuatro fichas, así que cada flecha avanzaba tres o
 * cuatro; y en el de YouTube la máscara mide 1796 px contra 950 de la tarjeta,
 * un salto que no es múltiplo del ancho, así que después de cada flecha quedaba
 * un vídeo cortado por la mitad.
 *
 * Aquí la pista se desplaza con scroll nativo y `scroll-snap`, que ancla cada
 * tarjeta: la flecha avanza exactamente una y siempre queda encuadrada. Quién
 * las mueve: src/components/Carruseles.astro.
 */

/* Al dejar de ser .w-slider pierde el `position: relative` que sostenía a las
   flechas. Sin esto se sueltan y van a caer encima del hero de la portada. */
.bb-carrusel {
  position: relative;
}

.bb-carrusel-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* la barra estorba: el carrusel se maneja con las flechas */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.bb-carrusel-pista::-webkit-scrollbar {
  display: none;
}

.bb-carrusel-pista > .w-slide {
  flex: 0 0 auto;
}

/* Webflow posiciona sus slides en absoluto para animarlos; aquí estorba */
.bb-carrusel-pista > .w-slide {
  position: relative !important;
  left: auto !important;
  transform: none !important;
}

/* el vídeo, en medio de la pista y asomando los vecinos a los lados; el hueco
   de los extremos lo calcula el componente, es lo que hace falta para que la
   primera y la última también puedan quedar centradas */
.bb-carrusel[data-bb-encuadre='centro'] .bb-carrusel-pista > .w-slide {
  scroll-snap-align: center;
}

/* la fila de fichas se queda alineada a la izquierda, como estaba */
.bb-carrusel[data-bb-encuadre='inicio'] .bb-carrusel-pista > .w-slide {
  scroll-snap-align: start;
}

/* las flechas dejan de verse activas cuando ya no hay a dónde ir */
.bb-carrusel > [aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
}

/*
 * Las flechas del carrusel de YouTube.
 *
 * El margen que traen de Webflow las baja 363 px —la medida de las fichas de
 * las entrevistadas—, y sobre una tarjeta de vídeo eso las dejaba fuera de
 * cuadro. Aquí van centradas a lo alto.
 */
.episodios-youtube-slider > .w-slider-arrow-left,
.episodios-youtube-slider > .w-slider-arrow-right {
  justify-content: center;
  align-items: center;
  display: flex;
  /* solo la flecha se pica: la caja mide 80 px y en móvil se montaba encima
     del vídeo, robándole el toque al play */
  pointer-events: none;
}

.episodios-youtube-slider > .w-slider-arrow-left > img,
.episodios-youtube-slider > .w-slider-arrow-right > img {
  margin-top: 0;
  pointer-events: auto;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .bb-carrusel-pista {
    scroll-behavior: auto;
  }
}