/*
 * Vídeos del contenido migrado.
 *
 * Los que el HTML de respaldo había perdido y lib/videos-legacy.ts devuelve a
 * su sitio: un iframe de YouTube o Vimeo, o un `<video>` propio. Siempre a todo
 * el ancho de su hueco y en 16:9, que es como los pintaba el constructor.
 *
 * Lo carga la web pública (globals.css), el panel (gestion.css) y el documento
 * aislado del contenido UIkit (/legacy/<coll>/<id>).
 */

[data-seom-video] {
  margin: 0 0 1.15em;
}

[data-seom-video] > iframe,
[data-seom-video] > video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
}

/* El aviso de cookies que tapa un iframe de terceros ocupa el mismo hueco. */
[data-seom-video] > :not(iframe):not(video) {
  aspect-ratio: 16 / 9;
}

/**
 * Una fila de vídeos y nada más: dos, tres o cuatro en paralelo.
 *
 * El número de columnas llega en `--videos`. En móvil, uno debajo de otro; a
 * partir de 640px, de dos en dos; y desde 960px (el corte `m` de UIkit, el de
 * las filas) los que dijera la maqueta.
 */
[data-seom-videos] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 0 0 1.15em;
}

[data-seom-videos] > [data-seom-video] {
  min-width: 0;
  margin: 0;
}

@media (min-width: 640px) {
  [data-seom-videos] {
    grid-template-columns: repeat(min(2, var(--videos, 2)), minmax(0, 1fr));
  }
}

@media (min-width: 960px) {
  [data-seom-videos] {
    grid-template-columns: repeat(var(--videos, 2), minmax(0, 1fr));
  }
}