/*
Acoplamiento: depende de aurora-widgets-obra y se encola después, así que gana los empates de
especificidad sobre sus reglas viejas de .a-series__item/.a-series__cabecera (no se toca ese archivo).
Rejilla de 2 columnas con orden por filas (decisión de Andi, 05-09): manda el orden 01,02…11 sobre
la cascada de alturas independiente. La columna derecha baja un escalón fijo (Andi, 05-09: «que
aparezca la 01 a la izquierda y a la derecha la 02, pero no al mismo nivel») — el blanco bajo la foto
más corta pasa de coste aceptado a intención de la maqueta.
*/

.a-series {
	display: block;
}

/* Escritorio y tablet: dos hijos directos (foto + info), no un envoltorio a todo el ancho como antes.
   Así el hueco que deja una foto más estrecha que su columna nunca fue parte del enlace: cada hijo
   mide solo lo que ocupa su propio contenido, no la pista de rejilla entera. */
.a-series__item {
	display: flex;
	flex-direction: column; /* el título bajo la foto también en móvil, como en escritorio (Andi, 05-09) */
	gap: var(--s-2);
	padding-block: var(--s-4);
	border-top: var(--filete) solid var(--linea);
	text-decoration: none;
	color: inherit;
	pointer-events: none; /* el hueco entre foto e info no navega, solo sus hijos (misma idea que .a-pieza) */
}
.a-series__item > * { pointer-events: auto; }
.a-series__item:first-child { border-top: none; }

/* Móvil: los tres en columna sobre el MISMO eje izquierdo (Andi, 05-09). En fila con
   `space-between` cada nombre arrancaba en un sitio distinto y los largos llegaban al filo
   —«Paisajes e interiores» a 31 px del borde, «Tauromaquia y folclore» partido en dos a 320—
   [MEDIDO]. Es la misma composición que ya usa el tramo de 768 en adelante. */
.a-series__info {
	display: flex;
	flex-wrap: nowrap;
	align-items: baseline;
	/* Hueco corto entre el numero y el nombre: con `--s-2` los nombres largos partian en dos
	   lineas y con este caben (Andi, 05-09). */
	gap: var(--s-1);
	min-width: 0;
}
/* El número a la izquierda del nombre, no encima (Andi, 05-09). `nowrap`: con salto, los cuatro
   nombres largos se caían a la línea de abajo y perdían el número de al lado [MEDIDO a 320]. */
.a-series__numero { flex: 0 0 auto; }
.a-series__nombre { flex: 1 1 auto; min-width: 0; }
.a-series__info > * { min-width: 0; }
/* Los tres textos suben de abajo arriba como el resto del sitio (Andi, 05-09); `.a-revelar-texto`
   recorta con `overflow: clip` y ya llega blockificado por ser hijo flex de `.a-series__info`. */
.a-series__nombre {
	min-width: 0;
	overflow-wrap: break-word; /* red de seguridad; la pista ya crece para no necesitarla [MEDIDO] */
}

@media (min-width: 768px) {
	/* Una serie por fila sobre la rejilla de 12, como la sala de obras: la foto ocupa 4 columnas y
	   se turna entre tres carriles (Andi, 05-09). Con dos columnas de media pantalla las portadas
	   salian enormes y el texto se quedaba sin ancho.
	   Los tres carriles: pegada a la guarda izquierda, pegada a la derecha, y una de cada tres
	   separada de las dos. El ciclo de 3 no cuadra con ninguna simetria: eso es lo que da el ritmo. */
	.a-series {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		column-gap: var(--canal);
	}

	.a-series__item {
		display: block;
		grid-column: 1 / -1;
		padding-block: 0;
		margin-block-end: var(--s-5);
		border-top: none;
	}
	/* El carril lo marca la FOTO. El nombre solo comparte su borde: con el mismo encaje se partia
	   con guion teniendo 526 px libres al lado [MEDIDO a 915 en `/galeria/`, «Paisajes e
	   interiores»].
	   Acoplamiento: `.elementor-widget:not(…):not(…) figure{margin:0}` es (0,4,1) y gana a dos
	   clases; con la clase triplicada son (0,5,0) [MEDIDO: sin ella las fotos salian a 1.385 px]. */
	/* El MISMO tamaño en portada y en galeria (Andi, 09-09). Antes la portada iba al 33,4% por ser
	   seccion de paso: 443 px contra 556, y nadie ve las dos a la vez, asi que la jerarquia no se
	   percibia [MEDIDO 09-09]. */
	.a-series__item:nth-child(3n+1) .a-series__foto.a-series__foto.a-series__foto { margin-inline-end: calc(58.4% + var(--canal)); }
	.a-series__item:nth-child(3n+2) .a-series__foto.a-series__foto.a-series__foto { margin-inline-start: calc(58.4% + var(--canal)); }
	.a-series__item:nth-child(3n)   .a-series__foto.a-series__foto.a-series__foto { margin-inline: calc(29.2% + var(--canal)); }

	/* `max-content` pide lo que ocupa el nombre entero; el margen automatico lo pega al borde de su
	   foto y lo deja crecer hacia el lado libre. */
	.a-series__info { width: max-content; max-width: 100%; }
	.a-series__item:nth-child(3n+2) .a-series__info { margin-inline-start: auto; }
	/* El del carril central comparte el borde IZQUIERDO de su foto, como los otros dos, y crece
	   hacia el hueco de la derecha. Centrado quedaba a otro eje que el resto. */
	.a-series__item:nth-child(3n)   .a-series__info { margin-inline-start: calc(29.2% + var(--canal)); }

	.a-series__foto { min-width: 0; }
	.a-series__info {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-1);
		margin-block-start: var(--s-2);
		text-align: left;
	}
}

/* Dos columnas a todo ancho. Con tres, el texto de la cartela se cortaba por encima de 1024 px
   (Andi, 05-09): la pista de 5fr se queda sin sitio para el nombre de la serie. */