/**
 * Tratamiento común del contenido editorial: lo comparten la página de
 * proyecto y la de estudio, y lo hereda cualquier página que envuelva
 * sus bloques en <article class="content">.
 *
 * Hay dos niveles, el artículo y cada bloque, y los dos se comportan
 * igual: columna centrada. Que el bloque sea también flex no es un
 * capricho — es lo que centra los títulos girados dentro de él, porque
 * con `width: fit-content` una caja de bloque normal los dejaría a la
 * izquierda.
 *
 * Se centra con flex y no con text-align porque text-align sólo alinea
 * contenido *en línea* dentro de su caja: no mueve cajas de bloque, y en
 * los títulos girados ni siquiera actuaría en el eje horizontal, ya que
 * su eje de línea pasa a ser el vertical.
 */
.content,
.block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content {
  text-align: center;
  margin-top: var(--space-iterare);
}

/**
 * Ritmo vertical.
 *
 * Se declara siempre sobre el segundo elemento de cada pareja: de ahí el
 * reset y el `* + *`. Así entre dos vecinos hay un único espacio —nunca
 * la suma de dos márgenes— pero, a diferencia de un gap en el
 * contenedor, se puede afinar según qué dos cosas se encuentren.
 *
 * Por defecto, un iterare. Vale igual entre bloques que entre los
 * elementos de dentro de uno, así que un título siempre queda a un
 * iterare de lo anterior, esté donde esté.
 */
.content > *,
.block > * {
  margin: 0;
}

.content > * + *,
.block > * + * {
  margin-top: var(--space-iterare);
}

/**
 * La excepción son los párrafos seguidos *dentro de un mismo bloque*:
 * son el mismo discurso y les basta un salto de párrafo. Entre bloques
 * distintos no aplica, porque ahí los vecinos son las cajas .block y no
 * los párrafos, y esa pareja vuelve a caer en la regla de arriba.
 */
.block > p + p {
  margin-top: var(--lh-base);
}

/**
 * Cada bloque ocupa el ancho del artículo. Sin esto la caja se ceñiría a
 * su contenido —es un elemento flex— y una galería no tendría contra qué
 * repartir el ancho de sus imágenes.
 */
.block {
  width: 100%;
}

/**
 * El texto se lee en una columna estrecha; las imágenes y las galerías
 * siguen a todo el ancho. Como el artículo centra a sus hijos, basta con
 * limitar el ancho para que la columna quede centrada.
 */
.block[data-type="text"] {
  max-width: var(--max-width);
}

/**
 * Galería: las imágenes en fila, separadas por un iterare.
 *
 * No hay tope de fila. Cada imagen mide lo que mediría sola —se lo pone
 * images.css según su orientación— y sólo cuando las dos no caben juntas
 * empiezan a encoger. Como el ancho de partida es el suyo, dos
 * orientaciones distintas no miden lo mismo: la horizontal ocupa más que
 * la vertical, igual que si fueran bloques sueltos.
 *
 * La lista dentro de la figura sólo la produce el bloque de galería; el
 * de imagen suelta cuelga el <img> directamente de la figura, así que no
 * le afecta.
 */
.block figure ul {
  display: flex;
  justify-content: center;
  gap: var(--space-iterare);
  width: 100%;
}

/**
 * `flex: 0 1 auto` es lo que hace que el ancho de partida sea el de la
 * imagen y no una fracción de la fila, y que encoger sea el caso
 * excepcional y no el normal.
 *
 * El `min-width: 0` no es decorativo: sin él, el mínimo de un elemento
 * flex es el de su contenido, y el de una imagen es su ancho intrínseco.
 * O sea que la fila se negaría a encoger y se saldría de la ventana.
 */
.block figure li {
  flex: 0 1 auto;
  min-width: 0;
}

/**
 * En móvil la galería se apila. Dos fotografías repartiéndose una
 * pantalla estrecha se quedan en nada —a 500 px de ventana median 193 px
 * cada una, frente a 453 la misma suelta— y dejan de leerse como
 * fotografías.
 *
 * Apiladas no hace falta decir nada más: cada imagen vuelve a topar en
 * su ancho de orientación, el gap pasa a ser vertical y mide un iterare,
 * igual que la separación entre bloques.
 *
 * El 767 no puede salir de una variable: `var()` no se resuelve dentro
 * de una condición de @media. Y está repetido en site/snippets/image.php,
 * porque el `sizes` del <img> tiene que anunciar el mismo cambio: si se
 * mueve aquí, hay que moverlo allí.
 */
@media (max-width: 767px) {
  .block figure ul {
    flex-direction: column;
    align-items: center;
  }
}

.block figure img {
  display: block;
  width: 100%;
  height: auto;
}

/**
 * Los títulos van tumbados 90°, igual que en el listado de obra: el h1
 * de la página y los h2 que salen de los bloques de texto.
 *
 * `width: fit-content` mantiene la caja ceñida al texto girado, para que
 * el centrado sea el de la palabra y no el de una caja a todo lo ancho.
 *
 * El rotate(180deg) es lo que decide hacia dónde miran las letras: sin
 * él vertical-rl las tumba hacia la derecha y el texto se lee de arriba
 * a abajo; con él, hacia la izquierda y de abajo a arriba. Va aquí y en
 * works.css, que son los dos sitios donde hay títulos tumbados, y los
 * dos tienen que girar igual.
 *
 * No afecta al ritmo vertical: el transform gira la caja sobre su propio
 * centro sin sacarla del flujo, así que el margen de arriba sigue siendo
 * el mismo.
 */
.content h1,
.content h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: fit-content;
}