/**
 * Citazione dei fondatori — foto a sinistra, virgolettato a destra.
 *
 * Stesso guscio della banda Cremoso — griglia a due metà, foto al vivo che
 * riempie la sua — ma su fondo crema e con il testo in inchiostro. Il markup a
 * blocchi porta colore di fondo, scala tipografica e contenuto; qui restano la
 * griglia, il riempimento della foto e i dettagli del virgolettato che i
 * supports non esprimono.
 */

.citazione {
	overflow: hidden;
}

/* Le due metà sono esattamente metà: è una banda divisa, non un contenitore
   con margini, quindi niente gutter e niente contenitore wide. */
.citazione__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 520px, 60vw, 760px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: senza
   questo i margini fra fratelli del blockGap si sommano alla riga. */
.wp-block-group.citazione__split > * + * {
	margin-block-start: 0;
}

/* --- La foto ----------------------------------------------------------
   Riempie la propria metà e viene tagliata: è un ritaglio voluto. Posizione
   assoluta perché la cella non ha un'altezza propria da cui l'immagine possa
   derivare la sua. */

.citazione__media {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--preset--color--paper-dark);
}

.citazione__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Il virgolettato --------------------------------------------------
   Nel riferimento il blocco di testo sta in una colonna a sé, con la firma
   fuori dal <blockquote> come paragrafo qualunque. Qui è il blocco citazione
   di core a fare da colonna: la firma è il suo <cite>, cioè la fonte di ciò
   che si cita, e non un paragrafo che le somiglia. Le regole azzerate sono
   quelle del foglio di core, che al virgolettato dà un filo a sinistra. */

.citazione__testo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 760px;
	margin: 0;
	padding: clamp( 48px, 5vw, 80px ) clamp( 28px, 4vw, 72px );
	border: 0;
	font-style: italic;
	font-weight: 500;
	line-height: 1.6;
}

.citazione__testo p {
	margin: 0;
}

.citazione__testo cite {
	display: block;
	margin-block-start: 32px;
	font-style: normal;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Schermi stretti -------------------------------------------------- */

@media ( max-width: 900px ) {
	/* Le due metà si impilano: la banda perde l'altezza minima e la foto
	   prende un'altezza propria, altrimenti collasserebbe a zero. */
	.citazione__split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.citazione__media {
		min-height: clamp( 320px, 60vw, 480px );
	}
}