/**
 * Page hero — banda fotografica con titolo su due righe.
 *
 * Sezione d'apertura delle pagine interne. Il markup a blocchi porta
 * struttura, colori e scala tipografica (tutti da preset) e anche l'immagine,
 * che è un attributo del blocco (background support) e non una regola di
 * questo file. Qui resta solo ciò che i supports non esprimono: l'altezza
 * fluida della banda, la colonna del titolo al 40% e l'entrata in scena.
 */

.page-hero {
	display: flex;
	align-items: center;
	min-height: clamp( 300px, 48vw, 500px );
	overflow: hidden;
}

/* Nelle pagine composte a pattern la banda sta dentro al contenuto, dove il
   passo fra blocchi è già zero. In un modello che la mette al primo livello —
   `page-testo` — se la prende invece il passo di core fra blocchi di primo
   livello (`:where(.wp-site-blocks) > *`, 24px), e fra l'header rosso e la
   banda resta una riga di carta. Stessa ragione, e stessa riga, di
   `.post-hero`. */
.wp-site-blocks > .page-hero {
	margin-block-start: 0;
}

/* Il contenitore wide fa da griglia di riferimento: il titolo misura il 40%
   di questa larghezza, non del viewport, così resta sulla porzione scura
   dello scatto al crescere dello schermo. */
.page-hero__inner {
	width: 100%;
}

.page-hero__title {
	width: 40%;
	min-width: 280px;
	margin: 0;
	font-weight: 700;
	/* Nel riferimento le due righe del titolo sono figlie di una colonna flex:
	   la distanza fra loro è l'interlinea 1,05 della prima riga più un
	   `gap: 0.1em`, e quell'`em` è di nuovo la scala dell'h1. Qui le righe le
	   separa un <br>, che non è un elemento e un gap non lo può ricevere:
	   l'unica leva è l'interlinea, e per contenere entrambe le quote va
	   dichiarata come lunghezza invece che come rapporto. */
	line-height: calc(
		1.05 * clamp( 32px, 5vw, 60px ) + 0.1 * clamp( 56px, 9vw, 148px )
	);
	/* Il riferimento scrive `-0.01em`, ma su un h1 che non porta la scala delle
	   sue righe: vale `clamp(56px, 9vw, 148px)`, e da lì la spaziatura si
	   eredita come lunghezza già risolta — 1,26px a 1400, non 0,6. Qui l'h1 ha
	   la misura della riga, quindi lo stesso `em` darebbe metà del tracking e
	   la parola verrebbe più larga del 2%. La curva si dichiara per intero. */
	letter-spacing: calc( -0.01 * clamp( 56px, 9vw, 148px ) );
	animation: page-hero-in 0.9s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.15s both;
}

/* La prima riga è <em>: un formato core, quindi il titolo resta modificabile
   nell'editor senza perdere il contrasto fra corsivo leggero e peso pieno.
   Il 300 è quello del riferimento: la faccia variabile del corsivo è
   dichiarata 400 700, quindi il browser lo rende a 400. */
.page-hero__title em {
	font-style: italic;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--page-title-lead);
}

/* --- Velatura ---------------------------------------------------------
   Modificatore per gli scatti troppo movimentati perché il titolo bianco ci
   stia sopra da solo — la maiolica del Menù è il caso limite. Sfuma da
   sinistra, dove sta il titolo, e lascia scoperta la parte destra della foto. */

.page-hero--scrim {
	position: relative;
}

.page-hero--scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to right,
		rgba( 0, 0, 0, 0.55 ) 0%,
		rgba( 0, 0, 0, 0.35 ) 45%,
		rgba( 0, 0, 0, 0.1 ) 100%
	);
}

.page-hero--scrim .page-hero__inner {
	position: relative;
	z-index: 1;
}

@keyframes page-hero-in {
	from {
		opacity: 0;
		transform: translateX( -32px );
	}
}

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

@media ( max-width: 900px ) {
	.page-hero {
		min-height: 300px;
		/* Il taglio desktop è ancorato a sinistra e su schermo stretto
		   mostrerebbe solo il fondo scuro: va ricentrato per far entrare le
		   mani. Serve !important perché background-position arriva come stile
		   inline iniettato a runtime dal background support del blocco. */
		background-position: 50% 50% !important;
	}

	.page-hero__title {
		width: 100%;
	}

	/* Il titolo occupa tutta la larghezza, quindi la sfumatura non può più
	   schiarire a destra come sul desktop: va scurita e portata più in là,
	   altrimenti le ultime parole finiscono sulla parte accesa dello scatto. */
	.page-hero--scrim::after {
		background-image: linear-gradient(
			to right,
			rgba( 0, 0, 0, 0.72 ) 0%,
			rgba( 0, 0, 0, 0.5 ) 55%,
			rgba( 0, 0, 0, 0.34 ) 100%
		);
	}
}

/* --- Banda ridotta -----------------------------------------------------
   Modificatore per le pagine di solo testo — le legali e il modello «Pagina
   di testo»: stessa forma, un terzo in meno di altezza. Una pagina di sole
   clausole non merita i 500px della Loyalty, e l'occhio deve arrivare al testo
   subito.

   Sta in fondo al foglio, dopo la media query, e non più in alto: l'altezza
   generale della banda torna a 300px sotto i 900px con la stessa specificità
   di questa, quindi a decidere è l'ordine. Prima queste due regole stavano in
   legale.css, che si accoda dopo, e vincevano per lo stesso motivo. */

.page-hero--breve {
	min-height: clamp( 180px, 22vw, 280px );
}

/* Due classi, quindi vince sulla regola generale del titolo. Lì l'interlinea è
   una lunghezza calcolata per due righe — serve a distanziarle — e su un titolo
   di una riga sola diventa spazio vuoto sopra e sotto. E la colonna al 40%
   qui non serve: non c'è nessuna fotografia da lasciare scoperta a destra. */
.page-hero--breve .page-hero__title {
	width: auto;
	line-height: 1.1;
}

@media ( prefers-reduced-motion: reduce ) {
	.page-hero__title {
		animation: none;
	}
}