/**
 * Video dei fondatori — banda blu con il testo a sinistra e il video verticale
 * a destra.
 *
 * Il markup a blocchi porta il colore di fondo, la scala tipografica e i
 * comandi del video, che sono attributi del blocco core. Qui sta il resto: la
 * trama del fondo, la griglia a due colonne — la seconda dimensionata sul
 * video, non a metà — e la cornice che ritaglia il filmato.
 */

.video-feature {
	padding-block: clamp( 64px, 8vw, 120px );
	background-image: var(--cn-media-bg-blue);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* Il margine laterale sta qui e non sulla sezione perché nel riferimento è
   dentro alla misura massima: 1280px comprensivi del margine, quindi 1168px
   di contenuto sugli schermi larghi — gli stessi del contenitore wide. */
.video-feature__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
	display: grid;
	grid-template-columns: 1fr min( 360px, 38vw );
	gap: clamp( 32px, 5vw, 80px );
	align-items: center;
}

/* 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. Servono le
   due classi per battere la regola di core. */
.wp-block-group.video-feature__inner > * {
	margin-block-start: 0;
}

.video-feature__title {
	margin: 0;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Bianco velato: non è un colore del marchio ma una gradazione del testo su
   fondo scuro, e nella tavolozza non esiste un bianco all'85%. */
.video-feature__sub {
	margin: 16px 0 0;
	font-weight: 400;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
}

/* --- La cornice del video --------------------------------------------
   Il filmato è verticale e la cornice ne impone il formato: il video riempie
   e viene ritagliato, così un file girato con proporzioni diverse non sfonda
   la griglia. */

.video-feature__frame {
	width: 100%;
	margin: 0;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 24px 48px -16px rgba( 0, 0, 0, 0.35 );
}

.video-feature__frame video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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

@media ( max-width: 900px ) {
	.video-feature__inner {
		grid-template-columns: 1fr;
		gap: clamp( 28px, 6vw, 48px );
		text-align: center;
	}

	.video-feature__frame {
		width: min( 320px, 80vw );
		margin-inline: auto;
	}
}