/**
 * Un Caffè. Mille Culure. — due allestimenti della stessa sezione.
 *
 * `--home` è quello della homepage: fondo bianco, le tre tazzine appoggiate su
 * una fascia di sabbia che prosegue nella barra della call to action.
 * `--split` è quello della pagina Menù: fascia divisa crema/blu con le tazzine
 * a cavallo del taglio e la loro descrizione sotto.
 *
 * Titolo e sottotitolo sono gli stessi in entrambi, quindi stanno nella base;
 * tutto il resto è specifico e sta sotto il proprio modificatore. Le due
 * varianti non condividono nulla oltre a quello, e nessuna delle due deve
 * poter cambiare l'altra per sbaglio.
 *
 * Le regole che assegnano un margine ai figli diretti della sezione portano
 * due classi. Non è un vezzo: il layout di flusso di core/group stampa
 * `> * + * { margin-block-start: … }` con la specificità di una classe sola e
 * più avanti nel documento, quindi una regola a classe singola perderebbe.
 */

/* --- Base condivisa --------------------------------------------------- */

.culure {
	position: relative;
	overflow: hidden;
}

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

.culure__heading {
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.3px;
	padding-inline: 24px;
}

.culure__heading strong {
	font-weight: 700;
}

.culure__subheading {
	font-weight: 600;
	/* Nel riferimento il sottotitolo eredita l'1,55 del body; qui la radice
	   dichiara 1,6, che su una riga sola vale un pixel di troppo e sposta in giù
	   tutto quello che segue. */
	line-height: 1.55;
	padding-inline: 24px;
}

.wp-block-group.culure > .culure__subheading {
	margin-block-start: 18px;
}

/* =========================================================================
   HOMEPAGE — tazzine sulla sabbia
   ========================================================================= */

/* Il riferimento sovrappone al bianco un `culure-bg.png` di 4020×1687: il file
   ha il canale alfa completamente vuoto, non disegna niente. Qui non viene
   portato, e il fondo resta il bianco che il blocco già dichiara. */
.culure--home {
	/* Quanto della sezione occupa la sabbia, dal basso. La fascia non sta più
	   sullo stage — che non esiste più, sostituito dalla griglia di carte — ma
	   sulla sezione: la griglia su schermo stretto scorre in orizzontale, e uno
	   pseudo-elemento al suo interno scorrerebbe con le carte invece di restare
	   fermo dietro di loro. */
	--culure-sabbia-home: 40%;

	position: relative;
	padding-block-start: clamp( 32px, 4.5vw, 64px );
}

.culure--home::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	height: var( --culure-sabbia-home );
	background-color: var(--wp--preset--color--sand);
}

/* Titoli, carte e barra stanno sopra la sabbia, non sotto. */
.wp-block-group.culure--home > * {
	position: relative;
	z-index: 2;
}

/* --- La fascia di sabbia ------------------------------------------------ */

/* La sabbia è uno pseudo-elemento e non un blocco vuoto: non ha contenuto né
   ruolo, e come blocco sarebbe un elemento in più da spiegare nell'editor.
   Sfora sotto al proprio contenitore fin sotto alla barra della call to action,
   così le due superfici di sabbia risultano una sola — la barra ha z-index più
   alto e ne copre l'eccedenza. */
.culure__stage {
	/* Di quanto sfora. Non è la misura della barra: è una misura più larga di
	   quanto la barra possa mai essere alta, e l'eccedenza la taglia
	   l'`overflow: hidden` della sezione, che finisce esattamente dove finisce
	   la barra.

	   Prima qui c'era un valore che provava a valere quanto la barra, e non ci
	   riusciva: la barra è alta quanto il suo contenuto più i suoi padding, che
	   è un conto che questo foglio non può rifare. Restava scoperta una striscia
	   — due pixel a 1280, trentotto a 390 — che la barra normalmente copre col
	   proprio fondo sabbia, ma che si vedeva bianca per tutta la durata della
	   comparsa allo scroll, quando la barra è ancora trasparente e spostata in
	   giù di 24px.

	   Quanto vale non cambia dove la sabbia comincia: il bordo alto dello
	   pseudo-elemento è `bottom + height`, e lo sforo compare in tutti e due con
	   lo stesso segno, quindi si elide. Comanda solo la percentuale. */
	--culure-sabbia-sforo: 260px;

	position: relative;
}

.wp-block-group.culure > .culure__stage {
	margin-block-start: clamp( 48px, 7vw, 90px );
}

.culure__stage::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: calc( -1 * var(--culure-sabbia-sforo) );
	height: calc( 26% + var(--culure-sabbia-sforo) );
	background-color: var(--wp--preset--color--sand);
}

/* --- Le tre tazzine ----------------------------------------------------- */

/* Un solo elenco di tazzine per entrambe le larghezze. Il riferimento ne tiene
   due copie nel markup — trio fisso e carosello — e ne nasconde una: qui
   cambia la presentazione, non il contenuto, quindi cambia solo il CSS.
   `align-items: flex-end` fa cadere le basi sulla stessa linea, che le tazzine
   siano alte uguali o no. */
.culure__cups {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: clamp( 20px, 4.5vw, 90px );
	padding-inline: 8%;
}

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

.culure__cup {
	width: clamp( 160px, 20vw, 330px );
	/* Le foto nuove sono tazzina e piattino ritagliati, e nel riferimento il
	   piattino posa sulla sabbia con un'ombra corta che gli resta sotto: si
	   vedono si e no sette pixel di frangia. L'ombra segue il contorno del
	   ritaglio e non il suo riquadro, quindi drop-shadow e non box-shadow.
	   Le vecchie foto erano la sola tazzina e non ne avevano bisogno. */
	filter: drop-shadow( 0 4px 7px rgba( 0, 0, 0, 0.28 ) );
}

.culure__cup img {
	display: block;
	width: 100%;
	height: auto;
	/* Le proporzioni native del file: riservano lo spazio prima che l'immagine
	   arrivi, così la fascia di sabbia non si riassesta a caricamento finito.
	   I tre file condividono una sola tela — stessa larghezza di piattino e
	   base appoggiata sullo stesso bordo — quindi una misura sola vale per
	   tutte e tre, e `align-items: flex-end` le allinea davvero. */
	aspect-ratio: 1024 / 901;
}

/* Sopra la soglia del carosello le copie che il modulo aggiunge per chiudere
   l'anello non hanno più senso: sarebbero nove tazzine in fila. Restano fuori
   anche se si allarga la finestra dopo che il modulo ha già clonato. */
@media ( min-width: 701px ) {
	.culure__cup[aria-hidden="true"] {
		display: none;
	}
}

/* --- Carosello, sotto i 700px ------------------------------------------- */

@media ( max-width: 700px ) {
	/* Tre tazzine su 390px ne darebbero una di 110px. Meglio una alla volta,
	   grande, che scorre e si aggancia al centro; il padding laterale è
	   calcolato perché anche la prima e l'ultima possano centrarsi. La sfumatura
	   in maschera fa sparire le vicine sui bordi invece di tagliarle di netto. */
	.culure__cups {
		justify-content: flex-start;
		gap: clamp( 8px, 2vw, 24px );
		padding-inline: calc( 50% - clamp( 190px, 62vw, 340px ) / 2 );
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 7%, #000 93%, transparent 100% );
		mask-image: linear-gradient( 90deg, transparent 0%, #000 7%, #000 93%, transparent 100% );
	}

	.culure__cups::-webkit-scrollbar {
		display: none;
	}

	.culure__cup {
		flex: 0 0 clamp( 190px, 62vw, 340px );
		width: auto;
		scroll-snap-align: center;
		transform-origin: bottom center;
	}

	/* Le vecchie foto erano la sola tazzina, col manico a sinistra: il corpo
	   cadeva a destra del centro del riquadro e serviva uno scarto per
	   rimetterlo in asse. Ora la tazzina sta su un piattino, il piattino è
	   simmetrico ed è lui la forma che si vede: le tre tele sono ritagliate
	   sul piattino e centrate su di esso, quindi lo scarto non ha più niente
	   da correggere e sposterebbe soltanto. */

	/* Dentro al carosello la comparsa allo scroll va spenta, e non è una
	   rinuncia. Una tazzina che sta fuori dallo schermo in orizzontale non
	   entra mai in campo verticalmente: l'osservatore non la scopre, e resta
	   trasparente per sempre — chi scorre di lato non troverebbe niente. Il
	   riferimento non incontra il problema perché sotto i 700px mostra un
	   markup diverso, che la classe `reveal` non ce l'ha; qui il markup è uno
	   solo per entrambe le larghezze, quindi la differenza la fa il foglio.
	   Due classi per battere `.is-reveal`, che ne pesa una. */
	.culure__cup.is-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Le tazzine cavalcano un arco: quella al centro è grande e dritta, le
	   vicine salgono, rimpiccioliscono e si inclinano. È un di più: senza
	   `animation-timeline` il carosello resta piatto e scorre lo stesso. */
	@supports ( animation-timeline: view() ) {
		.culure__cup {
			animation: culure-arc linear both;
			animation-timeline: view( inline );
		}
	}
}

@keyframes culure-arc {
	0% {
		transform: translateY( -18px ) rotate( 8deg ) scale( 0.9 );
	}

	50% {
		transform: translateY( 0 ) rotate( 0deg ) scale( 1 );
	}

	100% {
		transform: translateY( -18px ) rotate( -8deg ) scale( 0.9 );
	}
}

/* --- La barra della call to action -------------------------------------- */

/* z-index 2: copre l'eccedenza della fascia di sabbia e le dà continuità. */
.culure__cta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp( 20px, 3vw, 40px );
	padding: clamp( 28px, 4vw, 48px ) 24px clamp( 36px, 5vw, 64px );
}

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

.culure__cta-text {
	font-weight: 700;
	letter-spacing: 0.2px;
}

.culure__cta-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	font-size: clamp( 14px, 1.2vw, 17px );
	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 c'è niente da descrivere. La maschera la tinge del
   colore del testo, quindi segue il bottone se il bottone cambia. */
.culure__cta-btn .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;
}

.culure__cta-btn .wp-block-button__link:hover,
.culure__cta-btn .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--rosso-dark) !important;
}

/* Sotto i 900px l'interlinea ereditata è più alta del corpo e lascia sotto le
   maiuscole più aria che sopra: la pastiglia sembra sbilanciata e cresce di
   otto pixel. A 1 le lettere si centrano e i 14px di padding si leggono uguali
   sopra e sotto — è la stessa correzione che il riferimento applica, lì a
   tutte le pastiglie del sito insieme. */
@media ( max-width: 900px ) {
	.culure__cta-btn .wp-block-button__link {
		line-height: 1;
	}
}

@media ( max-width: 600px ) {
	.culure__cta {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	/* `!important` obbligato, non per pigrizia: le classi di preset dei corpi
	   testo che core genera — qui `has-cta-text-font-size` — sono dichiarate
	   `!important`, e senza pareggiare, questa misura da breakpoint non
	   arriverebbe mai a valere. */
	.culure__cta-text {
		font-size: 18px !important;
	}
}

/* --- Schermi stretti, fascia di sabbia ---------------------------------- */

@media ( max-width: 700px ) {
	/* La tazzina centrata è molto più grande che sul desktop, quindi la sabbia
	   deve salirle più in alto per tagliarla allo stesso punto. Cambia solo la
	   percentuale: è quella il bordo alto. */
	.culure__stage::before {
		height: calc( 42% + var(--culure-sabbia-sforo) );
	}
}

/* =========================================================================
   PAGINA MENÙ — fascia divisa, tazzine a cavallo del taglio
   =========================================================================
   La divisione crema/blu è una sola sfumatura a scalino: le due bande sono
   lo stesso elemento, così le tazzine possono stare a cavallo del confine
   senza sconfinare da un contenitore all'altro. I colori sono preset, il
   punto in cui il colore cambia no: quello è composizione, e sta qui. */

/* Chi decide davvero dove passa il taglio è la striscia di chicchi, non la
   sfumatura: il file è opaco, quindi il blu che si vede è il suo. Finché le
   due misure coincidevano la cosa non si notava; su un monitor largo no.
   `bg-coffee.svg` è 1917×381, e con `background-size: 100%` a 3124px di
   finestra diventava alto 620 su una sezione di 721 — saliva sopra al titolo
   e si mangiava quasi tutta la metà crema.

   Ora la misura della fascia blu è dichiarata una volta sola, e sia il taglio
   della sfumatura sia la striscia la leggono da lì. Il rapporto 5,035 è
   quello del file: la fascia è alta quanto la striscia sarebbe a piena
   larghezza di tela. Sotto i 1920 il conto dà lo stesso identico taglio di
   prima, perché lì la tela è la finestra. */
.culure--split {
	--culure-banda: calc( var(--wp--custom--layout--canvas) / 5.035 );

	/* La striscia è un elemento posizionato e il contenuto no: senza un
	   contesto di impilamento proprio si disegnerebbe sopra alle tazzine. */
	isolation: isolate;
	padding-block: clamp( 32px, 4.5vw, 64px ) clamp( 48px, 6vw, 80px );
	background-image: linear-gradient(
		to bottom,
		var(--wp--preset--color--cream-light) 0,
		var(--wp--preset--color--cream-light) calc( 100% - var(--culure-banda) ),
		var(--wp--preset--color--gulf) calc( 100% - var(--culure-banda) ),
		var(--wp--preset--color--gulf) 100%
	);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/* La striscia sta in uno pseudo-elemento e non più in un secondo strato di
   sfondo perché così ha una scatola propria, alta quanto la fascia.

   `auto 100%` e non `100% auto`: è l'altezza a comandare, la larghezza segue.
   Fino a 1920 le due misure coincidono — la fascia è alta un quinto scarso
   della finestra, quindi il disegno viene largo esattamente quanto la
   finestra — mentre oltre la tela la fascia si ferma e con lei il disegno,
   che resta alla misura del file invece di continuare a ingrandirsi.

   Quello che resta scoperto ai lati lo chiudono i due colori dei bordi del
   file, presi da lì e non scelti: la striscia parte da un blu profondo a
   sinistra e finisce nel navy a destra, e sono tinte piatte per tutta
   l'altezza. Un solo scalino al centro basta perché la giunzione non si
   veda, visto che il disegno è centrato. */
.culure--split::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	height: var(--culure-banda);
	background:
		var(--cn-media-bg-coffee) no-repeat center bottom / auto 100%,
		linear-gradient(
			to right,
			var(--wp--custom--culure--banda-inizio) 0 50%,
			var(--wp--custom--culure--banda-fine) 50% 100%
		);
	pointer-events: none;
}

.wp-block-group.culure--split > * {
	position: relative;
	z-index: 1;
}

/* Le tazzine sono sei e le colonne tre: a ogni larghezza la fascia è un
   carosello, non una griglia. Le copie che il modulo aggiunge per chiudere
   l'anello servono quindi sempre, e la regola che le nascondeva sopra gli
   800px non c'è più — a differenza della homepage, dove il carosello resta
   una presentazione da schermo stretto.

   `align-items: flex-end` allinea le carte al fondo: le tazzine hanno altezze
   diverse ma le loro basi cadono sulla stessa linea, quella del taglio. */
.culure__grid {
	--culure-gap: clamp( 20px, 4vw, 80px );

	/* Quante carte stanno in campo: tre piene più una fetta. La fetta è tutta
	   la ragione del numero rotto — è l'unica cosa che dice che le tazzine
	   sono sei e non tre, e vale più di un allineamento pulito sul bordo. */
	--culure-in-vista: 3.4;

	/* La carta resta un terzo della misura larga della pagina, che è quanto
	   misurava la traccia prima di sfondare i bordi: sui monitor grandi la
	   fila si legge esattamente come prima, prima carta sul filo del testo.

	   Il secondo termine serve sotto i 1280, dove la misura larga non arriva
	   mai a valere: lì un terzo della finestra darebbe tre carte che la
	   riempiono al pixel e la quarta esattamente fuori campo, cioè nessuna
	   fetta e nessun indizio che il carosello continui. Dividendo per 3,4 la
	   fetta c'è a ogni larghezza. */
	--culure-carta: min(
		calc( ( var(--wp--style--global--wide-size) - 2 * var(--culure-gap) ) / 3 ),
		calc( 100% / var(--culure-in-vista) - var(--culure-gap) )
	);

	display: flex;
	gap: var(--culure-gap);
	align-items: flex-end;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	/* Il carosello scorre da sé: nessuno lo trascina di lato, e la barra di
	   scorrimento aggiungerebbe solo un elemento che si accende e si spegne
	   ogni due secondi. Resta raggiungibile da tastiera — il modulo mette
	   `tabindex` sul contenitore — e trascinabile col dito. */
}

.culure__grid::-webkit-scrollbar {
	display: none;
}

/* Il carosello si può prendere e spostare col mouse: la mano aperta lo dice
   prima di provarci. La classe la mette il modulo, quindi senza JavaScript il
   cursore resta quello normale e non promette niente che non si possa fare. */
.culure__grid.is-trascinabile {
	cursor: grab;
}

.culure__grid.is-trascinando {
	cursor: grabbing;
	/* Trascinando sopra ai titoli, il testo verrebbe selezionato e la
	   selezione azzurra resterebbe lì a fine gesto. */
	user-select: none;
}

/* Le foto sono elementi trascinabili di loro: senza questo, tirare una
   tazzina avvia il trascinamento dell'immagine del browser e il carosello
   resta fermo a metà gesto. */
.culure__grid img {
	-webkit-user-drag: none;
	user-select: none;
}

/* Il carosello arriva ai bordi dello schermo a ogni larghezza, e la riserva
   laterale va tolta alla sezione, non alla griglia.

   Il padding che centra le carte sotto gli 800px è `calc(50% - …)`, e quel 50%
   si misura sul blocco contenitore — la scatola di contenuto della sezione —
   non sulla griglia: con la riserva attiva sono 350px su un viewport da 390,
   quindi 175 invece di 195, e nessun margine negativo sulla griglia lo
   recupera, perché la percentuale continuerebbe a leggere la stessa scatola.
   Sopra gli 800px vale lo stesso per la misura della carta, che è anche lei
   una percentuale della traccia.

   Le due classi servono: la riserva arriva da `.has-global-padding`, che ne
   pesa una. Titolo e sottotitolo non ci perdono niente, hanno un padding
   proprio di 24px — come nel riferimento, dove la sezione di riserva laterale
   non ne ha affatto. */
.wp-block-group.culure--split {
	padding-inline: 0;
}

/* E la traccia occupa tutta la sezione: da `alignwide` si fermava alla misura
   larga, e le carte fuori campo restavano oltre un bordo invisibile in mezzo
   alla pagina invece di tagliarsi su quello dello schermo. Il taglio lo fa
   `overflow: hidden` della base, quindi la pagina non guadagna una barra di
   scorrimento orizzontale. */
.wp-block-group.culure--split > .culure__grid {
	max-width: none;
}

/* Tre alla volta, come nella tavola, più la fetta della quarta che sporge dal
   bordo dello schermo. La misura sta in `--culure-carta` perché la decidono
   due vincoli e non uno. */
.culure-card {
	flex: 0 0 var(--culure-carta);
	scroll-snap-align: center;
}

/* A sinistra non sporge niente: la fila comincia dove comincia la prima carta
   e sfora solo dal bordo destro.

   Non è una scelta di gusto ma una correzione: con l'aggancio al centro i due
   margini della fila sono uguali per costruzione, quindi la fetta a destra ne
   implica una identica a sinistra — la copia che precede la prima carta finisce
   dentro allo schermo perché il passo dell'anello è più largo del margine, e
   nessun allineamento la sposta fuori.

   La toglie una maschera e non un ritaglio: `overflow: hidden` sulla traccia
   spegnerebbe il contenitore che scorre, cioè il carosello. Il gradino cade
   esattamente dove la prima carta si posa a riposo, quindi a riposo non taglia
   niente, e in movimento le carte escono di scena su quella linea invece di
   farsi tagliare dal bordo della finestra.

   Sotto gli 800px la maschera non va messa: lì le carte vicine che sbirciano da
   entrambi i lati sono il modo in cui il carosello dice di potersi scorrere. */
@media ( min-width: 801px ) {
	.culure__grid {
		--culure-margine: calc(
			( 100% - ( 3 * var(--culure-carta) + 2 * var(--culure-gap) ) ) / 2
		);

		-webkit-mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--culure-margine),
			#000 var(--culure-margine),
			#000 100%
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--culure-margine),
			#000 var(--culure-margine),
			#000 100%
		);
	}
}

.wp-block-group.culure > .culure__grid {
	margin-block-start: clamp( 48px, 6vw, 80px );
}

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

.culure-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transform-origin: bottom center;
}

.wp-block-group.culure-card > * {
	margin-block-start: 0;
}

.culure-card__cup {
	width: clamp( 160px, 20vw, 320px );
	margin: 0 0 clamp( 18px, 2vw, 28px );
	/* L'ombra segue il contorno della tazzina, non il suo riquadro: è un file
	   ritagliato con trasparenza, quindi drop-shadow e non box-shadow. */
	filter: drop-shadow( 0 18px 22px rgba( 0, 0, 0, 0.25 ) );
}

/* Le sei foto sono normalizzate sull'**altezza**: 846 di contenuto su una tela
   di 878, base appoggiata allo stesso bordo, centrate in orizzontale. È
   l'ingombro che decide se due tazzine sembrano grandi uguali, e questi sei
   scatti hanno proporzioni molto diverse fra loro — gli espressi sono bassi e
   larghi, i cappuccini alti e stretti. Tenendo fisso il piattino, come si
   sarebbe portati a fare, i cappuccini svettavano di un quarto sugli altri e
   si leggevano più grandi; tenendo fissa l'altezza i piattini variano un poco,
   e quella differenza si legge come angolo di ripresa, non come misura.

   Ci sono file nuovi e non i `culure-cup-*` della homepage proprio per questo:
   lì la tela è un'altra e le tazzine sono tre, non sei. */
.culure-card__cup img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1024 / 878;
}

.culure-card__title {
	margin-block-end: 8px;
	font-weight: 800;
	letter-spacing: 0.005em;
}

.culure-card__title sup {
	font-size: 0.55em;
	font-weight: 600;
	vertical-align: super;
}

.culure-card__desc {
	max-width: 32ch;
	font-weight: 500;
	line-height: 1.45;
	color: color-mix( in srgb, var(--wp--preset--color--white) 92%, transparent );
}

/* In homepage le carte non stanno sopra la fascia blu del Menù ma su un fondo
   caldo e chiaro: il bianco delle due regole qui sopra sparirebbe. Il colore lo
   decide quindi la sezione, non la carta — stessa struttura, due contesti. */
.culure--home .culure-card__title {
	color: var(--wp--preset--color--petrol);
}

.culure--home .culure-card__desc {
	color: var(--wp--preset--color--gulf);
}

@media ( max-width: 800px ) {
	/* Niente disegno di sfondo: a piena larghezza su schermo stretto la sua
	   trama lascia una cucitura visibile nel blu. Resta il taglio netto, che
	   qui sale a metà altezza perché le carte scorrono invece di affiancarsi. */
	.culure--split {
		background-image: linear-gradient(
			to bottom,
			var(--wp--preset--color--cream-light) 0%,
			var(--wp--preset--color--cream-light) 50%,
			var(--wp--preset--color--gulf) 50%,
			var(--wp--preset--color--gulf) 100%
		);
	}

	.culure--split::after {
		display: none;
	}

	/* Tre carte su 390px darebbero tazzine di 100px: meglio una alla volta,
	   che scorre e si aggancia al centro. Il padding laterale è calcolato per
	   permettere anche alla prima e all'ultima di centrarsi. */
	.culure__grid {
		--culure-gap: clamp( 6px, 2vw, 16px );

		padding-inline: calc( 50% - clamp( 190px, 66vw, 280px ) / 2 );
	}

	.wp-block-group.culure > .culure__grid {
		margin-block-start: clamp( 36px, 6vw, 56px );
	}

	.culure-card {
		flex: 0 0 clamp( 190px, 66vw, 280px );
	}

	/* La tazzina si fermava al minimo del clamp: su 390px il 20vw vale 78px,
	   quindi restava a 160px dentro una carta da 257px e si leggeva molto piu
	   piccola delle foto prodotto, che la carta la riempiono per intero. Qui la
	   larghezza la detta la carta, come nelle altre sezioni del sito. */
	.culure-card__cup {
		width: 100%;
	}

	/* Stessa ragione delle tazzine in home: una carta fuori schermo in
	   orizzontale non viene mai scoperta dall'osservatore e resterebbe
	   trasparente per sempre. Nel carosello la comparsa si spegne. */
	.culure-card.is-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* La carta al centro è piena, le vicine rimpicciolite: un'indicazione in
	   più che si può scorrere. È un miglioramento, non l'unico segnale — lo
	   scorrimento funziona comunque, anche da tastiera. */
	@supports ( animation-timeline: view() ) {
		.culure-card {
			animation: culure-coverflow linear both;
			animation-timeline: view( inline );
		}
	}
}

@keyframes culure-coverflow {
	0% {
		transform: scale( 0.82 );
		opacity: 0.55;
	}

	50% {
		transform: scale( 1 );
		opacity: 1;
	}

	100% {
		transform: scale( 0.82 );
		opacity: 0.55;
	}
}

/* Chi ha chiesto meno animazioni non deve avere né l'arco né il coverflow. */
@media ( prefers-reduced-motion: reduce ) {
	.culure__cup,
	.culure-card {
		animation: none;
	}
}