/**
 * Loyalty — fascia blu: Studenti e Forze dell'ordine.
 *
 * Riusa il componente `.loyalty-card` della sezione precedente: cambia la
 * faccia, che qui è rossa con il disco color oro, e la riga dei dati, che porta
 * una categoria invece della coppia crediti/prezzo.
 *
 * Le quote vengono dal file Illustrator con lo stesso fattore dell'altra
 * sezione: colonna di contenuto 1512 punti su 1920, che qui vale 1168px.
 */

.loyalty-blu {
	position: relative;

	/* Nel file la fascia va da 2102 a 3225 punti. In cima entrano le tre
	   schede della sezione sopra, che sconfinano di 136 punti: il padding
	   iniziale gli fa spazio. */
	padding-block: clamp( 130px, 15vw, 290px ) clamp( 60px, 9vw, 170px );
}

/* La dicitura sopra al blocco: nel file sta a 228 punti dall'inizio della
   fascia, quindi appena sotto alle schede che sconfinano. */
.loyalty-blu__kicker {
	margin: 0 0 clamp( 26px, 3.4vw, 54px );
	font-weight: 700;
}

/* Il gruppo che raccoglie le due tessere occupa le due colonne di destra e ne
   eredita passo e stacco con `subgrid`: le tessere restano incolonnate con le
   tre della sezione sopra senza rifare i conti del gap.

   Serve a tenerle **alte uguali**: da sole si fermavano ognuna alla propria
   altezza, e alle larghezze dove il testo di una va a capo una in più l'altra
   restava indietro. Dentro al gruppo si tirano entrambe all'altezza della più
   alta; il gruppo, che nella griglia è allineato in alto, non si allunga fino
   al testo accanto. Sul taglio stretto lo stesso gruppo diventa il nastro che
   le fa scorrere. */
.wp-block-group.loyalty-blu__nastro {
	display: grid;
	grid-column: 2 / -1;
	grid-template-columns: subgrid;
	align-items: stretch;
}

/* `align-items: stretch` da solo non basta: la scheda è un contenitore flex e
   la sua altezza si ferma al contenuto. `height: 100%` la porta a quella della
   riga, che è quella della più alta delle due.

   Il margine va tolto: il gruppo è un blocco di core, e core dà a ogni figlio
   dopo il primo un `margin-block-start` pari al `blockGap`. Erano quei 24px a
   far partire la seconda tessera più in basso della prima. */
.wp-block-group.loyalty-blu__nastro > .loyalty-card {
	height: 100%;
	margin-block: 0;
}

/* Testo a sinistra, le due tessere nelle due colonne di destra: sono le stesse
   tre colonne della griglia della sezione sopra, con la prima occupata dal
   titolo invece che da una scheda. */
.wp-block-group.loyalty-blu__griglia {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 16px, 3%, 36px );
	align-items: start;
}

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

/* Nel file il titolo comincia 63px sotto al bordo alto delle tessere. */
.wp-block-group.loyalty-blu__testo {
	padding-top: clamp( 24px, 4.4vw, 74px );
}

.loyalty-blu__title {
	margin: 0 0 clamp( 16px, 2vw, 32px );
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.01em;
}

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

/* Dal pannello Carattere della tavola: Montserrat Medium 28pt, tracking 0.
   Il corpo arriva dal preset `lede`, che è la misura del tema più vicina. */
.wp-block-group.loyalty-blu__testo > .loyalty-blu__lede {
	margin: 0;
	max-width: 22em;
	font-weight: 500;
	line-height: 1.5;
}

/* --- La tessera riservata ----------------------------------------------- */

/* Nella tavola la tessera riservata ha la stessa faccia di quella azzurra —
   473 × 307 — quindi qui resta il rapporto ereditato e cambia solo il fondo. */
.loyalty-face.loyalty-face--speciale {
	background: var(--wp--preset--gradient--tessera-speciale);
}

/* Il disco è color sabbia, non rosso: sul fondo rosso della tessera un disco
   rosso sparirebbe. Nella tavola misura il 32,8% della tessera e sta a 10,15
   dal bordo alto.

   Il cerchio lo disegna il CSS e l'immagine porta solo il pittogramma: prima
   erano un'immagine sola, e quella era tagliata di un paio di pixel in cima —
   si vedeva il cerchio spuntato. Le due misure vengono dal file del cliente,
   dove i due pittogrammi non sono grandi uguali. */
.loyalty-face--speciale::after {
	left: 60.48cqw;
	top: 10.15cqw;
	width: 32.8cqw;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold);
	background-position: center;
	background-repeat: no-repeat;
}

.loyalty-face--speciale.is-forze::after {
	background-image: var(--cn-media-icona-forze);
	background-size: 51.3% auto;
	/* Nella tavola il pittogramma sta 1,6 punti sopra al centro del disco. */
	background-position: center 48.4%;
}

.loyalty-face--speciale.is-studenti::after {
	background-image: var(--cn-media-icona-studenti);
	background-size: 44.6% auto;
}

/* Una voce sola, ma lunga: «Forze dell'ordine» a corpo pieno finiva sotto al
   disco. Qui la dicitura è più minuta della gemella azzurra, dove la voce è
   solo un numero di caffè. */
.loyalty-face--speciale .loyalty-face__datum span {
	/* Stesso rapporto di prima con la gemella azzurra (0,86), ricalcolato sul
	   corpo che l'export dà a quella: 3,5cqw. */
	font-size: 3cqw;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

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

@media ( max-width: 900px ) {
	/* Il gradiente della fascia è tagliato per una banda larga: la sua linea
	   corre quasi orizzontale e il blu notte, che sul desktop chiude a destra,
	   qui finisce in cima e incupisce l'attacco. Sul taglio stretto vale la
	   variante verticale dello stesso preset — stessi colori, altra direzione. */
	.loyalty-blu.has-pannello-loyalty-blu-gradient-background {
		background: var(--wp--preset--gradient--pannello-loyalty-blu-alto);
	}

	.loyalty-blu {
		padding-block: clamp( 110px, 26vw, 190px ) clamp( 44px, 11vw, 80px );
	}

	.wp-block-group.loyalty-blu__griglia {
		grid-template-columns: 1fr;
		gap: clamp( 22px, 6vw, 36px );
	}

	/* Le due tessere riservate scorrono di lato come i tre tagli della sezione
	   sopra, e con la stessa misura: la seconda si affaccia dal bordo. */
	.wp-block-group.loyalty-blu__nastro {
		display: grid;
		/* Via il `subgrid` del desktop: qui il nastro è una fila sua. */
		grid-column: auto;
		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;
		scrollbar-width: none;

		/* Come i tre tagli: il nastro arriva al bordo dello schermo. */
		margin-right: calc( -1 * var(--wp--preset--spacing--50) );
		padding-right: var(--wp--preset--spacing--50);

		padding-bottom: 26px;
		margin-bottom: -26px;
	}

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

	.wp-block-group.loyalty-blu__nastro > * {
		scroll-snap-align: start;
	}

	/* Nel nastro le tessere tornano alte quanto il loro contenuto: una accanto
	   all'altra non si vedono, e allungarle lascerebbe un vuoto in fondo. */
	.wp-block-group.loyalty-blu__nastro > .loyalty-card {
		height: auto;
	}

	.wp-block-group.loyalty-blu__testo {
		padding-top: 0;
	}
}