/**
 * Stili del blocco `foiano/hero`.
 */
.fl-hero {
	position: relative;
	border-radius: var( --fl-hero-radius, 14px );
	/*
	 * Niente CSS var qui per il bordo: il bordo usa il supporto nativo del
	 * blocco (supports.border in block.json — colore/stile/spessore, come
	 * foiano/countdown) e viene applicato da WordPress come stile inline
	 * sullo stesso wrapper — che non ha overflow impostato, quindi il bordo
	 * non viene tagliato rispetto al border-radius. .fl-hero__inner invece
	 * ha `overflow: hidden` (per ritagliare l'immagine di sfondo) e va
	 * tenuto separato dal bordo per non rischiare che venga tagliato o
	 * mostri un angolo squadrato sotto quello arrotondato.
	 */
	/*
	 * Quasi tutto lo schermo (85%), lasciando intravedere la sezione
	 * successiva come invito a scorrere. `svh` = altezza della viewport con
	 * la barra degli indirizzi mobile visibile: con `vh` su iOS/Android
	 * l'hero sarebbe più alto dello schermo reale e "salterebbe" quando la
	 * barra si ritira. Il minimo di 420px tiene l'hero leggibile su telefoni
	 * in orizzontale, dove l'85% dell'altezza sarebbe troppo poco.
	 */
	min-height: max( 420px, 85vh );
	min-height: max( 420px, 85svh );
	display: flex;
}

/*
 * Su desktop un po' più basso: lo schermo è largo, quindi all'85% l'hero
 * risultava sproporzionato. Stesso breakpoint 782px della visibilità
 * mobile/desktop (src/blocks/shared/style-shared.css).
 */
@media (min-width: 782px) {
	.fl-hero {
		min-height: max( 420px, 72vh );
		min-height: max( 420px, 72svh );
	}
}

.fl-hero__inner {
	position: relative;
	overflow: hidden;
	border-radius: var( --fl-hero-radius, 14px );
	width: 100%;
	display: flex;
}

.fl-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var( --fl-hero-bg-position, center center );
}

.fl-hero__overlay {
	position: absolute;
	inset: 0;
	background: var( --fl-hero-overlay-color, #203668 );
	opacity: var( --fl-hero-overlay-opacity, 0.4 );
}

.fl-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--30, 12px );
	/*
	 * Niente padding fisso qui: il padding è quello impostato dall'utente
	 * tramite il supporto nativo del blocco (block.json → supports.spacing.
	 * padding), applicato via inline style da render.php direttamente su
	 * questo elemento (non sul wrapper esterno, per non far rimpicciolire
	 * anche l'immagine di sfondo a tutta larghezza). Il valore di default
	 * (quando l'utente non ha ancora impostato nulla nell'Inspector) è
	 * definito in render.php.
	 */
	width: 100%;
	color: var( --text-on-primary, #fff );
}

.fl-hero--h-left .fl-hero__content { align-items: flex-start; text-align: left; }
.fl-hero--h-center .fl-hero__content { align-items: center; text-align: center; }
.fl-hero--h-right .fl-hero__content { align-items: flex-end; text-align: right; }

.fl-hero--v-top .fl-hero__content { justify-content: flex-start; }
.fl-hero--v-center .fl-hero__content { justify-content: center; }
.fl-hero--v-bottom .fl-hero__content { justify-content: flex-end; }

.fl-hero__heading {
	font-family: var( --wp--preset--font-family--mono, monospace );
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-weight: 900;
	line-height: 1.05;
	font-size: clamp( 36px, 5vw, 64px );
	margin: 0;
}

.fl-hero__claim {
	font-family: var( --wp--preset--font-family--body, serif );
	font-weight: 400;
	line-height: 1.55;
	font-size: 19px;
	margin: 0;
	max-width: 60ch;
}

.fl-hero__date {
	font-family: var( --wp--preset--font-family--mono, monospace );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 14px;
	margin: 0;
}