/**
 * 02-layout.css — Contenedores, secciones y rejillas.
 */

.pjv-container {
	width: 100%;
	max-width: var(--pjv-container);
	margin-inline: auto;
	padding-inline: var(--pjv-gutter);
}

.pjv-container--narrow {
	max-width: var(--pjv-container-narrow);
}

.pjv-main {
	display: block;
	min-height: 50vh;
}

/* --- Cabecera de sección ------------------------------------------------ */

.pjv-section__head {
	display: grid;
	gap: var(--pjv-s3);
	max-width: 42ch;
	margin-bottom: var(--pjv-s7);
}

.pjv-section__head--center {
	max-width: 34ch;
	margin-inline: auto;
	text-align: center;
}

.pjv-section__title {
	font-size: var(--pjv-fs-section);
}

.pjv-section__lead {
	font-size: var(--pjv-fs-body-lg);
	color: var(--pjv-muted);
	max-width: 46ch;
}

.pjv-section__head--center .pjv-section__lead {
	margin-inline: auto;
}

/* --- Rejilla de 12 columnas para composiciones asimétricas -------------- */

.pjv-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--pjv-s5);
}

@media (max-width: 900px) {
	.pjv-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Sección a sangre completa dentro de un contenedor. */
.pjv-bleed {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}