/*
 * Tarjetas con el rótulo sobre la imagen («overlay») del contenido migrado.
 *
 * El elemento `overlay` del constructor de YOOtheme: una imagen, el título
 * ENCIMA sobre un velo translúcido, y todo enlazado. El HTML de respaldo lo
 * dejó en tres pisos —foto, rótulo debajo, enlace invisible— y aquí se le
 * devuelve la forma, leyendo lo que el importador escribió en el marcador (ver
 * lib/overlays-legacy.ts).
 *
 * Todo es CSS: una imagen, una capa encima y un enlace estirado. Funciona en el
 * primer pintado, sin scripts, en el panel y dentro del iframe de UIkit.
 *
 * Lo carga la web pública (globals.css), el panel (gestion.css) y el iframe.
 */

[data-seom-overlay] {
  position: relative;
  display: block;
  /* La anchura que declaraba el constructor (`image_width`), cuando la había.
     Se centra porque en el original la tarjeta vivía en su propia columna. */
  max-width: var(--overlay-ancho, 100%);
  margin: 0 auto 1.15em;
}

[data-seom-overlay] img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

[data-seom-overlay][data-overlay-sombra='si'] {
  box-shadow: 0 14px 25px rgb(0 0 0 / 16%);
}

/**
 * La capa del rótulo.
 *
 * Cubre la imagen entera y centra su contenido. El velo va en el hijo de dentro
 * y no aquí para que el modo `caption` —27 de las 340— pueda pintarlo solo
 * detrás del texto, que es lo que hacía el original.
 */
[data-seom-overlay] > [data-seom-overlay-rotulo] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

[data-seom-overlay] > [data-seom-overlay-rotulo] > div {
  max-width: 100%;
  padding: 8px 14px;
}

/* El velo de UIkit (`uk-overlay-default`): blanco al 80%. */
[data-seom-overlay][data-overlay-velo='si'][data-overlay-modo='cover'] > [data-seom-overlay-rotulo] {
  background: rgb(255 255 255 / 80%);
}

[data-seom-overlay][data-overlay-velo='si'][data-overlay-modo='caption']
  > [data-seom-overlay-rotulo]
  > div {
  background: rgb(255 255 255 / 80%);
}

[data-seom-overlay] :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  color: #2d2e33;
}

/**
 * El enlace cubre la tarjeta entera.
 *
 * En el respaldo es un `<a>` vacío dentro de un `<p>`: el rótulo lo pintaba el
 * constructor. Va DESPUÉS del rótulo en el marcado, así que se queda por encima
 * y recoge el clic caiga donde caiga.
 */
[data-seom-overlay] a[data-seom-overlay-enlace] {
  position: absolute;
  inset: 0;
}

[data-seom-overlay]:hover img {
  opacity: 0.9;
}

[data-seom-overlay] img {
  transition: opacity 0.2s ease;
}