/*
 * Galerías del contenido migrado.
 *
 * El elemento `gallery` del constructor de YOOtheme: tarjetas con foto y rótulo
 * en tres o cuatro columnas, y a veces pestañas para filtrarlas. El HTML de
 * respaldo lo dejó como una lista de viñetas; aquí se le devuelve la forma,
 * leyendo lo que el importador escribió en el marcador (ver lib/galerias-legacy).
 *
 * Todo es CSS, **incluidas las pestañas**. El filtro son radios y una regla por
 * pestaña: eso lo hace funcionar en el primer pintado, sin scripts, dentro del
 * panel y —lo que aquí importaba— dentro del iframe del contenido migrado, que
 * es otro documento donde React no monta nada.
 *
 * Lo carga la web pública (globals.css), el panel (gestion.css) y el iframe.
 */

[data-seom-galeria] {
  /* Los mismos márgenes que tenía la `<ul>` a la que sustituye
     (`.legacy ul` en globals.css), para no mover nada de sitio. */
  display: block;
  margin: 0 0 1.15em;

  --gal-hueco: 30px;
}

[data-seom-galeria][data-galeria-separacion='pequena'] {
  --gal-hueco: 16px;
}

[data-seom-galeria][data-galeria-separacion='grande'] {
  --gal-hueco: 50px;
}

[data-seom-galeria] ul {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  --gal-cols: 1;
  gap: var(--gal-hueco);
  /* La `<ul>` deja de ser una lista: ni viñetas, ni sangría, ni el margen que
     `.legacy ul` le pone, que aquí lo lleva el contenedor. */
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-seom-galeria] li {
  position: relative;
  margin: 0;
  /* Sin esto, un rótulo con una palabra larga estira su columna y descuadra la
     galería entera. */
  min-width: 0;
}

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

[data-seom-galeria] h1,
[data-seom-galeria] h2,
[data-seom-galeria] h3,
[data-seom-galeria] h4 {
  margin: 0.7em 0 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

/**
 * El rótulo, cuando el original no lo enseñaba (`show_title: false`).
 *
 * Se esconde en vez de borrarlo: el respaldo lo trae siempre, y en las galerías
 * fotográficas dice cualquier cosa —los 65 rótulos de SEOM2025 dicen «1
 * bienvenidos»—, pero el día que alguien lo quiera, sigue ahí.
 */
[data-seom-galeria][data-galeria-titulos='no'] :is(h1, h2, h3, h4) {
  display: none;
}

/**
 * El enlace cubre la tarjeta entera.
 *
 * En el respaldo es un `<a>` vacío: el rótulo lo pintaba el constructor. Estirarlo
 * es lo que convierte la tarjeta en algo que se puede pulsar, que es como se
 * comportaba en seom.org.
 */
[data-seom-galeria] a[data-seom-galeria-enlace] {
  position: absolute;
  inset: 0;
}

[data-seom-galeria] li:hover img {
  opacity: 0.85;
}

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

/* ------------------------------------------------------------------ pestañas
 *
 * Radios escondidos y sus etiquetas como pestañas. El corte de abajo esconde
 * las tarjetas que no llevan la etiqueta elegida.
 */

[data-seom-galeria-pestanas] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 0 0 26px;
}

[data-seom-galeria-pestanas] label {
  cursor: pointer;
}

[data-seom-galeria-pestanas] input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

[data-seom-galeria-pestanas] span {
  display: inline-block;
  padding: 5px 0 9px;
  border-bottom: 1px solid transparent;
  color: var(--color-muted, #999);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.2;
}

[data-seom-galeria-pestanas] label:hover span {
  color: var(--color-primary, #007078);
}

[data-seom-galeria-pestanas] input:checked + span {
  border-bottom-color: var(--color-primary, #007078);
  color: #2d2e33;
}

/* El recuadro del teclado, que sin esto se pierde con el radio escondido. */
[data-seom-galeria-pestanas] input:focus-visible + span {
  outline: 2px solid var(--color-primary, #007078);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------- filtro
 *
 * Una regla por pestaña, del 1 al 12 (MAXIMO_ETIQUETAS en lib/galerias-legacy).
 * Se escriben a mano porque el CSS no sabe comparar el valor de un atributo con
 * el de otro: no hay forma de decir «esconde lo que no lleve la etiqueta que
 * está marcada». Por eso las etiquetas viajan al HTML como números.
 *
 * La pestaña «Todos» es el valor 0 y no tiene regla: no esconde nada.
 */

[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='1']:checked)
  li:not([data-galeria-etiquetas~='1']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='2']:checked)
  li:not([data-galeria-etiquetas~='2']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='3']:checked)
  li:not([data-galeria-etiquetas~='3']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='4']:checked)
  li:not([data-galeria-etiquetas~='4']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='5']:checked)
  li:not([data-galeria-etiquetas~='5']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='6']:checked)
  li:not([data-galeria-etiquetas~='6']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='7']:checked)
  li:not([data-galeria-etiquetas~='7']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='8']:checked)
  li:not([data-galeria-etiquetas~='8']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='9']:checked)
  li:not([data-galeria-etiquetas~='9']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='10']:checked)
  li:not([data-galeria-etiquetas~='10']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='11']:checked)
  li:not([data-galeria-etiquetas~='11']),
[data-seom-galeria]:has([data-seom-galeria-pestanas] input[value='12']:checked)
  li:not([data-galeria-etiquetas~='12']) {
  display: none;
}

/* ------------------------------------------------------------------ columnas
 *
 * Una regla por número de columnas, como en la rejilla y por lo mismo: `attr()`
 * en `grid-template-columns` no lo entiende todavía ningún navegador. Los
 * cortes son los de UIkit, que es donde se decidieron estas maquetas:
 * `m` = 960px y `l` = 1200px.
 */

[data-seom-galeria][data-galeria-columnas='1'] ul {
  grid-template-columns: repeat(1, minmax(0, 1fr));
  --gal-cols: 1;
}
[data-seom-galeria][data-galeria-columnas='2'] ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  --gal-cols: 2;
}
[data-seom-galeria][data-galeria-columnas='3'] ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  --gal-cols: 3;
}
[data-seom-galeria][data-galeria-columnas='4'] ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  --gal-cols: 4;
}
[data-seom-galeria][data-galeria-columnas='5'] ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  --gal-cols: 5;
}
[data-seom-galeria][data-galeria-columnas='6'] ul {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  --gal-cols: 6;
}

@media (min-width: 700px) {
  /* Un corte propio, que no está en UIkit: en una tableta, una columna de fotos
     a todo lo ancho se lee peor que dos. */
  [data-seom-galeria][data-galeria-columnas-media='3'] ul,
  [data-seom-galeria][data-galeria-columnas-media='4'] ul,
  [data-seom-galeria][data-galeria-columnas-media='5'] ul,
  [data-seom-galeria][data-galeria-columnas-media='6'] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  --gal-cols: 2;
  }
}

@media (min-width: 960px) {
  [data-seom-galeria][data-galeria-columnas-media='1'] ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  --gal-cols: 1;
  }
  [data-seom-galeria][data-galeria-columnas-media='2'] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  --gal-cols: 2;
  }
  [data-seom-galeria][data-galeria-columnas-media='3'] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  --gal-cols: 3;
  }
  [data-seom-galeria][data-galeria-columnas-media='4'] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  --gal-cols: 4;
  }
  [data-seom-galeria][data-galeria-columnas-media='5'] ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  --gal-cols: 5;
  }
  [data-seom-galeria][data-galeria-columnas-media='6'] ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  --gal-cols: 6;
  }
}

@media (min-width: 1200px) {
  [data-seom-galeria][data-galeria-columnas-grande='1'] ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  --gal-cols: 1;
  }
  [data-seom-galeria][data-galeria-columnas-grande='2'] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  --gal-cols: 2;
  }
  [data-seom-galeria][data-galeria-columnas-grande='3'] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  --gal-cols: 3;
  }
  [data-seom-galeria][data-galeria-columnas-grande='4'] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  --gal-cols: 4;
  }
  [data-seom-galeria][data-galeria-columnas-grande='5'] ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  --gal-cols: 5;
  }
  [data-seom-galeria][data-galeria-columnas-grande='6'] ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  --gal-cols: 6;
  }
}

/* ------------------------------------------------------- galerías de fotos
 *
 * Las «masivas de fotos»: todas sus tarjetas enlazan a una imagen (ver
 * lib/visor-galeria, que usa el mismo criterio para abrir el visor). Van en
 * cascada: cada foto con su proporción, sin recortar y sin huecos debajo de
 * las verticales. Son columnas de CSS, así que funciona sin scripts y dentro
 * del iframe; el orden va por columnas (de arriba abajo), el del visor es el
 * del álbum.
 *
 * Una galería con alguna tarjeta que lleva a una página (un menú con fotos)
 * se queda en rejilla.
 */

[data-seom-galeria]:has(a[data-seom-galeria-enlace]):not(
    :has(
      a[data-seom-galeria-enlace]:not(
          [href$='.jpg' i],
          [href$='.jpeg' i],
          [href$='.png' i],
          [href$='.gif' i],
          [href$='.webp' i],
          [href$='.avif' i]
        )
    )
  )
  ul {
  display: block;
  column-count: var(--gal-cols, 1);
  column-gap: var(--gal-hueco);
}

[data-seom-galeria]:has(a[data-seom-galeria-enlace]):not(
    :has(
      a[data-seom-galeria-enlace]:not(
          [href$='.jpg' i],
          [href$='.jpeg' i],
          [href$='.png' i],
          [href$='.gif' i],
          [href$='.webp' i],
          [href$='.avif' i]
        )
    )
  )
  li {
  break-inside: avoid;
  margin: 0 0 var(--gal-hueco);
  overflow: hidden;
  border-radius: 2px;
  cursor: zoom-in;
}