/**
 * Ancho de tarjeta para el carrusel de la cartelera de cine.
 *
 * card-multimedia trae max-width: 16.75rem (268px) fijo, pensado para un
 * grid compacto. Dentro de un container-fluid ancho eso deja caber 6-7
 * tarjetas a la vez en el carrusel (se ve apretado). Se agranda solo en
 * este contexto, con los mismos breakpoints/anchos que ya usa .card-tile
 * en el organism card-slider (_card-slider.scss) para el mismo propósito.
 */
.cards-sliders .card-slider__container > * {
  flex: 0 0 auto;
}

.cards-sliders .card-slider__container .card-multimedia {
  width: 18rem;
  max-width: 18rem;
}

@media (min-width: 768px) {
  .cards-sliders .card-slider__container .card-multimedia {
    width: 20rem;
    max-width: 20rem;
  }
}

/**
 * En desktop caben 4 tarjetas por fila con 32px entre ellas, según Figma
 * (UB-277), tanto en el carrusel del home de la cartelera como en
 * "Explora más películas". Antes medían 23rem fijo y solo cabían 3.
 */
@media (min-width: 1272px) {
  .cards-sliders.bib-movies-slider .card-slider__container > * {
    flex: 0 0 calc((100% - 6rem) / 4);
    min-width: 0;
  }

  .cards-sliders.bib-movies-slider .card-slider__container .card-multimedia {
    width: 100%;
    max-width: 100%;
  }
}

/**
 * El card-slider deja 24px de padding bajo las tarjetas más 24px sobre el
 * paginador; el diseño pide 24px en total. Doble clase porque
 * _card-slider.scss (bundle global) se carga después con la misma
 * especificidad.
 */
.cards-sliders.bib-movies-slider .card-slider__container {
  padding-bottom: 0;
}

/**
 * card-slider trae los botones prev/next alineados a la izquierda
 * (justify-content: flex-start, en _card-slider.scss dentro de
 * bibliotecas.css). Esa hoja se carga DESPUÉS de esta librería y con la
 * misma especificidad (.cards-sliders .card-slider__pager), así que gana
 * por orden de carga. Se sube la especificidad con .theme-light/.theme-dark
 * (el que esté presente en el markup) para poder sobreescribirla sin
 * !important.
 */
.cards-sliders.theme-light .card-slider__pager,
.cards-sliders.theme-dark .card-slider__pager {
  justify-content: center;
}

/**
 * Sección "Explora más películas" (relacionadas), según Figma (UB-277):
 * separada 120px del hero, con 80px de relleno vertical y 24px entre el
 * header, las tarjetas y el paginador. Se combina con .section-container
 * porque el padding de 24px de ese organism se carga después (bundle global)
 * con la misma especificidad.
 */
.section-container.bib-movie-related {
  margin-top: 7.5rem; /* 120px */
  padding-top: 5rem; /* 80px */
  padding-bottom: 5rem; /* 80px */
}

/**
 * Header de la sección: título y botón de acción administrables, en fila
 * alineados abajo en desktop y apilados en mobile.
 */
.bib-movie-related__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem; /* 24px */
}

.bib-movie-related__header h2 {
  margin: 0;
}