/**
 * Loyalty — come funziona: foto a sinistra, pannello cremisi a destra.
 *
 * Le quote vengono da `FASE2_pagina_loyalty.ai`. Questa fascia il PDF la porta
 * appiattita in un raster — i filtri del pannello obbligano poppler a
 * rasterizzare — quindi non ci sono tracciati da misurare: le quote sono prese
 * dal rendering a 72 dpi, dove un pixel vale un punto della tavola.
 *
 * Nella tavola la fascia è 1920 × 1228: la foto arriva a 956 (il 49,8%), il
 * testo del pannello sta fra 1083 e 1790. I corpi sono 68 per il titolo, 32
 * per l'occhiello e i due passaggi, 24 per il testo; il tema li rende coi suoi
 * preset al fattore consueto 0,772 — 60, 24 e 19 — e le distanze verticali qui
 * sotto sono le distanze fra basi della tavola riportate con quel fattore.
 */

.funziona {
	position: relative;
	display: grid;
	/* 956 su 1920: la foto tiene la metà scarsa, il pannello quella buona. */
	grid-template-columns: 49.8% 1fr;
	align-items: stretch;

	/* Il disco con le mani sconfina sotto, nella fascia che segue. */
	overflow: visible;
}

.funziona > * {
	margin-block: 0;
}

/* --- La fotografia ------------------------------------------------------ */

/* Nella tavola la foto è più stretta e più alta di come cade qui — il pannello
   accanto detta l'altezza — quindi si ritaglia invece di deformarsi.

   L'immagine è tolta dal flusso: lasciata dentro, la sua altezza naturale
   entrava nel calcolo della riga della griglia e allungava la fascia di un
   centinaio di pixel oltre al pannello. */
.funziona__media {
	position: relative;
	margin: 0;
	align-self: stretch;
	overflow: hidden;
}

.funziona__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Il pannello cremisi ------------------------------------------------- */

/* Rientro del testo: 127 punti su un pannello largo 964, cioè il 13,2%.
   In alto 92px portano la base del titolo dove sta nella tavola; in basso ne
   restano 161, che è lo spazio generoso del disegno sotto all'ultima riga. */
.wp-block-group.funziona__panel {
	padding: 91px 13.2% 161px;
}

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

/* La colonna di testo della tavola è 707 punti a corpo 24: 29,5 em. Qui il
   corpo è 19, e la stessa misura in em tiene gli stessi a capo. Vale sul testo
   corrente: titolo e occhiello hanno un corpo loro, e la stessa misura in em
   darebbe una colonna diversa. */
.funziona__step,
.funziona__note {
	max-width: 29.5em;
}

.funziona__title {
	margin: 0;
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: -0.01em;
	/* Il titolo è più grande del testo: la sua misura in em vale meno. */
	max-width: none;
}

.funziona__title strong {
	font-weight: 700;
}

/* Fra la base del titolo e quella dell'occhiello corrono 128 punti nella
   tavola, che qui valgono 99: tolte le due mezze interlinee restano 64. */
.wp-block-group.funziona__panel > .funziona__lede {
	margin-top: 65px;
	font-weight: 700;
	/* 42 di interlinea su un corpo di 32. */
	line-height: 1.3125;
}

/* Fra l'ultima riga dell'occhiello e il primo passaggio: 77 punti → 59. */
.wp-block-group.funziona__panel > .funziona__step-title {
	margin-top: 29px;
	font-weight: 700;
	line-height: 1.25;
}

/* Il testo del passaggio sta attaccato al suo titolo: nella tavola fra le due
   basi corrono 37 punti, cioè poco più di un'interlinea. */
.wp-block-group.funziona__panel > .funziona__step {
	margin-top: 0;
	/* 35 di interlinea su un corpo di 24. */
	line-height: 1.458;
}

/* Il secondo passaggio stacca dal testo del primo: 84 punti → 65. */
.wp-block-group.funziona__panel > .funziona__step + .funziona__step-title {
	margin-top: 34px;
}

/* Il filo: nella tavola è lungo quanto la colonna di testo, sabbia e sottile. */
.wp-block-separator.funziona__rule {
	margin: 22px 0 0;
	width: 100%;
	border: 0;
	border-top: 1px solid color-mix( in srgb, var(--wp--preset--color--gold) 55%, transparent );
	opacity: 1;
	/* Lungo quanto la colonna di testo: 29,5 em del corpo del testo, non del
	   suo, che è quello ereditato dalla sezione. */
	max-width: 560px;
}

.wp-block-group.funziona__panel > .funziona__note {
	margin-top: 29px;
	line-height: 1.458;
}

/* «eccezioni» apre la stessa tendina dei tre motivi — lo stile sta in
   `eccezioni.css` — e qui prende la tinta del pannello. Il paragrafo fa da
   riferimento alla tendina sul taglio stretto. */
.funziona__note {
	--eccezioni-tinta: var(--wp--preset--color--gold);

	position: relative;
}

/* --- Il disco con le mani ------------------------------------------------ */

/* Nella tavola è un cerchio di 285 punti col disegno delle mani in cremisi su
   fondo sabbia, appoggiato sull'angolo basso della foto e sconfinante nella
   fascia che segue. L'immagine è il ritaglio quadrato del cerchio: il bordo
   tondo lo fa il CSS. */
.funziona__disc {
	position: absolute;
	/* Quote della tavola in frazione della tela, non della finestra. Il disco
	   nel disegno è 285 punti su 1920, e con le frazioni prese sulla finestra
	   su un monitor da 3124 diventava largo 462 — un disco più alto di metà
	   pannello — e scendeva 278 pixel nella fascia sotto invece di 171.

	   L'angolo a cui è appoggiato non si sposta, perché sia il disco sia la
	   fotografia partono dal bordo sinistro della pagina: sopra la tela restano
	   ferme le tre misure, sotto il conto è identico a prima. */
	left: calc( 0.0807 * var(--wp--custom--layout--canvas) );
	bottom: calc( -0.089 * var(--wp--custom--layout--canvas) );
	width: calc( 0.148 * var(--wp--custom--layout--canvas) );
	margin: 0;
	z-index: 2;
	pointer-events: none;
}

.funziona__disc img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 50%;
}

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

@media ( max-width: 900px ) {
	.funziona {
		grid-template-columns: 1fr;
	}

	/* A colonna singola la foto non ha più un pannello accanto che le detti
	   l'altezza: gliela dà il taglio del disegno, che è verticale. */
	.funziona__media {
		aspect-ratio: 4 / 3;
	}

	.wp-block-group.funziona__panel {
		padding: clamp( 40px, 10vw, 72px ) clamp( 20px, 6vw, 40px ) clamp( 72px, 16vw, 120px );
	}

	.funziona__step,
	.funziona__note,
	.wp-block-separator.funziona__rule {
		max-width: none;
	}

	.funziona__disc {
		left: auto;
		right: clamp( 16px, 5vw, 40px );
		bottom: -60px;
		width: clamp( 120px, 26vw, 170px );
	}
}