/**
 * Espresso CTA — palco rosso con anello rotante.
 *
 * Il markup a blocchi porta struttura, contenuto, colori e scala tipografica
 * (tutti da preset), e il fondo arriva dal preset di gradiente `palco-rosso`.
 * Qui resta lo strato decorativo che i supports non esprimono: la griglia
 * 45/55, la riserva di spazio in basso, l'anello che sfonda la colonna e i
 * chicchi in volo.
 */

/* Il fondo si estende oltre la sezione: `overflow: visible` perché i chicchi
   escono dal bordo inferiore. Il padding-bottom non è spazio vuoto, è la
   riserva su cui la card di "Porta Napoli ovunque vuoi" sale con un margine
   negativo — finché quella sezione non esiste resta rosso in attesa.
   Valori strutturali legati a quell'incastro, non token di scala. */
/* L'anello di testo gira, e il riquadro che racchiude un quadrato ruotato è
   più largo del quadrato — fino a √2 volte. Con l'anello cresciuto quei
   quattro angoli vuoti spingevano la pagina a 406px su uno schermo da 390 e
   comparivano scroll laterale. Si tagliano qui, sul bordo della sezione, dove
   non c'è nulla da vedere: il cerchio di testo è inscritto nel quadrato e non
   arriva mai agli angoli.

   `clip` e non `hidden` di proposito: `hidden` su un asse trasforma l'altro
   in `auto`, e i chicchi in volo devono continuare a sbordare in basso sopra
   la sezione successiva. */
.espresso-cta {
	padding-block: clamp( 56px, 8vw, 110px ) clamp( 226px, 32.8vw, 421px );
	overflow: clip visible;
}

.espresso-cta__stage {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	align-items: center;
	gap: clamp( 32px, 5vw, 64px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: i
   margini fra fratelli che core stampa per il blockGap si sommano alla riga e
   abbassano la colonna destra, disallineando l'anello dal titolo. */
.wp-block-group.espresso-cta__stage > * + * {
	margin-block-start: 0;
}

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

/* Due classi per battere la regola di gap che il layout flex del blocco
   stampa inline: il riferimento vuole un gap fluido, il blockGap è un passo
   fisso della scala. */
.wp-block-group.espresso-cta__copy {
	gap: clamp( 20px, 2.5vw, 32px );
}

.espresso-cta__heading {
	margin: 0;
	font-weight: 300;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

/* `espresso.` è un <strong>: formato core, quindi il titolo resta
   modificabile nell'editor senza perdere lo stacco di peso. */
.espresso-cta__heading strong {
	font-weight: 700;
}

.espresso-cta__lede {
	max-width: 38ch;
	line-height: 1.55;
}

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

.espresso-cta__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	transition: background-color 0.2s ease;
}

/* Tazzina decorativa: pseudo-elemento, così non entra nell'albero di
   accessibilità e non va descritta. */
.espresso-cta__cta .wp-block-button__link::before {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background-image: var(--cn-media-cup-pin);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/* 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. */

/* --- Anello e tazzina ------------------------------------------------ */

.espresso-cta__media {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: clamp( 420px, 46vw, 660px );
}

/* L'anello è più largo della sua colonna e sfonda di proposito: resta
   centrato e la sezione non lo taglia. */
.espresso-cta__ring {
	position: relative;
	width: clamp( 460px, 52vw, 780px );
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

/* L'anello di testo è un blocco a sé (`caffe-napoli/espresso-ring`), con il
   suo CSS caricato da block.json: le sue regole non stanno più qui. */

/* --- Chicchi in volo -------------------------------------------------- */

/* z-index alto: devono passare sopra la sezione successiva, non sotto.

   Il 28% del riferimento è misurato sulla cornice di pagina — 1280px, gutter
   incluso — mentre qui il contenitore è la scatola `alignwide`, che è la cornice
   meno i due gutter. Riportare la percentuale su quella misura vale 25px al
   desktop, ed è la stessa distinzione che il pannello di "Porta Napoli" fa con
   `--wp--custom--layout--frame`. Il coefficiente è 1 − 2 × 0,28: così il conto
   torna a ogni larghezza, non solo dove la cornice è piena. */
.espresso-cta__beans {
	position: absolute;
	left: calc( 28% - 0.44 * var(--wp--preset--spacing--50) );
	bottom: -8%;
	z-index: 20;
	width: clamp( 140px, 14vw, 220px );
	aspect-ratio: 1;
	pointer-events: none;
}

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

@media ( max-width: 900px ) {
	/* Meno riserva in basso, ma non zero: i chicchi scendono sotto la tazzina
	   e hanno bisogno di rosso su cui appoggiare. */
	.espresso-cta {
		padding-block: clamp( 48px, 10vw, 72px ) clamp( 112px, 24vw, 150px );
	}

	.espresso-cta__stage {
		grid-template-columns: 1fr;
		gap: clamp( 32px, 8vw, 48px );
	}

	.espresso-cta__media {
		min-height: 280px;
	}

	/* Era fissa a 250px, e su un telefono da 390 restava piccola: la colonna
	   che la ospita ne misura 335, quindi avanzavano 85px inutilizzati. Qui la
	   misura segue la larghezza dello schermo e si ferma prima di toccare i
	   bordi. Cresce tutto insieme — la tazzina è il fondo di questo elemento e
	   l'anello di testo sta a `inset: 0` dentro di esso. */
	.espresso-cta__ring {
		width: clamp( 250px, 86vw, 340px );
	}

	.espresso-cta__beans {
		left: 50%;
		top: 100%;
		bottom: auto;
		width: clamp( 80px, 20vw, 120px );
		transform: translate( -50%, 12px );
	}
}

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