/*
Retícula Aurora Boza: campo de 12/6/4 columnas, sin max-width. Un solo eje: todo a la izquierda.
Diseño §5.4. [LEÍDO]
*/

.a-campo { padding-inline: var(--margen); }          /* sin max-width, a propósito */

.a-rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--canal); }

@media (max-width: 1023px) {
	.a-rejilla { grid-template-columns: repeat(6, 1fr); }
	:root { --columnas: 6; }
}
@media (max-width: 767px) {
	.a-rejilla { grid-template-columns: repeat(4, 1fr); }
	:root { --columnas: 4; }
}

/* span min(n, --columnas): un span 7 no desborda una rejilla de 4. */
.a-col-1  { grid-column: span min(1,  var(--columnas)); }
.a-col-2  { grid-column: span min(2,  var(--columnas)); }
.a-col-3  { grid-column: span min(3,  var(--columnas)); }
.a-col-4  { grid-column: span min(4,  var(--columnas)); }
.a-col-5  { grid-column: span min(5,  var(--columnas)); }
.a-col-6  { grid-column: span min(6,  var(--columnas)); }
.a-col-7  { grid-column: span min(7,  var(--columnas)); }
.a-col-8  { grid-column: span min(8,  var(--columnas)); }
.a-col-9  { grid-column: span min(9,  var(--columnas)); }
.a-col-10 { grid-column: span min(10, var(--columnas)); }
.a-col-11 { grid-column: span min(11, var(--columnas)); }
.a-col-12 { grid-column: span min(12, var(--columnas)); }

.a-medida { max-width: 34em; }

/* SUELO DE LECTURA, para toda la web (Andi, 05-09). Un bloque de texto dentro de la retícula podía
   estrangularse hasta 110 px y partir el título en tres líneas, mientras su hermano tenía 355
   [MEDIDO en /galeria/paisajes-e-interiores/ a 873x393 y 768x400]. Con `min(…, 100%)` el suelo
   nunca supera el ancho disponible, así que no puede reintroducir scroll horizontal. */
.a-pieza__cartela,
.a-obra__cartela,
.a-series__info,
.a-legal__texto,
.a-exposiciones__item { min-width: min(16ch, 100%); }

/* Texto legal a dos ejes (Andi, 05-09): el título en el margen izquierdo y su texto a la derecha,
   para usar el blanco de las pantallas anchas en vez de estirar la línea. El aire de sección lo
   pone la fila; Elementor dejaba 14 px antes del título y 16 después, así que se leía pegado al
   párrafo ANTERIOR [MEDIDO a 1440 y 2560]. */
.a-legal__seccion + .a-legal__seccion { margin-block-start: var(--s-3); }
.a-legal__titulo { margin: 0; }
.a-legal__texto > :is(p, ul, ol) { margin-block: 0 var(--s-1); }
.a-legal__texto > :is(p, ul, ol):last-child { margin-block-end: 0; }

/* Más aire entre el título y su texto, sólo con las dos columnas en la misma fila (Andi, 10-09): el
   canal daba 20 px a 1440. Apiladas (≤767) el hueco sería vertical y no se toca. Va como relleno y
   no como `column-gap`: ese encogía todas las pistas y el título pasaba de 5 líneas a 7 [MEDIDO]. */
@media (min-width: 768px) {
	.a-legal__texto { padding-inline-start: var(--s-3); }
}

/* Un título con una palabra más larga que su columna metía la tinta en la del texto: 53,9 px en
   privacidad a 1440 y 38,5 en cookies a 768 [MEDIDO 10-09]. Mismo remedio que .a-exposiciones__titulo. */
.a-legal__titulo { overflow-wrap: break-word; }

/* Tope de lectura: `a-col-7` de un campo sin max-width daba 1.437 px de línea a 2560 [MEDIDO].
   El preámbulo (antes del primer h2, que legal.php suelta sin envolver) comparte el tope: medía
   1.385 px contra 748 del resto [MEDIDO 10-09]. Complianz no fija `max-width` en sus `p`.
   Las listas comparten tope y aire: sólo en `p`, el `ul` daba 800 px sobre 748 [MEDIDO 10-09]. */
.a-legal__texto > :is(p, ul, ol),
.a-legal > :is(p, ul, ol),
#cmplz-document > :is(p, ul, ol) { max-width: 44em; }

/* Y su aire: los tres avisos del preámbulo iban a 15 px y se leían corridos (Andi, 10-09). */
.a-legal > :is(p, ul, ol),
#cmplz-document > :is(p, ul, ol) { margin-block: 0 var(--s-2); }

/* Spans propios por tramo: con 6 columnas, `a-col-3`+`a-col-7` suman 10 y el texto saltaba de fila
   ya a 1023, cuando el corte del sitio es 767 [MEDIDO]. */
@media (max-width: 1023px) {
	.a-legal__titulo { grid-column: span 2; }
	.a-legal__texto { grid-column: span 4; }
}

/* A 767 los dos ocupan las cuatro columnas y caen uno bajo el otro. */
@media (max-width: 767px) {
	.a-legal__titulo { grid-column: span 4; margin-block-end: var(--s-1); }
	.a-legal__texto { grid-column: span 4; }
}