/**
 * La lista numerata
 *
 * Parte del tema Squagliasole Solleone. Caricato da inc/assets.php.
 *
 * Una sola forma di scheda per tutto il sito - prima pagina, categorie, tag,
 * ricerca, cinema - definita nel pattern squagliasole/riga: numero, titolo con
 * il primo verso, dati, casella. Sulla prima pagina la prima riga diventa
 * l'apertura: stesso markup, un'altra griglia. Prima c'erano tre varianti di
 * scheda con tre blocchi di CSS che si sovrascrivevano, e i disallineamenti
 * nascevano li'.
 *
 * Tutte le misure di testo sono in cqi sulla lista: la riga e' per costruzione
 * una frazione della sua larghezza e non sfonda mai.
 */

.sq-lista {
	container-type: inline-size;
}

/*
 * Le righe stanno attaccate: a separarle c'e' il filo, non lo spazio.
 *
 * WordPress mette un margine sopra a ogni blocco impilato, e lo metteva anche
 * agli articoli del Query Loop: fra una riga e l'altra restavano 11 pixel di
 * giallo, e la griglia a filetti continui - che e' tutto il disegno - si
 * spezzava a ogni riga.
 */
.sq-lista .wp-block-post-template > .wp-block-post {
	margin-block: 0;
}

/* ------------------------------------------------------------------ *
 * La riga
 * ------------------------------------------------------------------ */
.sq-riga {
	display: grid;
	grid-template-columns: 9rem minmax(0, 1fr) 13rem 12rem;
	grid-template-areas: "numero testo dati media";
	align-items: stretch;
	border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

.sq-riga > * {
	margin: 0;
	min-width: 0;
}

.sq-numero {
	grid-area: numero;
	padding: 1.1rem var(--sq-bordo) 0.9rem;
	border-inline-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2rem, 4.6cqi, 3.7rem);
	line-height: 1;
	letter-spacing: -0.03em;
}

/* Nella lista basta il numero: "N." e' gia' nella colonna dei dati. */
.sq-numero__n {
	display: none;
}

.sq-riga__testo {
	grid-area: testo;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.45rem;
	padding: 1.25rem var(--sq-bordo);
}

.sq-riga__titolo {
	margin: 0;
	font-size: clamp(1.5rem, 3.2cqi, 2.6rem);
	line-height: 0.95;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.sq-riga__titolo a {
	text-decoration: none;
}

.sq-riga__titolo a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.sq-primo-verso {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-style: italic;
	font-size: clamp(1.05rem, 1.75cqi, 1.45rem);
	line-height: 1.3;
	text-wrap: pretty;
}

/* "Leggi" serve solo nell'apertura: nella lista il titolo e' gia' il link. */
.sq-riga__leggi {
	display: none;
}

/*
 * Attenzione allo scopo: queste regole valgono dentro la RIGA, non ovunque ci
 * sia un blocco dati. L'articolo ne ha uno suo, largo quanto la pagina e in
 * orizzontale, e prendendo queste si rompeva in un modo insidioso:
 * justify-content:center qui centra in verticale, perche' la direzione e'
 * colonna, ma la' la direzione e' riga e la stessa dichiarazione centrava le
 * voci in orizzontale. Una proprieta' che cambia significato con la direzione
 * non va lasciata a spasso.
 */
.sq-riga .sq-dati {
	grid-area: dati;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.45rem;
	padding: 1.25rem var(--sq-bordo);
	border-inline-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.sq-dati a {
	text-decoration: none;
}

.sq-dati a:hover {
	text-decoration: underline;
}

.sq-dati__numero,
.sq-dati__cinema {
	padding: 0.1em 0.5em;
}

.sq-dati__numero {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.sq-dati__cinema {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
}

/* Nella lista "N." sta gia' nella prima colonna in grande. */
.sq-riga .sq-dati__numero {
	display: none;
}

.sq-riga__media {
	grid-area: media;
	border-inline-start: var(--sq-filo) solid var(--wp--preset--color--contrast);
	padding: 1rem;
	--sq-rapporto: auto;
	min-height: 8rem;
}

/* La casella non deve superare la sua cella: la foto si adatta dentro. */
.sq-riga__media img {
	max-height: 7.5rem;
}

/* ------------------------------------------------------------------ *
 * L'apertura: la prima riga della prima pagina
 *
 * Stesso markup della riga. Cambia la griglia: dati e testo a sinistra, la
 * foto a destra su fondo blu per tutta l'altezza, e il primo verso diventa
 * una fascia blu con il testo bianco.
 * ------------------------------------------------------------------ */
.sq-lista--prima .wp-block-post:first-child .sq-riga {
	grid-template-columns: minmax(0, 1fr) clamp(16rem, 28cqi, 22.5rem);
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"dati media"
		"testo media";
}

.sq-lista--prima .wp-block-post:first-child .sq-numero {
	display: none;
}

.sq-lista--prima .wp-block-post:first-child .sq-dati {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem;
	padding: 2.2rem var(--sq-bordo) 0;
	border: 0;
}

.sq-lista--prima .wp-block-post:first-child .sq-dati__numero {
	display: inline-block;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga__testo {
	gap: 1.5rem;
	padding: 1.2rem var(--sq-bordo) 2.5rem;
	justify-content: flex-start;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga__titolo {
	font-size: clamp(2.6rem, 7.9cqi, 6.3rem);
	line-height: 0.86;
	letter-spacing: -0.03em;
}

.sq-lista--prima .wp-block-post:first-child .sq-primo-verso {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bianco);
	padding: 1.3rem 1.6rem;
	font-weight: 500;
	font-size: clamp(1.4rem, 3.1cqi, 2.5rem);
	line-height: 1.12;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga__leggi {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1rem, 1.7cqi, 1.4rem);
	text-transform: uppercase;
	text-decoration: none;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga__media {
	background: var(--wp--preset--color--accent);
	padding: 1.75rem;
	align-items: flex-start;
	min-height: 0;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga__media img {
	max-height: var(--sq-hero-media);
}

/*
 * Un articolo senza immagine non lascia il riquadro vuoto.
 *
 * Nella lista la cella sparisce e il testo prende il suo posto; nell'apertura
 * sparisce la colonna intera. Senza questo, l'ultimo articolo pubblicato senza
 * foto in evidenza apriva la prima pagina con un rettangolo blu di 354x546
 * pixel e dentro niente.
 */
.sq-riga:not(:has(.sq-riga__media img)) {
	grid-template-columns: 9rem minmax(0, 1fr) 13rem;
	grid-template-areas: "numero testo dati";
}

.sq-riga:not(:has(.sq-riga__media img)) .sq-riga__media {
	display: none;
}

.sq-lista--prima .wp-block-post:first-child .sq-riga:not(:has(.sq-riga__media img)) {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"dati"
		"testo";
}

/* ------------------------------------------------------------------ *
 * Telefono: la riga si stringe in due colonne
 *
 * Sopra il titolo una riga di dati in piccolo, a destra la miniatura.
 * L'apertura invece va in colonna: dati, titolo, fascia blu, foto.
 * ------------------------------------------------------------------ */
@media (max-width: 47.999rem) {
	.sq-riga {
		grid-template-columns: minmax(0, 1fr) 7rem;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"dati media"
			"testo media";
	}

	.sq-numero {
		display: none;
	}

	.sq-riga .sq-dati {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: center;
		gap: 0.6rem;
		padding: 0.9rem var(--sq-bordo) 0;
		border: 0;
		font-size: 0.72rem;
	}

	.sq-riga .sq-dati__numero {
		display: inline-block;
	}

	.sq-riga__testo {
		padding: 0.5rem var(--sq-bordo) 1rem;
		justify-content: flex-start;
	}

	.sq-riga__titolo {
		font-size: clamp(1.5rem, 7cqi, 2rem);
	}

	.sq-riga__media {
		padding: 0.5rem;
		min-height: 0;
	}

	.sq-riga__media img {
		max-height: 6rem;
	}

	.sq-riga:not(:has(.sq-riga__media img)) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"dati"
			"testo";
	}

	.sq-lista--prima .wp-block-post:first-child .sq-riga {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"dati"
			"testo"
			"media";
	}

	.sq-lista--prima .wp-block-post:first-child .sq-dati {
		padding-top: 1.4rem;
	}

	.sq-lista--prima .wp-block-post:first-child .sq-riga__testo {
		padding-block: 0.8rem 1.4rem;
		gap: 1.1rem;
	}

	.sq-lista--prima .wp-block-post:first-child .sq-riga__titolo {
		font-size: clamp(2.4rem, 13.5cqi, 3.5rem);
	}

	.sq-lista--prima .wp-block-post:first-child .sq-primo-verso {
		font-size: clamp(1.3rem, 6.9cqi, 1.75rem);
		padding: 1.1rem 1.2rem;
	}

	.sq-lista--prima .wp-block-post:first-child .sq-riga__media {
		padding: 1.25rem;
		justify-content: center;
	}
}

/* ------------------------------------------------------------------ *
 * La testa delle liste (categoria, tag, ricerca, cinema, 404)
 * ------------------------------------------------------------------ */
.sq-lista__testa {
	padding: 1.8rem var(--sq-bordo) 2rem;
	border-block-end: var(--sq-filo) solid var(--wp--preset--color--contrast);
}

.sq-lista__testa > * {
	margin: 0;
}

.sq-lista__testa > * + * {
	margin-block-start: 0.9rem;
}

.sq-lista__etichetta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.75rem, 1.15cqi, 0.95rem);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sq-lista__titolo {
	font-size: clamp(2.4rem, 9.3cqi, 7.5rem);
	line-height: 0.86;
	letter-spacing: -0.03em;
	overflow-wrap: anywhere;
	text-wrap: balance;
}

.sq-lista__descrizione {
	max-width: 46rem;
	font-size: clamp(1.05rem, 1.6cqi, 1.3rem);
	line-height: 1.5;
}

.sq-lista__descrizione > * {
	margin: 0;
}

.sq-cerca--pagina {
	max-width: 28rem;
	color: var(--wp--preset--color--contrast);
}

.sq-cerca--pagina .wp-block-search__input {
	width: 100%;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 1rem;
	text-transform: uppercase;
	padding: 0.55rem 0.9rem;
}

/* ------------------------------------------------------------------ *
 * Il piede: "1-9 di 101" e "Altri ->"
 * ------------------------------------------------------------------ */
.sq-piede-lista {
	padding: 1.4rem var(--sq-bordo) 1.8rem;
	gap: 1rem;
}

.sq-conteggio {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(0.8rem, 1.25cqi, 1rem);
	text-transform: uppercase;
}

.sq-paginazione {
	gap: 1.5rem;
}

.sq-paginazione a {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.1rem, 2.2cqi, 1.75rem);
	text-transform: uppercase;
	text-decoration: none;
}

.sq-paginazione a:hover {
	color: var(--wp--preset--color--accent);
}

.sq-lista .wp-block-query-no-results > * {
	padding: 1.8rem var(--sq-bordo);
	margin: 0;
}