/**
 * Loyalty — fascia sabbia: 3 buoni motivi per attivarla ora.
 *
 * Le quote vengono da `FASE2_pagina_loyalty.ai` — il file è un PDF, quindi si
 * legge con `pdftocairo -svg` e si misura come qualunque altro export. Nella
 * tavola la fascia è larga 1917 e alta 779 (i 62 punti in cima al rettangolo
 * sabbia stanno sotto alla sezione precedente e non si vedono), il contenuto va
 * da 169,8 a 1810,6 — 1641 — e il tema lo porta nella colonna `alignwide` da
 * 1168: il fattore è 0,712.
 *
 * Le proporzioni interne — misura del disco, stacchi — restano in percentuale,
 * che non dipende dalla scala; le distanze verticali diventano `clamp` in px
 * come nel resto del tema.
 *
 * Il titolo fa eccezione: nella tavola è 70, che a questo fattore darebbe 50px,
 * ma è lo stesso corpo del titolo della sezione sopra — 72 — che il tema rende
 * con `page-title`. Fra tenere il rapporto interno alla sezione e tenere i due
 * titoli della pagina uguali fra loro, vince il secondo.
 */

.motivi {
	/* Nel disegno la fascia stacca 96 px sopra il primo disco e 113 sotto
	   l'ultimo, che sulla colonna del tema valgono 91 e 107. */
	padding-block: clamp( 48px, 5.4vw, 91px ) clamp( 56px, 6.3vw, 107px );
}

/* Titolo a sinistra e la prima voce accanto; le altre due sotto, una per
   colonna. Nel disegno lo stacco fra le due colonne è 79 su 1236, cioè il
   6,4% della colonna: in percentuale la griglia lo tiene a ogni larghezza. */
.wp-block-group.motivi__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	column-gap: clamp( 24px, 6.4%, 75px );
	row-gap: clamp( 28px, 4.3vw, 50px );
	align-items: center;
}

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

/* Peso Light con le parole forti in Bold: è lo stesso contrasto dei titoli
   della sezione sopra, ed è quello a fare il titolo, non la misura. */
.motivi__title {
	margin: 0;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.motivi__title strong {
	font-weight: 700;
}

/* --- Le tre voci -------------------------------------------------------- */

/* Disco e testo si allineano al centro: nel disegno il disco è più alto del
   testo che gli sta accanto, e sono i due centri a coincidere. */
.wp-block-group.motivi__item {
	display: flex;
	align-items: center;
	/* 46 px di stacco su una voce larga 578: l'8%. */
	gap: 8%;
}

/* Il disco col pittogramma: 162 px su una voce larga 578, cioè il 28%.
   Sta nel CSS perché è decorazione — il senso lo porta il titolo accanto. */
.motivi__item::before {
	content: "";
	flex: 0 0 28%;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--wp--preset--color--rosso);
	background-position: center;
	background-repeat: no-repeat;
}

/* Le tre misure vengono dal file del cliente: nel disegno il disco è 214,8 e i
   pittogrammi non sono grandi uguali — il QR riempie più della metà, gli altri
   due poco meno della metà. */
.motivi__item--qr::before {
	background-image: var(--cn-media-icona-qr);
	background-size: 58.2%;
	/* Nel disegno la mano col telefono sta 3,4 punti sotto al centro. */
	background-position: center 51.6%;
}

.motivi__item--monetine::before {
	background-image: var(--cn-media-icona-monetine);
	background-size: 45.7%;
}

.motivi__item--italia::before {
	background-image: var(--cn-media-icona-italia);
	background-size: 45.7% 53.7%;
}

.wp-block-group.motivi__testo {
	flex: 1 1 auto;
}

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

/* Dal pannello Carattere della tavola: il titolo di una voce è Montserrat
   Bold 33pt con interlinea 42 e tracking −25, il testo è SemiBold 24 con
   interlinea 36. I corpi arrivano dai preset del tema — `heading-compact` e
   `body-lg` — e qui restano interlinea e tracking.

   Fra la base del titolo e quella della prima riga di testo corrono 79,5
   punti, che sulla colonna del tema sono 56,6: tolte le due mezze interlinee
   restano 1,09 em di margine. */
.wp-block-group.motivi__testo > .motivi__title-item {
	margin: 0 0 1.09em;
	font-weight: 700;
	line-height: 1.27;
	letter-spacing: -0.025em;
}

/* La parola «eccezioni» e la sua tendina stanno in `eccezioni.css`: compaiono
   anche in "Come funziona". Qui resta solo la tinta del passaggio. */
.motivi__desc {
	--eccezioni-tinta: var(--wp--preset--color--rosso);

	/* Fa da riferimento alla tendina sul taglio stretto, dove non è più la
	   parola ad ancorarla ma il paragrafo. */
	position: relative;
	margin: 0;
	font-weight: 600;
	/* 36 di interlinea su un corpo di 24. */
	line-height: 1.5;
}

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

@media ( max-width: 900px ) {
	.motivi {
		padding-block: clamp( 44px, 11vw, 72px ) clamp( 48px, 12vw, 84px );
	}

	.wp-block-group.motivi__grid {
		grid-template-columns: 1fr;
		row-gap: clamp( 24px, 6vw, 40px );
	}

	/* A colonna singola la voce si allarga fino al testo, e un disco al 28%
	   diventava largo quanto mezza schermata: qui si ferma. */
	.motivi__item::before {
		flex-basis: min( 28%, 96px );
	}

	.wp-block-group.motivi__item {
		gap: clamp( 16px, 5%, 28px );
	}

	/* A colonna singola il titolo di una voce sta appiccicato al suo testo: lo
	   stacco della tavola è tarato su un titolo di una riga sola, e qui più
	   d'uno va a capo. Resta uguale per tutte e tre. */
	.wp-block-group.motivi__testo > .motivi__title-item {
		margin-bottom: 0.4em;
	}
}