/**
 * Pagina Progetti (templates/page-progetti.html).
 *
 * Misure prese dal frame Progetti a canvas 1920: titolo e paragrafo centrati
 * sui 1172 centrali, poi l'elenco largo come la wide (1752) con gli angoli
 * arrotondati una volta sola, attorno a tutte le schede. Ogni scheda è una
 * foto 1752x670 con il velo scuro che sale dal basso; il testo sta in fondo,
 * largo 867, a 80px dal bordo e a 88px dal fondo, e si sposta a destra nelle
 * schede pari come nel mock.
 *
 * Le foto delle schede arrivano dal back office (immagine in evidenza del
 * progetto), non dal tema: qui non ci sono segnaposto.
 */

/* --- Elenco --- */

/* Nel mock le schede si toccano e gli angoli arrotondati sono quelli
   dell'elenco intero: il taglio lo fa il contenitore, non le schede. */
.dnpa-progetti__lista {
	overflow: hidden;
	border-radius: var( --wp--custom--foto-radius );
}

/* --- Scheda --- */

/* Le copertine di WordPress partono da 430px: qui l'altezza è quella del
   mock, tenuta in proporzione mentre la pagina si stringe. Il testo va in
   basso a sinistra: le "posizioni del contenuto" di WordPress farebbero lo
   stesso, ma imporrebbero anche una larghezza e un margine loro, e le schede
   pari devono poter andare a destra. */
.wp-block-cover.dnpa-progetto {
	min-height: 0;
	padding: 0 80px 88px;
	align-items: flex-end;
	justify-content: flex-start;
	aspect-ratio: 1752 / 670;
}

/* Il testo sta su metà scheda: 867px sui 1592 dentro i bordi. */
.wp-block-cover.dnpa-progetto > .wp-block-cover__inner-container {
	width: min( 867px, 55% );
}

/* Seconda scheda a destra, quarta a destra, e così via: l'alternanza la fa il
   posto della scheda nell'elenco, così vale anche per i progetti che il
   cliente aggiungerà. Nel mock il testo della scheda pari sborda dalla scheda
   di 84px (tanto che la descrizione è tagliata e l'anno non si vede): qui si
   ferma a 80px dal bordo, gli stessi delle dispari. */
.dnpa-progetti__lista > li:nth-child( even ) > .dnpa-progetto > .wp-block-cover__inner-container {
	margin-inline-start: auto;
}

/* Il nome è una pillola bianca appoggiata sulla foto. */
.dnpa-progetto__nome {
	display: inline-block;
	margin: 0;
	padding: 4px 16px;
	border-radius: 8px;
	background-color: var( --wp--preset--color--bianco );
	color: var( --wp--preset--color--bruno );
}

/* --- Località e anno --- */

/* Il filo sopra la riga è quello del mock: bianco a metà velo. */
.dnpa-progetto__meta {
	padding-top: 8px;
	border-top: 1px solid var( --wp--custom--surface--hairline );
	gap: var( --wp--preset--spacing--30 );
}

.dnpa-progetto__meta p {
	margin: 0;
	line-height: 1.4;
}

.dnpa-progetto__luogo {
	text-transform: uppercase;
}

/* Un progetto senza descrizione, senza località o senza anno non lascia righe
   vuote: il campo che manca sparisce con la sua riga. */
.dnpa-progetto p:empty {
	display: none;
}

.dnpa-progetto__meta:not( :has( p:not( :empty ) ) ) {
	display: none;
}

/* --- Responsive: la scheda si alza, il testo si allarga --- */

/* Sotto i 1024px gli 80px di bordo mangiano metà scheda. */
@media ( max-width: 1023px ) {
	.wp-block-cover.dnpa-progetto {
		padding: 0 var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--40 );
	}

	.wp-block-cover.dnpa-progetto > .wp-block-cover__inner-container {
		width: min( 867px, 70% );
	}
}

/* Sul tablet la scheda diventa più alta e il testo prende tutta la riga: a
   metà larghezza andrebbe a capo a ogni parola. L'alternanza sinistra/destra
   qui non ha più senso e si spegne. */
@media ( max-width: 781px ) {
	.wp-block-cover.dnpa-progetto {
		aspect-ratio: 4 / 3;
	}

	.wp-block-cover.dnpa-progetto > .wp-block-cover__inner-container,
	.dnpa-progetti__lista > li:nth-child( even ) > .dnpa-progetto > .wp-block-cover__inner-container {
		width: auto;
		margin-inline-start: 0;
	}
}

/* Sul telefono la foto è verticale, come tutto il resto del sito. */
@media ( max-width: 599px ) {
	.wp-block-cover.dnpa-progetto {
		padding: 0 var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--30 );
		aspect-ratio: 3 / 4;
	}
}