/**
 * Bloque de vídeo, igual para Vimeo y para YouTube: lo que varía entre
 * proveedores es la dirección del iframe, no su caja.
 *
 * El ancho es el de una fotografía horizontal, para que el vídeo comparta
 * borde con ellas y con la columna de texto. Va como `max-width` y no
 * como `width`: la figura es un elemento flex en un contenedor en
 * columna, o sea que el ancho es su eje transversal y ahí no encoge, así
 * que un `width: 920px` fijo se salía de las pantallas más estrechas que
 * eso. Es lo mismo que hace images.css con las fotografías.
 *
 * El `overflow: clip` es para el vídeo tumbado de más abajo: el iframe
 * girado mide exactamente la caja, pero al redondear a píxel puede
 * asomar una fracción por los lados. Declarar la figura contenedor de
 * tamaño no lo recorta —`container-type: size` contiene el tamaño, no la
 * pintura—, así que hay que decirlo aparte.
 */
.block[data-type="video"] figure {
  width: 100%;
  max-width: var(--width-landscape);
  aspect-ratio: 16 / 9;
  overflow: clip;
}

/**
 * `pointer-events: none` es lo que iguala a los dos proveedores. El vídeo
 * de este bloque es una imagen en movimiento: no tiene controles, arranca
 * solo y se repite. En Vimeo eso lo garantiza `background=1`, que deja al
 * reproductor inerte; en YouTube no existe equivalente y `controls=0`
 * sólo esconde la barra, de modo que un clic encima seguiría pausando el
 * vídeo sin forma visible de reanudarlo. Cortando los eventos se comporta
 * como el de Vimeo.
 */
.block[data-type="video"] iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/**
 * El vídeo tumbado, cuando el editor marca la casilla del bloque.
 *
 * La caja pasa a 9/16 y el iframe se gira 90°: el fotograma horizontal se
 * ve entero pero de lado, llenando el alto de una pantalla estrecha en
 * vez de quedarse en una franja. No es un recorte —no se pierde nada del
 * encuadre—, es el mismo vídeo puesto de pie.
 *
 * El iframe se mide en unidades de contenedor, `100cqh` de ancho y
 * `100cqw` de alto, porque girar intercambia los ejes: tan ancho como
 * alta es la figura, tan alto como ancha. Dicho así no hay ninguna
 * proporción repetida, y si mañana el vídeo dejara de ser 16/9 bastaría
 * con cambiar los dos `aspect-ratio` de este fichero.
 *
 * Para que esas unidades existan la figura tiene que declararse
 * contenedor de tamaño. Puede hacerlo porque su alto no depende de lo que
 * lleve dentro: sale del `aspect-ratio`.
 *
 * Gira en negativo, no en positivo, para que el teléfono haya que
 * tumbarlo hacia el mismo lado que para leer un título: los h1 y h2 de
 * content.css salen tumbados de abajo arriba, y un vídeo girado al revés
 * obligaría a torcer la cabeza en sentido contrario dentro de la misma
 * página. Es el signo, nada más: cambiarlo invierte el giro.
 *
 * El 767 es el mismo corte de móvil que content.css —donde la galería
 * pasa a apilarse— y por el mismo motivo no puede salir de una variable:
 * `var()` no se resuelve dentro de la condición de un @media.
 */
@media (max-width: 767px) {
  .block[data-type="video"] .video-rotate {
    aspect-ratio: 9 / 16;
    container-type: size;
    position: relative;
  }

  .block[data-type="video"] .video-rotate iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}