/*
 * Carrusel del contenido migrado.
 *
 * Lo carga la web pública (globals.css) y también el panel (gestion.css), por lo
 * mismo que slider.css: la vista previa del editor tiene que enseñar el
 * resultado y no un dibujo parecido. Por eso va en CSS liso, sin utilidades de
 * Tailwind, y los colores se declaran con respaldo para que valgan en los dos
 * sitios.
 *
 * El marcado lo genera components/CarruselLegacy.tsx; el `<div>` que lo envuelve
 * lo pone lib/carruseles-legacy.ts al importar.
 */

/* ------------------------------------------------------------------ el hueco */

/**
 * La lista original sigue estando debajo del carrusel.
 *
 * Solo se esconde cuando el carrusel se ha montado de verdad
 * (`data-carrusel-montado`, que pone el componente). Sin JavaScript, o si algo
 * falla por el camino, lo que se ve es la lista de imágenes de siempre: perder
 * el carrusel es un fastidio, perder el contenido sería un error.
 */
/**
 * Sin margen propio, y es a propósito.
 *
 * Un slider insertado desde el panel sí lo lleva (ver `.sld` en slider.css),
 * pero este no se inserta: SUSTITUYE a una lista de imágenes que ya estaba en
 * la página. En las páginas de YOOtheme esos carruseles van encajados entre la
 * cabecera y el cuerpo del cartel —en el original llevaban
 * `uk-margin-remove-top` y `uk-margin-remove-bottom`—, así que cualquier aire
 * que se le añada aquí abre un escalón que en seom.org no existe. El poco
 * espacio que queda entre imágenes lo pone `.legacy img`, igual que entre dos
 * imágenes sueltas del mismo contenido.
 */
[data-seom-carrusel] {
  display: block;
  margin: 0;
}

[data-seom-carrusel][data-carrusel-montado] > ul {
  display: none;
}

/* ------------------------------------------------------------- el carrusel */

/**
 * El carrusel mide lo que miden sus imágenes, no lo que mide la columna.
 *
 * No es un capricho de maquetación. En el contenido migrado las imágenes se
 * pintan a su tamaño natural —`.legacy img` no las estira—, así que un carrusel
 * a todo lo ancho quedaría unos píxeles más ancho que la cabecera y el pie que
 * lo acompañan en la misma página, y el escalón se nota. Con `fit-content` el
 * bloque se ajusta a la imagen más ancha y arranca donde arrancan las demás;
 * `max-width` lo devuelve al ancho de la columna en cuanto la pantalla es más
 * estrecha que las imágenes.
 */
.crl {
  --crl-teal: var(--color-primary, #007078);
  --crl-teal-suave: var(--color-teal-soft, #4a8f8c);
  --crl-naranja: #ec6608;

  position: relative;
  width: fit-content;
  max-width: 100%;
  /* Sin esto el carrusel impone un ancho mínimo y desborda en móvil. */
  min-width: 0;
}

/**
 * El marco recorta, pero NO impone altura.
 *
 * Es la diferencia con `.sld__marco`: allí hay una proporción y las fotos se
 * recortan para cumplirla. Aquí las imágenes son carteles con texto dentro y
 * recortarlos se lleva por delante lo que hay que leer, así que la altura —y el
 * ancho— los ponen ellas.
 */
.crl__marco {
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/* Fundido: todas las diapositivas en la misma celda de la rejilla, apiladas.
   Apilar con `grid` y no en absoluto es lo que deja que el bloque siga midiendo
   lo que mide la imagen más alta. */
.crl--fundido .crl__pista {
  display: grid;
}

.crl--fundido .crl__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.crl--fundido .crl__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Deslizar: una tira que se mueve. El desplazamiento lo pone el componente. */
.crl--deslizar .crl__pista {
  display: flex;
  align-items: flex-start;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.crl--deslizar .crl__slide {
  flex: 0 0 100%;
  width: 100%;
}

.crl__slide {
  position: relative;
  display: block;
  text-decoration: none;
}

/* `.crl a…` y no `a…` a secas: dentro del contenido migrado hay un
   `.legacy a { color: … }` que gana a una sola clase y pintaría de color de
   enlace lo que hubiera encima de la imagen. */
.crl a.crl__slide {
  color: inherit;
}

a.crl__slide:focus-visible {
  outline: 3px solid var(--crl-naranja);
  outline-offset: -3px;
}

/* Los `!important` son para ganarle a `.legacy img`, que deja las imágenes en
   línea y con margen vertical: dentro del carrusel eso abre una franja blanca
   bajo cada diapositiva. */
.crl__img {
  display: block !important;
  /* `max-width` y no `width`: la imagen manda mientras quepa, y solo se reduce
     cuando la pantalla es más estrecha que ella. Estirarla la dejaría más ancha
     que el resto de imágenes de la página y, además, borrosa. */
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 !important;
}

/* ------------------------------------------------------------------ título */

/**
 * El título solo aparece si el carrusel original lo enseñaba.
 *
 * En los carruseles de banners venía apagado y el `<h3>` del respaldo era el
 * nombre interno del fichero («DMC2025_1»): enseñarlo sería enseñar la costura
 * de la migración.
 */
.crl__titulo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 34px 24px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
  color: #fff;
  font-family: var(--font-slab, 'Roboto Slab', Georgia, serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

/* Con título y puntos comparten el borde de abajo, así que el título deja
   hueco: si no, los puntos se le sientan encima al texto. */
.crl--con-titulos .crl__titulo {
  padding-bottom: 30px;
}

/* --------------------------------------------------------------- controles */

.crl__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--crl-teal);
  cursor: pointer;
  transition: background 0.2s ease;
}

.crl__flecha:hover {
  background: #fff;
}

.crl__flecha:focus-visible {
  outline: 3px solid var(--crl-naranja);
  outline-offset: 2px;
}

.crl__flecha--anterior {
  left: 12px;
}

.crl__flecha--siguiente {
  right: 12px;
}

.crl__flecha svg {
  width: 18px;
  height: 18px;
  margin: 0;
}

/**
 * Los puntos van DENTRO del marco, encima de la imagen.
 *
 * Es al revés que en `.sld`, donde cuelgan por debajo, y por la misma razón que
 * el bloque no lleva margen: aquí el carrusel ocupa el sitio de una imagen que
 * estaba encajada entre otras dos, así que todo lo que sume por fuera —16 px de
 * margen más 9 de punto— corre hacia abajo el resto del cartel. Encima de la
 * foto no ocupan nada.
 */
.crl__puntos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Sobre una foto cualquiera: blancos translúcidos con una sombra mínima, que es
   lo que los hace visibles tanto sobre un cielo como sobre una bata. */
.crl__puntos button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: background 0.2s ease;
}

.crl__puntos button:hover {
  background: rgba(255, 255, 255, 0.85);
}

.crl__puntos button.is-active {
  background: #fff;
}

@media (max-width: 700px) {
  .crl__flecha {
    width: 32px;
    height: 32px;
  }

  .crl__titulo {
    padding: 26px 16px 12px;
    font-size: 1rem;
  }
}

/* Quien ha pedido menos movimiento no quiere un carrusel pasando solo. El
   autoplay se apaga en el componente; esto quita además las transiciones. */
@media (prefers-reduced-motion: reduce) {
  .crl--fundido .crl__slide,
  .crl--deslizar .crl__pista {
    transition: none;
  }
}