/**
 * Le due fasce divise in fondo alla homepage — Blog e Fidelity.
 *
 * Sono la stessa composizione specchiata: metà testo, metà fotografia a filo
 * del bordo del viewport. Un solo impianto (`split-cta`) con un modificatore
 * per il lato, invece di due fogli quasi identici come nel riferimento: la
 * differenza fra le due è da che parte sta la foto, e il colore di fondo, che
 * arriva dal blocco.
 *
 * Come nel resto del tema, le regole che assegnano margini ai figli diretti di
 * un gruppo portano due classi: il layout di flusso di core stampa `> * + *`
 * con la specificità di una classe sola e più avanti nel documento.
 */

.split-cta {
	position: relative;
	overflow: hidden;
}

/* `align-items: stretch` è quello che fa arrivare la foto in alto e in basso
   fino al bordo della fascia: non è un'immagine dentro a una colonna, è metà
   della fascia. */
/* L'altezza della banda decide quanto della foto si vede, perché la colonna
   è larga mezza finestra e la foto la riempie in `cover`.

   Il tetto di 520px veniva dal riferimento vecchio, che in questa fascia
   metteva uno scatto quadrato: lì un taglio in orizzontale si notava appena.
   La tavola FASE2 ci mette invece una verticale (1400×1750), e con 520 di
   tetto succede questo: da 1368px in su la banda smette di crescere in
   altezza mentre la colonna continua ad allargarsi, quindi la foto viene
   ingrandita sempre di più e se ne vede una striscia sempre più sottile —
   il 43% a 1920, il 32% a 2560. Il soggetto finisce fuori dal taglio.

   41,6vw è la misura della tavola: 799px su 1920. Il tetto a 800 la tiene
   ferma da lì in su, dove il disegno non dice più niente. */
.split-cta__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 360px, 41.6vw, 800px );
}

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

/* --- Colonna del testo -------------------------------------------------- */

/* Il padding esterno non è un gutter fisso: allinea il testo alla cornice del
   sito finché c'è spazio, e sotto quella misura si riduce al gutter. È lo
   stesso calcolo del pannello di "Porta Napoli". */
.split-cta__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp( 16px, 1.8vw, 24px );
	padding-block: clamp( 90px, 11vw, 140px );
}

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

.split-cta--foto-destra .split-cta__copy {
	padding-inline: max(
			var(--wp--preset--spacing--50),
			calc(
				( 100vw - var(--wp--custom--layout--frame) ) / 2 +
					var(--wp--preset--spacing--50)
			)
		)
		clamp( 24px, 4vw, 56px );
}

.split-cta--foto-sinistra .split-cta__copy {
	padding-inline: clamp( 24px, 4vw, 56px )
		max(
			var(--wp--preset--spacing--50),
			calc(
				( 100vw - var(--wp--custom--layout--frame) ) / 2 +
					var(--wp--preset--spacing--50)
			)
		);
}

.split-cta__title {
	max-width: 14ch;
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.split-cta__title strong {
	font-weight: 700;
}

/* Nella fascia Fidelity la parte in grassetto va a capo da sola. */
.split-cta--foto-sinistra .split-cta__title strong {
	display: block;
}

.split-cta__lede {
	max-width: 28ch;
	font-weight: 700;
	line-height: 1.4;
}

.split-cta__desc {
	max-width: 42ch;
	line-height: 1.55;
	/* Un gradino sotto al bianco pieno, per staccarlo dall'occhiello senza
	   cambiare colore. */
	color: color-mix( in srgb, var(--wp--preset--color--white) 88%, transparent );
}

.split-cta__actions .wp-block-button__link {
	padding: 14px 28px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}
/* Il passaggio non e' piu' qui: questi sono bottoni «Secondario», e la
   tinta del passaggio la decide lo stile del blocco, una volta per tutte,
   in `button.css`. La regola che stava qui portava lo stesso colore del
   fondo a riposo, quindi al passaggio non cambiava piu' niente. */

/* --- Colonna della fotografia ------------------------------------------- */

/* Le due fasce portano la fotografia in due modi diversi, e la colonna li
   regge tutti e due.

   Blog la porta come immagine. Uno sfondo scritto in uno stile in linea non ha
   `srcset`: quel che c'è scritto lo scarica chiunque, un telefono da 412px come
   uno schermo da 27 pollici, e lo scarica comunque perché un fondo non si
   carica pigro. Un `img` fa tutte e due le cose da sé, e questa fascia sta in
   fondo alla pagina, dove la maggior parte di chi arriva non ci scorre mai.
   Il taglio lo fa `object-fit: cover`, che è l'equivalente di
   `background-size: cover`.

   Fidelity la porta ancora come fondo di un gruppo vuoto: `no-repeat` è
   esplicito perché il supporto di sfondo di WordPress imposta la dimensione ma
   non la ripetizione. */
.split-cta__photo {
	position: relative;
	min-height: 320px;
	background-repeat: no-repeat;
}

/* In assoluto e non con `height: 100%` perché la cella è alta in due modi
   diversi — stirata dalla griglia sul desktop, quadrata sotto i 900px — e
   l'assoluto li riempie tutti e due senza dover risolvere una percentuale
   contro un'altezza che in colonna non è definita. */
.split-cta__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Il margine sotto alla figura lo mette il blocco immagine di core, e qui la
   figura è mezza fascia: sotto non ci va niente. */
.wp-block-image.split-cta__photo {
	margin: 0;
}

/* Il taglio di ogni scatto. Con lo sfondo lo portava `backgroundPosition`
   dentro agli attributi del blocco; con un `img` sta qui, perché nel proprio
   `style` un blocco immagine di core accetta soltanto quello che sa scrivere da
   sé, e una riga in più lo farebbe risultare non valido nell'editor.

   Una classe per fotografia e non per fascia: la stessa fascia ospita scatti
   diversi — quello che sta nella pagina non è quello che inserisce il pattern —
   e il punto focale è dello scatto, non del posto dove finisce. Senza classe si
   sta al centro, che è il taglio giusto per una fotografia inquadrata al
   centro. Le misure sono spiegate per esteso nei due pattern. */
.split-cta__photo--cremina img {
	object-position: 50% 85%;
}

.split-cta__photo--banco img {
	object-position: 50% 27%;
}

.split-cta__photo--croissant img {
	object-position: 66% 56%;
}

/* Scostamento voluto dal riferimento, chiesto il 2026-08-07: la foto della
   fascia Fidelity taglia netta sul lato interno, come quella della fascia
   Blog sopra, invece di sfumare nel fondo.

   Nel riferimento le due fasce sono diverse di proposito — `.fidelity-cta-image`
   porta `mask-image: linear-gradient(to right, var(--black) 88%, transparent
   100%)` e `.blog-cta-image` non ha maschera — e la sfumatura sparisce comunque
   sotto i 900px. Per rimetterla basta riportare qui quelle due righe: */
/*
.split-cta--foto-sinistra .split-cta__photo {
	-webkit-mask-image: linear-gradient( to right, #000 88%, transparent 100% );
	mask-image: linear-gradient( to right, #000 88%, transparent 100% );
}
*/

/* --- Sotto i 900px ------------------------------------------------------ */

@media ( max-width: 900px ) {
	.split-cta__grid {
		grid-template-columns: 1fr;
		min-height: auto;
		gap: clamp( 40px, 6vw, 56px );
	}

	.split-cta--foto-destra .split-cta__copy,
	.split-cta--foto-sinistra .split-cta__copy {
		padding: clamp( 48px, 8vw, 72px ) var(--wp--preset--spacing--50) 0;
	}

	/* In colonna la foto va sempre sotto al testo, anche dove sul desktop sta
	   a sinistra: prima si legge di cosa si tratta, poi si guarda.

	   Qui c'erano anche i due `mask-image: none` che spegnevano la sfumatura
	   del desktop: ora la sfumatura non c'è più nemmeno lì, e non resta niente
	   da spegnere. Se un giorno torna, vanno rimessi anche questi. */
	.split-cta--foto-sinistra .split-cta__photo {
		order: 2;
	}

	/* Quadrato e non 16/9. Il 16/9 veniva dal riferimento, dove in queste due
	   fasce c'erano scatti quadrati e larghi: tagliarli in orizzontale non
	   toglieva niente. Le foto della tavola FASE2 sono verticali — 0,80 la
	   cremina e 0,67 il banco — e in un 16/9 `cover` ne mostra meno di un
	   terzo dell'altezza: della prima resta la sola tazzina, e spariscono la
	   mano e il cucchiaino, cioè il gesto che è il soggetto dello scatto;
	   della seconda spariscono il cornetto al pistacchio e la parigina.

	   Col quadrato ci stanno intere tutte e due, e su un telefono da 390px
	   sono 390 di altezza: una misura normale per la fotografia di una fascia.
	   Se un giorno qui tornano scatti orizzontali, questo va rifatto. */
	.split-cta__photo {
		aspect-ratio: 1 / 1;
		min-height: auto;
	}
}