/**
 * Taste CTA — banda crema, vassoio di dolci a filo del bordo sinistro.
 *
 * Il markup a blocchi porta struttura, contenuto e colori (tutti da preset);
 * qui resta solo ciò che i supports non esprimono: la griglia asimmetrica,
 * lo sconfinamento dell'immagine oltre il bordo e l'allineamento della colonna
 * di testo al contenitore wide.
 */

/* Niente width: 100%. Nel riferimento la sezione sta nel body e quel 100%
   è innocuo; qui è alignfull dentro un contenitore con root padding, e il
   core la porta a tutta larghezza con margini negativi (-40px per lato).
   Una larghezza dichiarata blocca la scatola a quella del contenitore: il
   margine sinistro la sposta comunque a filo, ma a destra restano scoperti
   gli 80px del padding, che si vedono come una striscia di carta. */
.taste-cta {
	/* L'immagine esce dal bordo sinistro con un margine negativo: senza questo
	   il documento guadagnerebbe scroll orizzontale. */
	overflow: hidden;
}

.taste-cta__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: stretch;
	min-height: clamp( 380px, 42vw, 560px );
}

/* La banda crema resta a tutta larghezza, la composizione dentro no: oltre la
   tela le due colonne si fermano e si centrano. Senza, il vassoio di dolci
   continuava ad andarsene verso il bordo sinistro dello schermo mentre il
   testo restava agganciato alla cornice del sito, e in mezzo cresceva una
   distesa di crema vuota.

   Vale per la sola banda chiara. Nella variante ribaltata la foto è tagliata
   dal bordo di proposito, e fermarla lascerebbe scoperta una striscia di
   bordeaux fra la fotografia e il bordo dello schermo. */
.taste-cta:not( .taste-cta--flip ) .taste-cta__grid {
	max-width: var(--wp--custom--layout--canvas);
	margin-inline: auto;
}

/* La griglia la dichiariamo qui, ma per il core il gruppo resta un layout
   "flow": mette 24px di margine su ogni figlio dopo il primo. In griglia
   quel margine non separa niente, abbassa solo la colonna di testo rispetto
   all'immagine. */
.taste-cta__grid > * {
	margin-block-start: 0;
}

/* --- Composizione di dolci ------------------------------------------- */

/* La composizione nuova non sconfina più oltre il bordo: nella tavola sta
   tutta dentro alla banda, appoggiata a 16px dal bordo sinistro su 1920 di
   tavola — poco meno dell'uno per cento — e centrata in verticale. Il margine
   negativo che serviva al vassoio di prima qui taglierebbe la graffa. */
.taste-cta__media {
	display: flex;
	align-items: center;
	margin: 0;
	padding-inline-start: clamp( 8px, 0.85vw, 16px );
	width: 100%;
	min-height: 320px;
	align-self: stretch;
}

/* La misura è quella della tavola: 874 su 1920 di larghezza, cioè 45,5vw.
   Il `min` la fa scendere con la colonna sugli schermi in cui la colonna è
   più stretta di così, invece di farla debordare. L'altezza segue il file,
   quindi la composizione non si deforma mai.

   La frazione si prende sulla tela del disegno e non sulla finestra: la
   tavola è impaginata su 1920, e oltre quella misura non dice più niente.
   Con `45.5vw` nudo, su un monitor da 3124 la composizione diventava larga
   1421px — più del file — e da sola alzava la banda da 560 a 800, che è il
   difetto visto sugli schermi molto larghi. Sotto i 1920 il conto è identico
   a prima, perché lì la tela *è* la finestra. */
.taste-cta__media img {
	display: block;
	width: min( 100%, calc( 0.455 * var(--wp--custom--layout--canvas) ) );
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: left center;
}

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

/* Il padding di destra ricostruisce il bordo del contenitore wide: il testo
   si allinea al resto della pagina anche se la sezione è a tutta larghezza. */
/* Le distanze interne sono quelle del riferimento e stanno qui, non nel
   blockGap del blocco: il riferimento parte da un gap uniforme e poi aggiunge
   uno scarto prima del testo e uno prima del bottone. Il blockGap sa fare
   solo la prima metà — sostituisce il margine invece di sommarcisi — e con
   quello soltanto la colonna si accorciava di una quarantina di pixel. */
.taste-cta__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp( 14px, 1.6vw, 22px );
	padding-block: clamp( 70px, 9vw, 120px );
	/* La riserva si misura sulla tela e non sulla finestra perché la griglia
	   di questa banda si ferma lì: con `100vw` su uno schermo da 3124 valeva
	   978px dentro a una colonna larga 937, e il testo usciva dalla propria
	   cella. Fino a 1920 il conto non cambia. */
	padding-inline: clamp( 24px, 4vw, 56px )
		max(
			var(--wp--preset--spacing--50),
			calc(
				( var(--wp--custom--layout--canvas) - var(--wp--custom--layout--frame) ) / 2 +
					var(--wp--preset--spacing--50)
			)
		);
}

.taste-cta__eyebrow {
	font-style: italic;
	font-weight: 500;
}

.taste-cta__title {
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* Le due metà forti del titolo sono <strong>: un formato core, quindi il
   titolo resta modificabile nell'editor senza perdere il contrasto di peso. */
.taste-cta__title strong {
	font-weight: 800;
}

/* Il gap della colonna vale per tutti; testo e bottone ne prendono un altro
   po', come nel riferimento. Sono margini, quindi si sommano al gap. */
.taste-cta__copy > * {
	margin-block-start: 0;
}

.taste-cta__desc {
	max-width: 44ch;
	margin-block-start: clamp( 6px, 0.8vw, 10px );
	font-weight: 600;
	line-height: 1.5;
}

.taste-cta__cta {
	margin-block-start: clamp( 14px, 1.6vw, 24px );
}

/* --- Bottone --------------------------------------------------------- */

.taste-cta__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	transition: background-color 0.2s ease;
}

/* Pin decorativo: pseudo-elemento, così non finisce nell'albero di
   accessibilità e non va descritto. */
.taste-cta__cta .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-image: var(--cn-media-pin-coffee-inverse);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.taste-cta__cta .wp-block-button__link:hover,
.taste-cta__cta .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--burgundy-dark) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.taste-cta__cta .wp-block-button__link {
		transition: none;
	}

	
}

/* --- Variante ribaltata e scura: A Napoli All Day -------------------- */

/* Stesso componente della sezione crema, specchiato: il testo passa a
   sinistra e la foto a destra, dove sconfina oltre il bordo. */
.taste-cta--flip .taste-cta__grid {
	grid-template-columns: 1fr 1.05fr;
}

/* Qui la foto riempie la cella e viene tagliata dal bordo: niente riserva a
   sinistra e niente contain, il taglio è voluto.

   La cella fa da riquadro alla foto, e la foto ci sta dentro staccata dal
   flusso. Non è una finezza: con l'immagine nel flusso, `height: 100%` non
   si risolve — la cella non ha un'altezza definita, la sta ancora
   calcolando — quindi il browser ripiega sull'altezza naturale del file e
   *quella* diventa l'altezza della riga. La banda smetteva così di valere
   l'altezza dichiarata qui sotto e cresceva con la larghezza della colonna:
   922px a 1440 invece di 880, 2000 su un monitor da 3124. Fuori dal flusso
   l'immagine non ha più voce in capitolo, e l'altezza torna a dirla la
   riga. */
.taste-cta--flip .taste-cta__media {
	position: relative;
	display: block;
	overflow: hidden;
	padding-inline-start: 0;
	min-height: clamp( 560px, 62vw, 880px );
}

/* Il ritaglio verticale è quello della tavola: la finestra visibile prende il
   62% dell'altezza dello scatto, e il suo centro cade al 61% — la foto è più
   alta della banda e va tenuta un filo sotto la metà, altrimenti sparisce il
   piatto in basso. */
.taste-cta--flip .taste-cta__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 61%;
}

/* Specchio del padding della sezione crema: il lato che guarda il bordo è
   quello sinistro, ed è lì che il testo si allinea al contenitore wide. */
.taste-cta--flip .taste-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 );
}

/* Il pannello ha un fondo proprio, più acceso del bordeaux della banda: una
   luce che scende dall'alto. Le fermate stanno in theme.json come quelle
   dell'hero, non come letterali qui. */
.taste-cta--dark .taste-cta__copy {
	background-image:
		radial-gradient( 120% 90% at 50% -10%,
			var(--wp--custom--all-day--glow) 0%,
			var(--wp--custom--all-day--glow-mid) 28%,
			var(--wp--custom--all-day--glow-deep) 58%,
			var(--wp--custom--all-day--deep) 100% ),
		linear-gradient( 135deg, rgba( 0, 0, 0, 0.18 ) 0%, rgba( 0, 0, 0, 0 ) 45% );
	background-blend-mode: normal, multiply;
	/* L'altezza della banda la detta la foto, e il testo ci si centra dentro.
	   Nel riferimento lo stesso risultato arriva da un padding di 260px che
	   però non entra nel calcolo della riga: riscritto come padding qui la
	   banda cresceva a 920px invece degli 880 della foto. Dichiarare la
	   stessa altezza minima della foto dice la cosa che conta davvero, senza
	   numeri da indovinare. Il padding resta come respiro minimo, per quando
	   il testo non ci sta. */
	min-height: clamp( 560px, 62vw, 880px );
	padding-block: clamp( 48px, 6vw, 80px );
}

/* --- I tre momenti della giornata ------------------------------------ */

/* Anche qui le distanze sono quelle del riferimento: l'elenco stacca dal
   titolo più di quanto le voci stacchino fra loro, e il margine si somma al
   gap della colonna. Con il solo blockGap i due valori collassavano in uno. */
.all-day {
	display: flex;
	flex-direction: column;
	gap: clamp( 20px, 2.2vw, 32px );
	margin-block-start: clamp( 20px, 2.6vw, 36px );
}

.all-day > * {
	margin-block-start: 0;
}

.all-day__item {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: clamp( 14px, 1.4vw, 22px );
	align-items: start;
}

/* Stesso motivo della griglia principale: il gruppo è "flow" per il core e
   i suoi 24px sfaserebbero titolo e testo dentro le celle. */
.all-day__item > * {
	margin-block-start: 0;
}

/* L'icona tiene entrambe le righe della prima colonna, così titolo e testo
   stanno nella seconda senza bisogno di un contenitore in più. */
.all-day__icon {
	grid-row: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
}

/* I file sono monocromatici scuri e qui servono bianchi sul bordeaux. Il
   filtro è esatto, non un'approssimazione: brightness(0) li porta a nero
   pieno e invert(1) al bianco. */
.all-day__icon img {
	width: 36px;
	height: 36px;
	filter: brightness( 0 ) invert( 1 );
}

.all-day__title {
	font-weight: 700;
	line-height: 1.2;
}

.all-day__desc {
	max-width: 44ch;
	/* Sei pixel, come nel riferimento: nessun passo della scala li copre e
	   il gradino sotto (8px) allargava ogni voce di due pixel. */
	margin-block-start: 6px;
	line-height: 1.55;
	/* Un gradino sotto il bianco pieno dei titoli, senza uscire dal preset. */
	color: color-mix( in srgb, var(--wp--preset--color--white) 88%, transparent );
}

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

@media ( max-width: 900px ) {
	/* Il selettore della variante ribaltata va ripetuto qui, non basta quello
	   nudo: `.taste-cta--flip .taste-cta__grid` pesa più di `.taste-cta__grid`
	   e continuerebbe a imporre le due colonne anche a 390px, schiacciando la
	   colonna di testo in una striscia. Vale per ogni regola che una variante
	   ridefinisce — sotto, il padding della colonna. */
	.taste-cta__grid,
	.taste-cta--flip .taste-cta__grid {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: clamp( 24px, 5vw, 40px );
	}

	.taste-cta__media {
		min-height: 0;
		padding-inline: var(--wp--preset--spacing--50);
	}

	/* A colonna singola la composizione ha tutta la larghezza: i 45,5vw del
	   desktop sono una frazione della tavola, non della colonna, e qui la
	   ridurrebbero a un francobollo. */
	.taste-cta__media img {
		width: 100%;
		object-position: center;
	}

	/* A colonna singola il titolo ha tutta la larghezza e il riferimento gli
	   dà una scala propria, più ripida: un preset non può cambiare clamp al
	   variare del breakpoint, quindi vive qui. */
	/* `!important` obbligato: le classi di corpo che core genera dai preset —
	   qui `has-section-title-font-size` — sono dichiarate `!important`, e senza
	   pareggiare questa scala da breakpoint non arriverebbe mai a valere. Si
	   vedeva: a 600px il titolo restava a 28px invece dei 38 del riferimento. */
	.taste-cta__title {
		font-size: clamp( 24px, 6.5vw, 38px ) !important;
	}

	/* Come le altre pastiglie: sotto i 900px l'interlinea ereditata sbilancia
	   le lettere dentro al padding e alza il bottone. */
	.taste-cta__cta .wp-block-button__link {
		line-height: 1;
	}

	/* Su schermo stretto le tre voci si distanziano di più: il riferimento
	   cambia proprio il passo dell'elenco, con una curva che sale al posto di
	   quella che scende. Senza, sotto gli 800px la colonna si accorcia di
	   sedici pixel rispetto al riferimento. */
	.all-day {
		gap: clamp( 20px, 4vw, 28px );
	}

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

	/* A colonna singola la foto della variante scura sta sotto il testo e
	   deve toccarlo: un gap lascerebbe scoperta una striscia di bordeaux. */
	.taste-cta--flip .taste-cta__grid {
		gap: 0;
	}

	.taste-cta--flip .taste-cta__media {
		min-height: 0;
		aspect-ratio: 4 / 3;
		padding-inline: 0;
	}

	/* A colonna singola la foto non detta più niente: il pannello torna alto
	   quanto il suo contenuto. */
	.taste-cta--dark .taste-cta__copy {
		min-height: 0;
		padding-block: clamp( 40px, 9vw, 64px );
	}
}