/**
 * Cremoso — pannello bordeaux a sinistra, fotografia a piena altezza a destra.
 *
 * Il markup a blocchi porta struttura, contenuto, colori (gradiente da preset)
 * e scala tipografica. Qui resta la griglia a due metà, l'altezza della banda e
 * il riempimento della fotografia, che i supports non esprimono.
 */

.cremoso {
	background-color: var(--wp--preset--color--burgundy-deep);
	overflow: hidden;
}

/* Le due metà sono esattamente metà: è una banda divisa, non un contenitore
   con margini, quindi niente gutter e niente contenitore wide. */
.cremoso__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp( 620px, 70vw, 900px );
}

/* Il gruppo ha layout di flusso lato blocco e qui diventa una griglia: senza
   questo i margini fra fratelli del blockGap si sommano alla riga. */
.wp-block-group.cremoso__split > * + * {
	margin-block-start: 0;
}

/* --- Pannello di sinistra -------------------------------------------- */

.cremoso__panel {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp( 48px, 5vw, 80px ) clamp( 28px, 4vw, 72px );
}

.cremoso__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 600px;
	text-align: center;
}

/* Il ritmo verticale del pannello è fatto di margini espliciti, uno diverso
   dall'altro, quindi il blockGap del gruppo va azzerato — ma le due classi che
   servono a batterlo battono anche i margini voluti se questi restano a una
   classe sola. Per questo il reset e i valori stanno alla stessa specificità:
   la prima versione li aveva a specificità diverse e collassava tutto a zero. */
.wp-block-group.cremoso__stack > * {
	margin-block-start: 0;
}

/* Nel riferimento titolo e testo stanno in un contenitore a larghezza piena;
   qui sono figli diretti di una colonna flex centrata, quindi senza questo si
   stringerebbero sul contenuto invece di occupare la colonna. */
.wp-block-group.cremoso__stack > .cremoso__title,
.wp-block-group.cremoso__stack > .cremoso__desc,
.wp-block-group.cremoso__stack > .cremoso__cta {
	width: 100%;
}

.wp-block-group.cremoso__stack > .cremoso__title {
	margin-block-start: clamp( 32px, 4vw, 56px );
}

.wp-block-group.cremoso__stack > .cremoso__desc {
	margin-block-start: clamp( 18px, 1.8vw, 26px );
}

.wp-block-group.cremoso__stack > .cremoso__cta {
	margin-block-start: clamp( 28px, 3vw, 40px );
}

.cremoso__deco {
	width: 100%;
	max-width: 600px;
	margin: 0;
}

.cremoso__deco img {
	width: 100%;
	height: auto;
}

.cremoso__title {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.cremoso__desc {
	max-width: 460px;
	margin-inline: auto;
	font-weight: 400;
	line-height: 1.65;
}

/* --- Variante senza marchio ------------------------------------------
   Su Franchising la banda è la stessa, ma sopra al titolo non c'è il
   marchio Cremoso: al suo posto un occhiello, e il titolo non è il titolo
   compatto in grassetto di Il Caffè ma quello di sezione, leggero e in
   corsivo. Le quattro righe stanno in un blocco loro perché nel riferimento
   entrano in scena insieme, come un discorso solo. Il primo figlio della
   pila non ha più bisogno di staccarsi dal marchio che non c'è: il margine
   che lo faceva è sulla classe del titolo, e qui il figlio è questo. */

.wp-block-group.cremoso__stack > .cremoso__text {
	width: 100%;
	margin-block-start: 0;
}

/* Stesso accorgimento della pila: il ritmo è di margini espliciti, quindi il
   blockGap va azzerato — e reset e valori vanno tenuti alla stessa
   specificità, o il reset porta via anche i margini voluti. */
.wp-block-group.cremoso__text > * {
	margin-block-start: 0;
}

.wp-block-group.cremoso__text > .cremoso__lede,
.wp-block-group.cremoso__text > .cremoso__desc {
	margin-block-start: clamp( 18px, 1.8vw, 26px );
}

/* `fit-content` invece di `inline-block` come nel riferimento: un elemento in
   linea si porta dietro la riga che lo contiene e ne somma l'interlinea sopra
   e sotto. Lo stesso motivo per cui `story-split__eyebrow` è scritto così. */
.cremoso__eyebrow {
	display: block;
	width: fit-content;
	margin: 0 auto 12px;
	font-style: italic;
	font-weight: 500;
	line-height: 1.1;
}

.cremoso__heading {
	margin: 0;
	font-style: italic;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

/* La parola in evidenza è <strong>: un formato core, quindi il titolo resta
   modificabile nell'editor senza perdere lo stacco di peso, di colore e il
   ritorno al tondo. */
.cremoso__heading strong {
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--cream);
}

.cremoso__lede {
	max-width: 460px;
	margin-inline: auto;
	font-weight: 700;
	line-height: 1.45;
}

/* --- Riga della chiamata all'azione ---------------------------------- */

.cremoso__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp( 16px, 2vw, 28px );
}

/* La riga CTA è un gruppo con layout di flusso lato blocco: anche qui i
   margini fra fratelli andrebbero a sommarsi al gap. */
.wp-block-group.cremoso__cta > * {
	margin-block-start: 0;
}

.cremoso__cta-label {
	margin: 0;
	font-style: italic;
	font-weight: 500;
}

.cremoso__cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* Freccia decorativa: pseudo-elemento, così non entra nell'albero di
   accessibilità e non va descritta. La maschera la tinge del colore del testo,
   che qui è bordeaux su carta e non bianco come negli altri bottoni. */
.cremoso__cta .wp-block-button__link::after {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-image: var(--cn-media-freccia-bottone);
	mask-image: var(--cn-media-freccia-bottone);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-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. */

/* --- Fotografia di destra -------------------------------------------- */

/* La foto riempie la propria metà e viene tagliata: è un ritaglio voluto, non
   un adattamento. Posizione assoluta perché la cella non ha un'altezza propria
   da cui l'immagine possa derivare la sua. */
.cremoso__photo {
	position: relative;
	margin: 0;
	overflow: hidden;
	background-color: var(--wp--custom--hero--deep);
}

.cremoso__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

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

@media ( max-width: 900px ) {
	/* Le due metà si impilano: il pannello perde l'altezza minima e la foto
	   prende un'altezza propria, altrimenti collasserebbe a zero. */
	.cremoso__split {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.cremoso__panel {
		padding: clamp( 40px, 8vw, 64px ) clamp( 24px, 6vw, 48px );
	}

	.cremoso__photo {
		min-height: clamp( 320px, 60vw, 480px );
	}
}

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

	
}