/**
 * Pagina About (templates/page-about.html).
 *
 * Misure prese dal frame About a canvas 1920: titolo 80/101 largo 1350px, foto
 * di gruppo 1760x832, statement e manifesto sui 1468px centrali, griglia del
 * team a 4 colonne da 422px (foto 422x480) con il testo di apertura che ne
 * occupa due. Fra una sezione e l'altra ci sono i 180px della Home
 * (spaziatura "4XL" di theme.json): nel mock il team ne ha 247 sopra e 105
 * sotto, ma il ritmo del sito è uno solo.
 *
 * Angoli delle foto, filo sopra le etichette di sezione, inquadratura dei
 * segnaposto, statement e manifesto stanno in `brand.css`: valgono per tutte
 * le pagine. Qui restano le misure che sono solo di About.
 */

/* --- Titolo e foto di gruppo --- */

/* Il titolo va a capo dove va a capo nel mock: largo 1350px dentro la wide.
   Il nome del blocco serve alla riga: la larghezza della wide gliela dà
   WordPress con un selettore da due classi (`… > .alignwide`), e senza
   l'elemento davanti questa regola perderebbe il confronto. */
h1.wp-block-heading.dnpa-about__titolo {
	max-width: 1350px;
	margin-inline: auto;
}

/* Titolo e foto sono un blocco solo: nel design li separano 80px, non i 180
   che stanno fra una sezione e l'altra. */

.wp-block-cover.dnpa-about__foto {
	margin-block-start: 80px;
	aspect-ratio: 1760 / 832;
}

/* --- Statement --- */

/* Nel mock il titolo sta su una riga sola larga 1186px. */
.dnpa-about__statement {
	--dnpa-statement-titolo: 1186px;
}

/* --- Il nostro team --- */

/* Quattro colonne da 422px con 24px di distanza fanno la wide 1760; le righe
   sono distanti 40px. Le misure stanno qui e non nel blocco perché la griglia
   cambia forma sugli schermi stretti. */
.wp-block-group.dnpa-team__griglia {
	gap: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--30 );
	align-items: start;
}

/* Il testo di apertura occupa le prime due caselle della griglia, come nel
   design: le schede del team partono dalla terza. Va a capo a 708px, dentro
   le due caselle (868px) ma senza riempirle, com'è nel mock. */
.dnpa-team__intro {
	grid-column: span 2;
	max-width: 708px;
}

/* --- Scheda membro --- */

/* La misura sta sulla scheda, non sulla singola foto: una scheda aggiunta dal
   cliente col pattern "Membro del team" entra in griglia da sola. */
.dnpa-membro__foto.wp-block-cover {
	aspect-ratio: 422 / 480;
}

.dnpa-membro__nome {
	font-weight: 500;
	line-height: 1.35;
}

.dnpa-membro__ruolo {
	font-weight: 300;
	line-height: 1.35;
	margin-block-end: 0;
}

/* --- Responsive: le colonne si impilano, le proporzioni restano --- */

/* Sotto i 1024px il team passa a due colonne (con quattro le foto diventano
   francobolli) e il testo di apertura prende tutta la riga. */
@media ( max-width: 1023px ) {
	.wp-block-group.dnpa-team__griglia {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.dnpa-team__intro {
		grid-column: 1 / -1;
		max-width: none;
	}
}

/* Alla soglia con cui WordPress impila le colonne (e il manifesto diventa una
   colonna sola, vedi `brand.css`) la foto di gruppo cambia proporzione. */
@media ( max-width: 781px ) {
	.wp-block-cover.dnpa-about__foto {
		margin-block-start: var( --wp--preset--spacing--40 );
		aspect-ratio: 4 / 3;
	}
}

/* Sul telefono si impila tutto, team compreso (SPEC: "colonne che si
   impilano"): è la soglia con cui anche l'header passa alla sua forma corta.
   La pagina si allunga parecchio — dieci ritratti uno sotto l'altro — ma le
   schede che avanzano le toglie il cliente. */
@media ( max-width: 599px ) {
	.wp-block-group.dnpa-team__griglia {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* --- Foto segnaposto --- */

/* Una foto per fessura; l'inquadratura comune sta in `brand.css`. I due
   ritratti si alternano sulle schede come nel mock, e ogni regola si spegne da
   sola appena il cliente carica la sua foto dal blocco copertina. */

.dnpa-foto--about:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/about.jpg" );
}

.dnpa-foto--membro-1:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/about-membro-1.jpg" );
}

.dnpa-foto--membro-2:not( :has( .wp-block-cover__image-background ) ) {
	background-image: url( "../img/about-membro-2.jpg" );
}