/**
 * Loyalty — pannello cremisi: attiva la card, scegli il prezzo, i tre tagli.
 *
 * Le misure vengono dal file Illustrator, impaginato su 1920 con la colonna di
 * contenuto larga 1512 punti. Quella colonna corrisponde al nostro `alignwide`
 * (1168px), quindi il fattore di conversione fra disegno e sito è 1168/1512 =
 * 0,772: è con quello che sono ricavate le quote qui sotto.
 */

.loyalty-panel {
	position: relative;
	/* Nel file la sezione va da 601 a 2102 punti: 1501 di altezza, di cui 340
	   sopra al titolo. Il resto lo detta il contenuto. */
	padding-block: clamp( 80px, 10.6vw, 204px ) 0;

	/* Le tessere in fondo escono dal fondo del pannello e i chicchi dai lati:
	   il taglio verticale va tolto, quello orizzontale resta. */
	overflow-x: clip;
	overflow-y: visible;

	/* Il margine negativo delle schede serve a farle sconfinare senza allungare
	   il pannello. Senza un contesto di formattazione proprio però quel margine
	   collassa oltre il bordo e tira su anche la fascia successiva, che finiva
	   104px più in alto del dovuto. `overflow: clip` da solo non basta: a
	   differenza di `hidden` non ne crea uno. */
	display: flow-root;

}

/* --- Attiva la tua card ------------------------------------------------ */

/* Testo a sinistra, tessere e tazzina a destra. Nel file il gruppo di destra
   parte a metà della colonna di contenuto; qui la composizione pesa un po' di
   più — su richiesta — e arriva ai ~700px della sua misura nativa, che è il
   massimo prima di ingrandirla. Il testo si stringe di conseguenza. */
.wp-block-group.loyalty-attiva {
	display: grid;
	grid-template-columns: 0.62fr 1fr;
	align-items: center;
	gap: clamp( 24px, 3vw, 48px );
}

.wp-block-group.loyalty-attiva > * {
	margin-block: 0;
}

.loyalty-attiva__title {
	margin: 0 0 clamp( 18px, 2vw, 30px );
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.wp-block-group.loyalty-attiva__testo > .loyalty-attiva__lede {
	margin: 0;
	max-width: 24em;
	font-weight: 700;
	line-height: 1.35;
}

/* --- La composizione: tessere e tazzina ------------------------------- */

/* Un'immagine sola, fornita già scontornata: le due tessere inclinate e la
   tazzina sono un pezzo unico del disegno, e ricostruirle a markup significava
   inseguire rotazioni e sovrapposizioni che nel file sono già risolte. */
.loyalty-attiva__media {
	margin: 0;
}

/* Il file è 923 × 699 ma il disegno dentro ne occupa 783 × 562: restano 45
   punti vuoti a sinistra, 95 a destra, 82 sopra e 55 sotto. Quei margini
   trasparenti mangiavano un ottavo della colonna e lasciavano un buco fra la
   tazzina e il bordo destro.

   Invece di ritagliare il file — che vorrebbe dire ricomprimere un AVIF — li
   si toglie dal flusso: l'immagine cresce di 923/783, cioè del 17,9%, e i
   margini negativi riportano il disegno a filo della colonna. Il risultato è
   la composizione larga quanto la colonna, resa all'88% della sua misura
   nativa: ancora sotto l'uno a uno, quindi nitida. */
.loyalty-attiva__media img {
	display: block;
	width: 117.88%;
	/* Il blocco immagine di core tiene le immagini entro il 100%: senza questo
	   la larghezza qui sopra veniva ricacciata dentro alla colonna. */
	max-width: none;
	height: auto;
	margin-left: -5.75%;
	margin-top: -10.47%;
	margin-bottom: -7.02%;
}

/* --- Scegli tu il prezzo ------------------------------------------------ */

.wp-block-group.loyalty-scegli {
	/* Nel file il titolo comincia dove finisce la composizione: lo stacco è
	   quasi tutto interlinea. */
	margin-top: clamp( 16px, 2vw, 36px );
}

/* Nel file del cliente questo titolo è in Light: è il peso più sottile della
   pagina, e regge perché la misura è grande. «Scegli tu» resta in nero qui
   sotto, ed è il contrasto fra i due pesi a fare il titolo. */
.loyalty-scegli__title {
	margin: 0 0 clamp( 18px, 2.2vw, 34px );
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.loyalty-scegli__title strong {
	font-weight: 700;
}

.wp-block-group.loyalty-scegli > .loyalty-scegli__lede {
	margin: 0;
	/* Medium nel file: il testo che segue un titolo in Light ha bisogno di
	   pesare un po' più del corpo normale, o il salto è troppo. */
	font-weight: 500;
	line-height: 1.45;
}

/* --- Le tre schede ------------------------------------------------------ */

/* Nel file: tre colonne da 473 punti con 47 di stacco, dentro una colonna di
   1512. In percentuale sono tre dodicesimi abbondanti, che a griglia si
   traducono in tre colonne uguali e un gap del 3%. */
.wp-block-group.loyalty-cards {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 16px, 3%, 36px );
	margin-top: clamp( 40px, 6vw, 92px );

	/* Le schede scendono sotto il bordo del pannello, come nel disegno, dove
	   sconfinano nella fascia blu che segue. */
	margin-bottom: clamp( -140px, -7.2vw, -40px );

	/* Stanno sopra alla fascia successiva perché sono posizionate con un
	   `z-index`, non perché lo sia il pannello: dare il contesto di
	   impilamento al pannello lo rendeva un livello a sé, e il suo bordo
	   inferiore — che cade su una frazione di pixel — si fondeva col
	   trasparente invece che col blu sottostante. Da lì la riga chiara. */
	position: relative;
	z-index: 1;
}

.wp-block-group.loyalty-cards > * {
	margin-block: 0;
}

.wp-block-group.loyalty-card {
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	background-color: var(--wp--preset--color--white);

	/* Nel file la scheda ha un filo grigio chiarissimo tutt'intorno — #dbdbdb,
	   poco più di un punto — che sul fondo scuro stacca la faccia colorata dal
	   pannello. Il preset più vicino è `gray-line`. */
	border: 1px solid var(--wp--preset--color--gray-line);
	border-radius: var(--wp--custom--radius--panel);
	box-shadow: 0 24px 48px -26px rgba( 0, 0, 0, 0.55 );
	overflow: hidden;
}

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

/* --- La faccia azzurra -------------------------------------------------- */

.loyalty-face {
	position: relative;

	/* Tutte le quote interne sono percentuali della larghezza della scheda,
	   misurate sul file a 300 dpi. `cqw` le tiene in proporzione sia quando la
	   tessera è grande accanto al titolo sia quando è un terzo di riga.

	   Il contenitore va dichiarato anche qui e non solo sulla scheda: la coppia
	   inclinata accanto al titolo una scheda non ce l'ha, e senza un contenitore
	   più vicino le `cqw` ripiegano sul viewport — le tessere diventavano larghe
	   quanto mezzo schermo. */
	container-type: inline-size;

	/* Export «Risorsa 2»: tessera 475,53 × 578,7 pt, faccia alta 307,28. Tutte
	   le quote che seguono sono quei punti riportati a `cqw` (÷ 4,7553). */
	aspect-ratio: 475.53 / 307.28;

	/* Importo e riga dei dati sono posizionati, non impaginati da un flusso:
	   le `cqw` valgono solo sui figli — sulle proprietà della faccia stessa si
	   misurerebbero sull'antenato, e per la coppia inclinata, che scheda non ha,
	   quell'antenato è il viewport. È il motivo per cui il padding in `cqw`
	   sulla faccia mandava tutto fuori scala. */
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--gradient--tessera-loyalty);
	color: var(--wp--preset--color--white);
}

/* Marchio e mano sono decorazione fissa: stanno qui e non nel documento, così
   non si ripetono cinque volte nell'albero di accessibilità. */
.loyalty-face::before {
	content: "";
	position: absolute;
	/* Marchio: nel file l'inchiostro va da (45,8; 47,12) per 205,74 di larghezza.
	   Il rapporto del riquadro è quello del file del logo, che non ha margini
	   interni: `contain` ci appoggia sopra senza scarti. */
	left: 9.63cqw;
	top: 9.91cqw;
	width: 43.27cqw;
	aspect-ratio: 417.82 / 64.11;
	background: var(--cn-media-logo-white) left top / contain no-repeat;
}

.loyalty-face::after {
	content: "";
	position: absolute;
	/* Il disco: centro (368,19; 128,23), raggio 80,6. Marchio e disco stanno
	   sulla stessa riga alta, 47,1 dal bordo della tessera. */
	left: 60.48cqw;
	top: 9.91cqw;
	width: 33.89cqw;
	aspect-ratio: 1;
	background: var(--cn-media-loyalty-mano) center / contain no-repeat;
}

/* Nel file il testo è posizionato per base, il CSS per bordo alto della riga:
   la base di una riga cade a `(interlinea − (asc + disc)) / 2 + asc` dal bordo.
   Per il Montserrat come lo monta Chrome asc + disc = 1,22 em con asc 0,97,
   quindi con `line-height: 1` la base sta a 0,86 em dal bordo alto. Le quote
   `top` qui sotto sono la base del file meno quegli 0,86 em. */

/* Base di «20€» a 189,57 dal bordo della tessera. Le quote sono poi ritoccate
   sul reso: Chrome arrotonda ascendente e discendente al pixel, e la base
   finiva mezzo punto più in alto del conto. */
.loyalty-face .loyalty-face__amount {
	position: absolute;
	left: 10.79cqw;
	top: 28.11cqw;
	margin: 0;
	font-size: 13.89cqw;
	font-weight: 700;
	line-height: 1;
	/* Nel file «2» avanza 37,2 su un corpo di 66,07: −0,025 em di tracking. */
	letter-spacing: -0.025em;
}

/* Base delle diciture a 224,76, cioè bordo alto della riga a 219,24. */
.wp-block-group.loyalty-face__meta {
	position: absolute;
	left: 11.33cqw;
	top: 46.17cqw;
	display: flex;
	align-items: flex-start;
	gap: 0;
	margin: 0;
}

.loyalty-face__datum {
	margin: 0;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* La seconda colonna comincia a 224,49, cioè 35,88 dopo la prima: è la prima
   colonna a portare quella misura, così la seconda cade dove deve anche quando
   il valore a sinistra è corto. Non stringe il contenuto — `nowrap` sopra — e
   quando la dicitura è una sola, come sulle tessere speciali, la larghezza
   fissa non si vede. */
.wp-block-group.loyalty-face__meta > .loyalty-face__datum:first-child {
	flex-basis: 35.88cqw;
}

/* Il filo verticale fra le due voci: nel file va da 220,23 a 245,92, cioè
   dal bordo alto della dicitura alla base del valore. Non è un bordo della
   colonna — quella scende più in basso — ma un segno di misura sua. */
.loyalty-face__datum + .loyalty-face__datum {
	position: relative;
}

.loyalty-face__datum + .loyalty-face__datum::before {
	content: "";
	position: absolute;
	left: -3.28cqw;
	top: 0.21cqw;
	height: 5.4cqw;
	border-left: 1px solid rgba( 255, 255, 255, 0.45 );
}

/* Corpo 6,42 nel file, e tracking naturale: i sotto-blocchi dell'SVG con
   −0,02/−0,03 em sono le coppie crenate da Illustrator, non una spaziatura
   di riga. Sommate, le lettere occupano esattamente la misura del font. */
/* Nella tavola queste diciture sono 6,42 su una tessera di 475 — 1,35cqw — e
   smorzate. Su richiesta stanno un filo più grandi e in bianco pieno: a quel
   corpo, sul fondo azzurro, il grigio le rendeva faticose. */
.loyalty-face__datum small {
	display: block;
	font-size: 1.55cqw;
	line-height: 1;
	text-transform: uppercase;
}

/* Il valore è monospaziato nel file, e il tema ha già la famiglia.
   Corpo 16,62 (l'altezza delle maiuscole misurata sui tracciati, 12,15, sta a
   0,73 del corpo) e avanzamento 12,90 fra una lettera e l'altra, cioè 0,18 em
   oltre i 0,6 em del monospazio.

   Base a 245,70: sotto la dicitura restano 5,75 punti di stacco, che a questo
   corpo valgono 0,346 em. Il monospazio ha asc + disc = 1,32 em con asc 1,02,
   quindi con `line-height: 1` la base cade di nuovo a 0,86 em dal bordo. */
.loyalty-face__datum span {
	display: block;
	margin-top: 0.406em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 3.5cqw;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* La tazzina che precede il numero di caffè: è il segno del disegno, e come
   pittogramma decorativo sta nel CSS. Nel file è larga 18,97 e alta 11,08 —
   1,141 × 0,666 em — e appoggia 0,24 sopra la base. */
.wp-block-group.loyalty-face__meta > .loyalty-face__datum:first-child span::before {
	content: "";
	display: inline-block;
	/* La misura è della tessera, non del testo: 18,97 × 11,08 nel file. In `em`
	   la tazzina si rimpiccioliva insieme alla dicitura sulle tessere speciali,
	   dove il testo è più minuto ma il pittogramma è lo stesso segno. */
	width: 3.99cqw;
	height: 2.33cqw;
	margin-left: 0.082em;
	margin-right: 0.451em;
	background: var(--cn-media-icona-tazzina-inverse) center / contain no-repeat;
	vertical-align: 0.015em;
}

/* --- Il corpo bianco ---------------------------------------------------- */

/* Il corpo bianco va da 307,28 (dove finisce la faccia) a 578,7. Dentro, le
   basi del file: intro a 370,18 e 399,18, le due cifre grandi a 489,15, le
   etichette a 523,15 e 522,15.

   Da lì le quote: il bordo alto dell'intro cade a 347,70 — 40,42 sotto la
   faccia, cioè 8,5cqw di padding — e il fondo del blocco delle cifre a 529,94,
   che lascia 48,76 fino al bordo, cioè 10,25cqw. */
.wp-block-group.loyalty-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	/* Le quote partono dal bordo alto: centrare il contenuto le sposterebbe
	   appena una scheda accanto fosse più alta. */
	justify-content: flex-start;
	gap: 0;
	padding: 8.59cqw 10.79cqw 10.3cqw;
}

.wp-block-group.loyalty-card__body > * {
	margin-block: 0;
}

/* Corpo 22,17 e interlinea 29 nel file: 1,308. */
.loyalty-card__intro {
	margin: 0;
	font-size: 4.663cqw;
	line-height: 1.308;
	font-weight: 600;
	color: var(--wp--preset--color--gulf);
}

.loyalty-card__intro strong {
	font-weight: 700;
}

/* Le due colonne sono ancorate, non distribuite: nel file la prima comincia a
   48,71 e la seconda a 244,66, cioè 41,21cqw più in là, qualunque sia la cifra
   che ci sta dentro. Il margine negativo è lo scarto fra il bordo dell'intro
   (51,32) e quello delle cifre (48,71): è l'allineamento ottico del file, che
   porta l'inchiostro dell'«1» sotto quello della «A». */
.wp-block-group.loyalty-card__figures {
	display: grid;
	grid-template-columns: 41.21cqw auto;
	align-items: start;
	margin: 5.72cqw 0 0 -0.55cqw;
}

/* La cifra è già un blocco: l'a capo del markup aprirebbe una riga vuota in
   più fra la cifra e l'etichetta, alta quanto l'interlinea dell'etichetta. */
.loyalty-card__coffees br,
.loyalty-card__unit br {
	display: none;
}

/* Il filo verticale: nel file va da 442,90 a 523,52, cioè dall'altezza delle
   maiuscole della cifra alla base dell'etichetta. Sta a 208,19, 36,47 prima
   della colonna di destra. */
.wp-block-group.loyalty-card__figures > .loyalty-card__unit {
	position: relative;
}

.wp-block-group.loyalty-card__figures > .loyalty-card__unit::before {
	content: "";
	position: absolute;
	left: -7.67cqw;
	top: 2.22cqw;
	height: 16.95cqw;
	border-left: 1px solid color-mix( in srgb, var(--wp--preset--color--gulf) 45%, transparent );
}

.loyalty-card__coffees,
.loyalty-card__unit {
	margin: 0;
}

/* Le due etichette non hanno la stessa misura nel file: «CAFFÈ» è 30,48 e
   «Singolo caffè» 22,17. Le interlinee sono quelle che portano le basi a 34 e
   a 33 punti sotto quella della cifra — la riga della cifra ne vale 66,07,
   e il resto lo fa l'interlinea dell'etichetta. */
.loyalty-card__coffees {
	color: var(--wp--preset--color--rosso);
	font-size: 6.41cqw;
	line-height: 0.89;
	font-weight: 700;
	text-transform: uppercase;
}

.loyalty-card__unit {
	color: var(--wp--preset--color--steel);
	font-size: 4.663cqw;
	line-height: 1.371;
}

/* Corpo 66,07 nel file: la cifra sta all'etichetta «CAFFÈ» come 66 sta a 30.
   Il valore è in `cqw` e non in un preset perché la scheda è fluida — sono tre
   colonne che si stringono — e una misura fissa la spezzerebbe; quel che conta
   e che si porta dal disegno è il rapporto, che non dipende dalla scala della
   tavola. */
.loyalty-card__coffees strong,
.loyalty-card__unit strong {
	display: block;
	font-size: 13.89cqw;
	line-height: 1;
	font-weight: 700;
	/* −25 di tracking nel file, cioè −0,025em. */
	letter-spacing: -0.025em;
}

/* SemiBold nel file, non Medium: «singolo caffè» pesa quanto «CAFFÈ» accanto. */
.loyalty-card__unit em {
	font-style: italic;
	font-weight: 600;
}

/* --- Chicchi ------------------------------------------------------------ */

/* I due chicchi sono quelli della tavola, ritagliati dal file del cliente con
   la loro maschera. Nella tavola stanno fra i due titoli, sul bordo destro:
   il primo ha il riquadro a (1526; 1382) e il secondo a (1465; 1491), tutti e
   due larghi 107 e alti 94 — misure prese sul rendering della tavola.

   Le pose: nel file sorgente i due chicchi sono coricati, e l'impaginato li
   ruota. Gli angoli qui sotto sono la differenza fra l'asse principale del
   chicco nella tavola e quello nel ritaglio, e la larghezza è quella che, una
   volta ruotata, riempie il riquadro del disegno.

   La posizione è per centro — da lì il `translate` — perché è il centro a
   restare fermo quando il chicco ruota. Il modulo che li fa ondeggiare usa le
   proprietà `translate` e `rotate`, che si compongono con questo `transform`
   invece di sostituirlo. */
.loyalty-panel__bean {
	position: absolute;
	z-index: 4;
	width: clamp( 44px, 3.87vw, 74px );
	height: auto;
	margin: 0;
	pointer-events: none;
	user-select: none;
}

/* Le ascisse della tavola sono 1580 e 1520 su 1920, cioè il bordo destro della
   cornice del sito e poco più a sinistra: i chicchi appartengono alla
   composizione delle tessere, non al bordo della finestra. Misurate in `vw`
   nude seguivano invece la finestra, e su un monitor da 3124 finivano a 2570 —
   quattrocento pixel oltre la cornice, sospesi nel rosso vuoto.

   Scritte come scarto dal centro sulla tela del disegno danno lo stesso punto
   di prima fino a 1920 e restano agganciate alla cornice oltre. */
.loyalty-panel__bean--alto {
	left: calc( 50% + 0.3229 * var(--wp--custom--layout--canvas) );
	top: 55.1%;
	transform: translate( -50%, -50% ) rotate( 107.5deg );
}

.loyalty-panel__bean--basso {
	left: calc( 50% + 0.2915 * var(--wp--custom--layout--canvas) );
	top: 62.4%;
	transform: translate( -50%, -50% ) rotate( -58.9deg );
}

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

@media ( max-width: 900px ) {
	.loyalty-panel {
		padding-block: clamp( 90px, 22vw, 140px ) clamp( 40px, 10vw, 70px );
	}

	/* A colonna singola la composizione va sotto al testo. */
	.wp-block-group.loyalty-attiva {
		grid-template-columns: 1fr;
		gap: clamp( 28px, 8vw, 44px );
	}

	/* Le tre tessere non si impilano: scorrono di lato. Sono larghe il 78% della
	   colonna proprio perché la successiva si affacci dal bordo — è quello a
	   dire che ce n'è dell'altra, senza aggiungere frecce o pallini.

	   `scroll-snap` le ferma una per volta; l'ombra delle schede vuole spazio
	   dentro al nastro, perché `overflow-x` porta con sé anche il taglio
	   verticale, e il margine negativo che le fa sconfinare nella fascia blu
	   se lo riprende. */
	.wp-block-group.loyalty-cards {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 78%;
		gap: 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline-start: 0;

		/* Il nastro arriva al bordo dello schermo: la tessera che si affaccia
		   è tagliata dal margine del telefono, non da quello della colonna, e
		   si legge subito che continua. Lo stacco a destra è quello del tema —
		   la stessa misura che dà il rientro alle sezioni — così quando si
		   arriva in fondo l'ultima tessera respira come la prima. */
		margin-right: calc( -1 * var(--wp--preset--spacing--50) );
		padding-right: var(--wp--preset--spacing--50);

		/* La barra di scorrimento non serve: a dire che si scorre è la tessera
		   successiva che si affaccia. */
		scrollbar-width: none;

		padding-bottom: 26px;
		margin-bottom: calc( clamp( -80px, -12vw, -40px ) - 72px );
	}

	.wp-block-group.loyalty-cards::-webkit-scrollbar {
		display: none;
	}

	.wp-block-group.loyalty-cards > * {
		width: auto;
		max-width: none;
		margin-inline: 0;
		scroll-snap-align: start;
	}

	/* Il padding del corpo resta in `cqw`: la scheda a colonna singola tiene la
	   larghezza che ha in fila da tre, quindi le proporzioni del file valgono
	   anche qui, e una misura in px le romperebbe. */

	.loyalty-panel__bean--alto,
	.loyalty-panel__bean--basso {
		display: none;
	}
}