/**
 * La domanda in napoletano — banda rossa con il marchio e la domanda a
 * sinistra, il fregio barocco a destra.
 *
 * Il markup a blocchi porta il colore di fondo, la scala tipografica e le tre
 * immagini — marchio, mano e fregio, tutte blocchi immagine e quindi tutte
 * sostituibili dall'editor senza toccare il tema. Qui stanno la trama del fondo,
 * la griglia a due metà e la misura che ciascuna immagine ha nella sua cella.
 *
 * Mano e fregio sono decorazione e non contenuto: il testo alternativo è vuoto —
 * non assente — così restano fuori dall'albero di accessibilità pur essendo
 * immagini vere.
 */

.domanda {
	position: relative;
	overflow: hidden;
	background-image: var(--cn-media-mash-red-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.domanda__inner {
	display: grid;
	/* `minmax(0, 1fr)` e non `1fr`: la misura minima di default è il contenuto,
	   e il fregio a piena larghezza spingerebbe la sua colonna oltre la metà. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 40px, 5vw, 80px );
	align-items: center;
	min-height: clamp( 480px, 50vw, 640px );
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding: clamp( 64px, 8vw, 120px ) var(--wp--preset--spacing--50);
}

.wp-block-group.domanda__inner > * {
	margin-block-start: 0;
}

/* --- Colonna di sinistra ---------------------------------------------- */

.domanda__copy {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 40px, 5vw, 72px );
	text-align: center;
}

.wp-block-group.domanda__copy > * {
	margin-block-start: 0;
}

.domanda__logo {
	width: clamp( 200px, 22vw, 320px );
	margin: 0;
}

.domanda__logo img {
	width: 100%;
	height: auto;
}

.domanda__heading {
	margin: 0;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.01em;
}

/* La mano è l'ultimo elemento della colonna: prende il `gap` del flex come gli
   altri figli, e in più gli otto pixel che il riferimento le dà.

   Il selettore è doppio perché `.wp-block-group.domanda__copy > *` qui sopra
   azzera il margine superiore di ogni figlio: con la sola classe quegli otto
   pixel li vincerebbe la regola più specifica. */
.domanda__copy > .domanda__mano {
	width: clamp( 80px, 9vw, 140px );
	margin: 8px 0 0;
}

/* Il rapporto è dichiarato invece che lasciato all'immagine, per lo stesso
   motivo del fregio più sotto: è un SVG con il solo `viewBox`, quindi senza
   questa riga l'altezza sarebbe zero finché il file non arriva. */
.domanda__mano img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 155.76 / 206.54;
	object-fit: contain;
}

/* --- Il fregio a destra ------------------------------------------------
   È la seconda cella della griglia: un blocco immagine partecipa al layout come
   qualunque altro figlio. L'entrata in scena non ha bisogno di regole sue —
   porta `is-reveal--2` nel markup, cioè il ritardo di reveal.css. */

.domanda__fregio {
	justify-self: end;
	align-self: center;
	width: 100%;
	max-width: 620px;
	margin: 0;
}

/* Il rapporto è dichiarato invece che lasciato all'immagine: il fregio è un SVG
   con il solo `viewBox`, quindi non porta con sé misure intrinseche, e senza
   questa riga la cella collasserebbe prima che il file arrivi. */
.domanda__fregio img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 237.91 / 234.62;
	object-fit: contain;
}

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

@media ( max-width: 900px ) {
	.domanda__inner {
		grid-template-columns: 1fr;
		gap: 40px;
		min-height: 0;
	}

	/* Il fregio passa sopra al testo e si riduce a un ornamento, della misura
	   della mano che sta in fondo alla colonna. */
	.domanda__fregio {
		order: -1;
		justify-self: center;
		max-width: clamp( 80px, 22vw, 120px );
	}
}