/**
 * Prenota torte / Catering eventi — invito a due pannelli.
 *
 * Un solo componente per due sezioni: foto che tocca il bordo del viewport da
 * un lato, pannello di testo dall'altro. La variante `--flip` lo specchia e
 * `--catering` ne cambia il fondo.
 *
 * Il markup a blocchi porta struttura, contenuto e colori (tutti da preset);
 * qui resta ciò che i supports non esprimono: la griglia a metà, i fondi
 * sfumati dei pannelli e l'allineamento del testo al contenitore wide.
 */

/* Niente `width: 100%` sulla sezione. Come nella taste-cta: qui è alignfull
   dentro un contenitore con root padding, e il core la porta a tutta larghezza
   con margini negativi. Una larghezza dichiarata la bloccherebbe a quella del
   contenitore e a destra resterebbe scoperta una striscia di carta. */

.prenota-cta__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 360px, 38vw, 520px );
}

/* 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, sfasa solo le due colonne. */
.prenota-cta__grid > * {
	margin-block-start: 0;
}

/* --- Foto ------------------------------------------------------------- */

/* Nel riferimento è un background in `cover` su un div vuoto; qui è un <img>
   vero, così resta sostituibile dal pannello media e la foto è contenuto e non
   decorazione di CSS. L'equivalente di `cover` è object-fit. */
.prenota-cta__media {
	position: relative;
	margin: 0;
	width: 100%;
	min-height: 320px;
	align-self: stretch;
	overflow: hidden;
}

/* La foto è in posizione assoluta, e non è un vezzo: da figlia normale con
   `height: 100%` la percentuale si risolverebbe sull'altezza della cella, che
   a sua volta dipende dal contenuto — un giro chiuso, che il browser scioglie
   usando le proporzioni native dell'immagine. Una foto verticale da 1245×1600
   portava così la riga a 889px invece dei ~520 del riferimento, allungando
   anche il pannello di testo accanto. Fuori dal flusso, l'altezza della riga
   la decidono la colonna di testo e il minimo della griglia, come deve. */
.prenota-cta__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* --- Pannello di testo ------------------------------------------------ */

/* Il padding del lato esterno 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: il riferimento parte da un gap uniforme e poi aggiunge uno
   scarto prima del lede e uno prima del bottone, e il blockGap sostituisce i
   margini invece di sommarcisi. */
.prenota-cta__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp( 14px, 1.6vw, 22px );
	padding-block: clamp( 60px, 8vw, 110px );
	padding-inline: clamp( 28px, 4vw, 64px )
		max(
			var(--wp--preset--spacing--50),
			calc( ( 100vw - var(--wp--custom--layout--frame) ) / 2 + var(--wp--preset--spacing--50) )
		);
	/* Il motivo di maioliche sta sopra la sfumatura: è un SVG con ampie zone
	   trasparenti, quindi il gradiente si vede attraverso. Le fermate stanno in
	   theme.json come quelle dell'hero, non come letterali qui. */
	background-image:
		var(--cn-media-bg-prenota-torte),
		linear-gradient( 125deg,
			var(--wp--custom--prenota--glow) 0%,
			var(--wp--custom--prenota--glow-mid) 35%,
			var(--wp--custom--prenota--glow-deep) 70%,
			var(--wp--custom--prenota--deep) 100% );
	background-repeat: no-repeat, no-repeat;
	background-position: center, center;
	background-size: cover, cover;
}

.prenota-cta__copy > * {
	margin-block-start: 0;
}

.prenota-cta__title {
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

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

/* Lede e bottone prendono un po' di respiro in più del gap della colonna: sono
   margini, quindi si sommano al gap. */
.prenota-cta__lede {
	max-width: 34ch;
	margin-block-start: clamp( 6px, 0.8vw, 10px );
	font-weight: 700;
	line-height: 1.3;
}

.prenota-cta__desc {
	max-width: 46ch;
	font-weight: 500;
	line-height: 1.5;
	/* Un gradino sotto il bianco pieno del titolo, senza uscire dal preset. */
	color: color-mix( in srgb, var(--wp--preset--color--white) 92%, transparent );
}

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

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

.prenota-cta__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	letter-spacing: 0.01em;
	/* Un filo di luce che stacca la pastiglia crema dal fondo scuro. */
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	transition: background-color 0.2s ease;
}

/* Tazzina decorativa: pseudo-elemento, così non finisce nell'albero di
   accessibilità e non va descritta. */
.prenota-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. */

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

	
}

/* --- Variante specchiata: testo a sinistra, foto a destra -------------- */

/* Nel markup il testo viene già prima della foto, quindi non serve riordinare
   niente: basta spostare il padding largo sul lato che ora guarda il bordo. */
.prenota-cta--flip .prenota-cta__copy {
	padding-inline:
		max(
			var(--wp--preset--spacing--50),
			calc( ( 100vw - var(--wp--custom--layout--frame) ) / 2 + var(--wp--preset--spacing--50) )
		)
		clamp( 28px, 4vw, 64px );
}

/* --- Catering: stesso pannello, fondo bordeaux ------------------------ */

/* Niente maioliche qui: al posto del motivo, una luce rosa in alto a destra e
   un'ombra in basso a sinistra. Le due fermate piene stanno in theme.json; il
   velo nero resta un letterale perché è ombra, non colore di marca. */
.prenota-cta--catering .prenota-cta__copy {
	background-image:
		radial-gradient( 70% 60% at 80% 12%,
			color-mix( in srgb, var(--wp--custom--catering--haze) 22%, transparent ) 0%,
			transparent 60% ),
		radial-gradient( 70% 90% at 0% 100%,
			rgba( 0, 0, 0, 0.4 ) 0%,
			rgba( 0, 0, 0, 0 ) 55% ),
		linear-gradient( 125deg,
			var(--wp--custom--catering--glow) 0%,
			var(--wp--preset--color--burgundy) 35%,
			var(--wp--preset--color--burgundy-dark) 70%,
			var(--wp--custom--catering--deep) 100% );
	background-size: cover, cover, cover;
}

.prenota-cta--catering .prenota-cta__media img {
	/* La scena è sbilanciata a destra: senza spostare l'inquadratura, il taglio
	   della cella lascia fuori il tavolo e tiene il fondo vuoto. */
	object-position: 75% center;
}

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

@media ( max-width: 900px ) {
	/* Come le altre pastiglie del sito: sotto i 900px l'interlinea ereditata
	   lascia sotto le maiuscole più aria che sopra e alza il bottone. */
	.prenota-cta__cta .wp-block-button__link {
		line-height: 1;
	}

	/* Il selettore della variante specchiata va ripetuto anche dove la regola
	   base basterebbe: `.prenota-cta--flip .prenota-cta__copy` pesa più di
	   `.prenota-cta__copy` e continuerebbe a imporre il padding da desktop. */
	.prenota-cta__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.prenota-cta__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

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

	/* A colonna singola la riga entra intera: l'a capo del riferimento
	   spezzerebbe la frase a metà larghezza. */
	.prenota-cta__lede br {
		display: none;
	}

	/* Nella variante specchiata la foto sta sotto il testo nel markup, ma su
	   mobile il riferimento la porta sopra: apre la sezione con l'immagine,
	   come fa la sezione non specchiata. */
	.prenota-cta--flip .prenota-cta__media {
		order: -1;
	}
}