/**
 * JM CATÁLOGO
 *
 * Todo va dentro de .jm-catalogo-browse (la portada de /works/) o de .jm-catalogo-row (cada fila),
 * así que ni la rejilla clásica ni la home se enteran de que este fichero existe.
 */


/* ----------------------------------------------------------------------------
 * La vista
 * ------------------------------------------------------------------------- */

/* La rejilla se queda vacía porque le hemos quitado el loop: fuera, y con ella la barra de abajo. */
.jm-catalogo-browse .vodi-archive-wrapper,
.jm-catalogo-browse .page-control-bar-bottom {
  display: none;
}

/* El componente de fila trae su propio .container, y aquí ya estamos dentro de uno. */
.jm-catalogo-rows .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.jm-catalogo-rows {
  margin-top: 10px;
}

/* Los grupos que no toca ver. */
.jm-catalogo-slot--oculto {
  display: none !important;
}


/* ----------------------------------------------------------------------------
 * Barra superior
 * ------------------------------------------------------------------------- */

.jm-catalogo-browse .vodi-control-bar {
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Izquierda: selector de agrupación */
.jm-catalogo-grupos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jm-catalogo-grupo,
.jm-panel-open,
.jm-panel__chip {
  height: 34px;
  padding: 0 16px;
  border: 1px solid #3a3a3a;
  border-radius: 0;
  background-color: transparent;
  color: #b4bbc0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease-in-out, color 0.15s ease-in-out;
}

.jm-catalogo-grupo:hover,
.jm-catalogo-grupo:focus,
.jm-panel-open:hover,
.jm-panel-open:focus,
.jm-panel__chip:hover,
.jm-panel__chip:focus {
  color: #f44c7a;
  border-color: #f44c7a;
  outline: none;
}

.jm-catalogo-grupo.is-active,
.jm-panel__chip.is-active {
  background-color: #f44c7a;
  border-color: #f44c7a;
  color: #fff;
}

/* El botón que abre el panel lleva icono y texto. */
.jm-panel-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Derecha: botón de filtros en móvil + buscador */
.jm-catalogo-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.jm-catalogo-bar .masvideos-search {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Los dos buscadores del catálogo, el de la barra y el del panel.
   En modo oscuro el tema les pone un azul marino de fondo y el azul de Bootstrap al enfocar
   (theme.css:692), así que estos selectores llevan body delante: así ganan en especificidad y no
   dependen de qué hoja de estilos se cargue antes. */
body.jm-catalogo .jm-catalogo-bar .search-field,
body.jm-catalogo .jm-panel__search .search-field {
  height: 34px;
  padding: 0 38px 0 14px;
  border: 1px solid #3a3a3a;
  border-radius: 0;
  background-color: transparent;
  color: #fff;
  font-size: 13px;
  box-shadow: none;
}

body.jm-catalogo .jm-catalogo-bar .search-field::placeholder,
body.jm-catalogo .jm-panel__search .search-field::placeholder {
  color: #7a7c7d;
}

body.jm-catalogo .jm-catalogo-bar .search-field:focus,
body.jm-catalogo .jm-panel__search .search-field:focus {
  border-color: #f44c7a;
  background-color: transparent;
  color: #fff;
  box-shadow: none;
  outline: none;
}

body.jm-catalogo .jm-catalogo-bar .search-field {
  min-width: 220px;
}

/* El autorrelleno de Chrome pinta el campo de azul claro por su cuenta; la única forma de taparlo
   es una sombra interior del color del fondo. */
body.jm-catalogo .jm-catalogo-bar .search-field:-webkit-autofill,
body.jm-catalogo .jm-panel__search .search-field:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #0c0c0c inset;
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
}

.jm-catalogo-bar .masvideos-search .search-submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 0;
  background-color: transparent;
  line-height: 1;
}

.jm-catalogo-bar .masvideos-search .search-submit svg path {
  fill: #b4bbc0;
}

.jm-catalogo-bar .masvideos-search .search-submit:hover svg path {
  fill: #f44c7a;
}

.jm-catalogo-bar .handheld-sidebar-toggle {
  margin: 0;
}


/* ----------------------------------------------------------------------------
 * La fila
 *
 * El componente viene de la home, donde el título va en una columna a la izquierda. Aquí lo
 * queremos encima del carrusel, a lo ancho, con las flechas y el "ver todas" a la derecha.
 * ------------------------------------------------------------------------- */

.jm-catalogo-row.home-section {
  padding: 0 0 34px;
}

.jm-catalogo-row .section-movies-carousel-aside-header__inner {
  display: block;
}

/* El tema pone una rayita de 48px encima del título de cada sección. Al volver la cabecera un
   flex, esa rayita pasaba a ser un elemento más de la fila y se plantaba a la izquierda del
   título. Ver masvideos.css:1816 */
.jm-catalogo-row .home-section__header::before {
  display: none;
}

.jm-catalogo-row .home-section__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 14px;
  max-width: none;
  flex: none;
}

.jm-catalogo-row .home-section__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #fff;
}

.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows {
  display: flex;
  margin: 0 0 0 auto;
}

.jm-catalogo-row .home-section__action {
  margin: 0;
}

.jm-catalogo-row .home-section__action-link {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #b4bbc0;
}

.jm-catalogo-row .home-section__action-link:hover,
.jm-catalogo-row .home-section__action-link:focus {
  color: #f44c7a;
}

.jm-catalogo-row .section-movies-carousel__carousel {
  max-width: none;
  flex: none;
}

/* Flechas: los mismos botones cuadrados del paginador de filas del resto del sitio
   (.jm-row-paginator_browser en style.css). Hay que deshacer antes lo que masvideos.css le pone
   por defecto a .slick-arrow: posición absoluta, 20x20, texto invisible y una flecha de fondo. */
.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows .slick-arrow {
  position: static;
  top: auto;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 5px;
  padding: 5px 15px;
  border: 1px solid #f44c7a;
  border-radius: 0;
  background-color: transparent;
  color: #f44c7a;
  font-size: 14px;
  line-height: 1.5;
  transform: none;
  cursor: pointer;
  transition: all 0.15s ease-in-out, color 0.15s ease-in-out;
}

.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows .slick-arrow::before {
  display: none;
}

.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows .slick-arrow:hover,
.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows .slick-arrow:focus {
  background-color: #f44c7a;
  border-color: #f44c7a;
  color: #fff;
  outline: none;
}

.jm-catalogo-row .section-movies-carousel-aside-header__custom-arrows .slick-arrow.slick-disabled {
  opacity: 0.35;
  cursor: default;
}


/* ----------------------------------------------------------------------------
 * Hueco de las filas que aún no han llegado
 * ------------------------------------------------------------------------- */

.jm-catalogo-row-placeholder {
  padding-bottom: 34px;
}

.jm-catalogo-row-placeholder__head {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 14px;
}

.jm-catalogo-row-title {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #5a5a5a;
}

/* Mismos huecos entre tarjetas que la rejilla del tema (masvideos.css:3415). */
.jm-catalogo-row-placeholder__cards {
  display: flex;
}

.jm-catalogo-skel {
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
  padding: 0 12.5px;
}

.jm-catalogo-skel__poster {
  display: block;
  aspect-ratio: 2 / 3;
  background-color: #141414;
}

.jm-catalogo-skel__line {
  display: block;
  height: 12px;
  margin-top: 11px;
  background-color: #141414;
}

.jm-catalogo-skel__line--corta {
  width: 60%;
}

/* El mismo número de columnas que el carrusel en cada tamaño, para que el hueco mida lo mismo. */
@media (max-width: 1200px) {
  .jm-catalogo-skel {
    flex-basis: 25%;
    max-width: 25%;
  }
  .jm-catalogo-skel:nth-child(n + 5) {
    display: none;
  }
}

@media (max-width: 992px) {
  .jm-catalogo-skel {
    flex-basis: 33.3333%;
    max-width: 33.3333%;
  }
  .jm-catalogo-skel:nth-child(n + 4) {
    display: none;
  }
}

@media (max-width: 768px) {
  .jm-catalogo-skel {
    flex-basis: 50%;
    max-width: 50%;
  }
  .jm-catalogo-skel:nth-child(n + 3) {
    display: none;
  }
}


/* ----------------------------------------------------------------------------
 * Hover 1: la tarjeta crece
 *
 * slick recorta con overflow:hidden en .slick-list, así que la liberamos y movemos el recorte
 * a .movies-carousel__inner, que lleva un acolchado vertical para dejar crecer la tarjeta.
 * El margen negativo devuelve el espacio, para que la fila ocupe lo mismo que antes.
 * ------------------------------------------------------------------------- */

@media (hover: hover) {

  .jm-catalogo-hover-card .jm-catalogo-row .movies-carousel__inner {
    overflow: hidden;
    padding: 26px 0;
    margin: -26px 0;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .slick-list {
    overflow: visible;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .slick-slide {
    position: relative;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .slick-slide:hover {
    z-index: 6;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .movie {
    position: relative;
    transition: transform 0.25s ease;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .movie:hover {
    transform: scale(1.08);
    z-index: 6;
  }

  .jm-catalogo-hover-card .jm-catalogo-row .movie:hover .movie__poster {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.75);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jm-catalogo-hover-card .jm-catalogo-row .movie,
  .jm-catalogo-hover-card .jm-catalogo-row .movie:hover {
    transition: none;
    transform: none;
  }
}


/* ----------------------------------------------------------------------------
 * Hover 2: el fondo de la fila
 *
 * La atenuación va por clase y no por animación de jQuery: con 20 tarjetas seguidas las
 * animaciones se pisaban unas a otras y la fila se quedaba a medio apagar.
 * ------------------------------------------------------------------------- */

.jm-catalogo-hover-bg .jm-catalogo-row {
  transition: background-image 0.3s ease, text-shadow 0.2s ease;
}

/* Las obras traen fondos de todo tipo, y sobre uno claro el texto blanco desaparece. La sombra
   sólo aparece mientras hay imagen de fondo: text-shadow se hereda, así que con ponerla en la
   fila la cogen el título, el "ver todas" y los textos de las tarjetas. */
.jm-catalogo-hover-bg .jm-catalogo-row.is-hovering {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.5);
}

/* Los botones no son texto: a ellos les damos la sombra sobre su propia silueta. */
.jm-catalogo-hover-bg .jm-catalogo-row.is-hovering .section-movies-carousel-aside-header__custom-arrows .slick-arrow {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.jm-catalogo-hover-bg .jm-catalogo-row .movie {
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.jm-catalogo-hover-bg .jm-catalogo-row.is-hovering .movie {
  opacity: 0.18;
}

.jm-catalogo-hover-bg .jm-catalogo-row .movie:hover {
  opacity: 1;
}


/* ----------------------------------------------------------------------------
 * Hover 3: previsualización de vídeo
 *
 * El vídeo va en la banda de la fila, detrás de las tarjetas, como segundo tiempo del hover del
 * fondo: primero la imagen fija y, si uno se queda, la imagen empieza a moverse. La tarjeta no se
 * toca. Dentro del cartel no cabía: el vídeo es 16:9 y el cartel 2:3.
 * ------------------------------------------------------------------------- */

.jm-catalogo-row {
  position: relative;
}

.jm-catalogo-row > .container {
  position: relative;
  z-index: 1;
}

.jm-catalogo-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.jm-catalogo-preview.is-ready {
  opacity: 1;
}

/* Un velo por encima del vídeo, lo justo para que se lean los títulos. */
.jm-catalogo-preview::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.15);
}

/* Mientras hay vídeo, las demás tarjetas se apartan casi del todo: si se quedan al 18% como en el
   hover normal, el vídeo asoma tan poco por detrás que parece que no pasa nada. La obra que se
   está señalando se queda entera, de ancla. */
.jm-catalogo-row.is-previewing .movie,
.jm-catalogo-hover-bg .jm-catalogo-row.is-previewing .movie {
  opacity: 0.06;
}

.jm-catalogo-row.is-previewing .movie:hover,
.jm-catalogo-hover-bg .jm-catalogo-row.is-previewing .movie:hover {
  opacity: 1;
}

/* Señal de que esa obra tiene preview: un triangulito en la esquina del cartel. Sale del propio
   atributo data-preview, así que no hace falta tocar el marcado de la tarjeta, y sólo aparece si
   la previsualización está encendida: si no, prometería algo que no va a pasar. */
body.jm-catalogo-hover-video .jm-catalogo-row .movie__poster .movie__link[data-preview]::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14" width="12" height="14"><path fill="white" d="M0 0l12 7L0 14z"/></svg>');
  background-repeat: no-repeat;
  background-position: 8px center;
  background-size: 7px 8px;
  opacity: 0.75;
  transition: all 0.2s ease-in-out;
}

body.jm-catalogo-hover-video .jm-catalogo-row .movie:hover .movie__poster .movie__link[data-preview]::before {
  border-color: #f44c7a;
  background-color: #f44c7a;
  opacity: 1;
}

.jm-catalogo-preview iframe,
.jm-catalogo-preview video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 56.25vw;
  min-height: 100%;
  border: 0;
  transform: translate(-50%, -50%);
}

.jm-catalogo-preview video {
  height: 100%;
  object-fit: cover;
}


/* ----------------------------------------------------------------------------
 * Panel de filtros
 *
 * Sustituye al sidebar de filtros. Sale en todo el catálogo, no sólo en la vista de filas, y a
 * cualquier ancho: sin él la rejilla clásica se queda sin manera de filtrar.
 * ------------------------------------------------------------------------- */

/* En la rejilla clásica el botón se cuela entre el bloque izquierdo y el derecho de la barra;
   con margin auto empuja y se queda pegado al grupo de la derecha. */
.jm-panel-launch {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.jm-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
}

.jm-panel[hidden] {
  display: none;
}

.jm-panel__backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.jm-panel.is-open .jm-panel__backdrop {
  opacity: 1;
}

.jm-panel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 380px;
  max-width: 90vw;
  background-color: #0c0c0c;
  border-left: 1px solid #2a2a2a;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.jm-panel.is-open .jm-panel__sheet {
  transform: none;
}

body.jm-panel-abierto {
  overflow: hidden;
}

.jm-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #2a2a2a;
}

.jm-panel__title {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.jm-panel__close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #3a3a3a;
  background-color: transparent;
  color: #b4bbc0;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.jm-panel__close:hover,
.jm-panel__close:focus {
  border-color: #f44c7a;
  color: #f44c7a;
  outline: none;
}

.jm-panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

.jm-panel__search {
  margin-bottom: 24px;
}

.jm-panel__search .search-form {
  position: relative;
  display: flex;
  align-items: center;
}

/* El aspecto lo pone la regla que comparten los dos buscadores del catálogo, más arriba. */
body.jm-catalogo .jm-panel__search .search-field {
  width: 100%;
}

.jm-panel__search .search-submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 34px;
  padding: 0;
  border: 0;
  background-color: transparent;
}

.jm-panel__search .search-submit svg path {
  fill: #b4bbc0;
}

.jm-panel__section + .jm-panel__section {
  margin-top: 26px;
}

.jm-panel__section-title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7c7d;
}

.jm-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jm-panel__chip {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.jm-panel__chips--letters .jm-panel__chip {
  min-width: 34px;
  justify-content: center;
  padding: 0 8px;
}

.jm-panel__terms {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jm-panel__term {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #1c1c1c;
  color: #b4bbc0;
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.jm-panel__term:hover,
.jm-panel__term:focus,
.jm-panel__term.is-active {
  color: #f44c7a;
}

.jm-panel__term-count {
  flex: 0 0 auto;
  font-size: 11px;
  color: #6a6a6a;
}

.jm-panel__term.is-active .jm-panel__term-count {
  color: #f44c7a;
}

.jm-panel__foot {
  flex: 0 0 auto;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #2a2a2a;
}

.jm-panel__reset {
  display: block;
  padding: 9px 12px;
  border: 1px solid #f44c7a;
  color: #f44c7a;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.15s ease-in-out;
}

.jm-panel__reset:hover,
.jm-panel__reset:focus {
  background-color: #f44c7a;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .jm-panel__backdrop,
  .jm-panel__sheet {
    transition: none;
  }
}


/* ----------------------------------------------------------------------------
 * Pantallas pequeñas
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {

  .jm-catalogo-row .home-section__title,
  .jm-catalogo-row-title {
    font-size: 17px;
  }

  .jm-catalogo-row.home-section {
    padding-bottom: 26px;
  }

  .jm-catalogo-bar,
  .jm-catalogo-grupos {
    width: 100%;
  }

  .jm-catalogo-bar .masvideos-search {
    flex: 1 1 auto;
  }

  body.jm-catalogo .jm-catalogo-bar .search-field {
    min-width: 0;
    width: 100%;
  }
}