/* ═════════════════════════════════════════════════════════════════════════════
   PÁGINA DE PROYECTO

   El cuerpo del proyecto es contenido de bloques, así que estas reglas hacen el
   trabajo que en el sitio original hacían atributos style escritos a mano
   dentro del HTML.
   ═════════════════════════════════════════════════════════════════════════════ */

/* La columna de texto se queda en 800 píxeles y centrada, como en el diseño.
   Así quien escriba no tiene que acordarse de envolver nada: escribe párrafos y
   salen donde deben. */
.project_body {
	width: 100%;
	max-width: 800px;
	margin-inline: auto;
}

/* Solo los párrafos sueltos del cuerpo. Antes la regla alcanzaba a cualquier
   párrafo de dentro —el de una rejilla, el resumen de un listado— y los centraba
   aunque su bloque dijera otra cosa. */
.project_body > p {
	text-align: center;
	/* text-align-last hace falta además de text-align: la última línea de un
	   párrafo justificado no la centra el primero. .text-size-regular la fija a
	   la izquierda, y sin esto la última línea de cada párrafo se descolgaría. */
	text-align-last: center;
	margin-bottom: 2rem;
}

.project_body > p:last-child {
	margin-bottom: 0;
}

/* El resto de bloques (rejilla, listado, imagen, grupo…) separados igual que
   los párrafos. Sin esto, cualquier bloque sin margen propio quedaba pegado a
   su vecino. El carrusel y el vídeo llevan su propia separación de pantalla
   completa y no se tocan. :where() deja la regla sin peso, para que el margen
   que alguien ponga a un bloque desde el editor siga mandando. */
.project_body > :where(:not(p, .tatc-carousel, .video-section, .alignfull)) {
	margin-block: 2rem;
}

.project_body > :where(:not(p, .tatc-carousel, .video-section, .alignfull):first-child) {
	margin-top: 0;
}

.project_body > :where(:not(p, .tatc-carousel, .video-section, .alignfull):last-child) {
	margin-bottom: 0;
}

/* Ancho de los bloques. El texto (párrafos, títulos, listas, citas) se lee en
   la columna de 800 px; los bloques de estructura —rejilla, listado, imagen,
   galería, columnas, grupo— salen de ella hasta 1200 px, centrados. Antes todo
   quedaba en 800 y una rejilla de tres columnas se veía como dos columnas
   estrechas. «Ancho amplio» hace lo mismo con cualquier bloque. El ancho se
   cambia por proyecto en Diseño → Ancho de los bloques. */
.project_body {
	--_bloques: min(var(--tatc-blocks-width, 1200px), 100vw - 1.5rem);
}

.project_body > :where(:not(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, .wp-block-quote, .wp-block-pullquote, .alignfull, .tatc-carousel, .video-section, .tatc-contact-form)),
.project_body > .alignwide {
	width: var(--_bloques);
	max-width: none;
	margin-left: calc(50% - var(--_bloques) / 2);
	margin-right: calc(50% - var(--_bloques) / 2);
}

/* El carrusel y la sección de vídeo ocupan el ancho completo de la ventana
   aunque vivan dentro de esa columna de 800 píxeles. Es el truco de siempre:
   ancho igual a la ventana y un margen negativo de media ventana menos medio
   contenedor. Se aplica a la clase que marca WordPress cuando un bloque está en
   "ancho completo", de modo que sirve para cualquier bloque futuro sin tener
   que escribir una regla nueva para cada uno. */
.project_body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}