/**
 * La selezione proprietaria — tre diapositive che scorrono di lato mentre la
 * pagina scende.
 *
 * Il modo di leggerla: la sezione è alta più schermate, il contenitore interno
 * resta appiccicato in alto per tutta la loro altezza e la traccia — larga una
 * schermata per diapositiva — viene traslata dal modulo `selezione-pin.js` in
 * proporzione a quanto si è scesi. Chi scrolla in verticale vede scorrere in
 * orizzontale.
 *
 * L'impaginazione della singola diapositiva vive fuori da quel meccanismo: è la
 * stessa a schermo largo e stretto, e sotto ai 900px — o senza JavaScript — le
 * tre diapositive tornano a essere tre sezioni impilate.
 */

.selezione {
	position: relative;
	counter-reset: diapositiva;
}

/* --- Impaginazione della diapositiva ----------------------------------
   Il passo verticale è quello di una sezione qualunque: vale da impilate, e
   l'aggancio più sotto lo azzera perché lì la diapositiva è alta una
   schermata. Sta prima di quelle regole apposta, per farsi scavalcare. */

.selezione__slide {
	padding-block: clamp( 64px, 8vw, 120px );
}

/* Il passo fra le diapositive è il loro margine interno, non il blockGap del
   gruppo che le contiene: da impilate i due si sommerebbero e lo stacco
   sarebbe di 24px più alto di quello del riferimento. */
.wp-block-group.selezione__track > * + * {
	margin-block-start: 0;
}

.selezione__inner {
	max-width: var(--wp--custom--layout--frame);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50);
}

.selezione__card {
	display: grid;
	/* `minmax(0, 1fr)` e non `1fr`: la misura minima di default è il contenuto,
	   e la composizione di destra spingerebbe la sua colonna oltre la metà. */
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: clamp( 40px, 5vw, 80px );
	align-items: center;
}

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

.selezione__copy {
	min-width: 0;
}

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

.selezione__title {
	margin: 0 0 24px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.selezione__lede {
	margin: 0 0 24px;
	font-weight: 700;
	line-height: 1.4;
}

.selezione__body {
	margin: 0;
	line-height: 1.7;
	overflow-wrap: break-word;
}

.selezione__body strong {
	font-weight: 700;
}

/* --- La composizione di destra ----------------------------------------
   La fotografia sta a sinistra della colonna e il numerone le cresce accanto,
   sbordando verso il bordo della diapositiva: per questo la colonna non taglia
   nulla e l'allineamento è all'inizio, non al centro. */

.selezione__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: clamp( 420px, 50vw, 640px );
}

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

/* Il numero non è testo da leggere ma la posizione della diapositiva nella
   fila: è uno pseudo-elemento con un contatore, quindi resta fuori dall'albero
   di accessibilità e si rinumera da sé quando se ne aggiunge una. */
.selezione__slide {
	counter-increment: diapositiva;
}

.selezione__visual::before {
	content: counter( diapositiva );
	position: absolute;
	top: 35%;
	/* Lo scarto è una frazione della tela del disegno e non della finestra: il
	   corpo del numero si ferma a 600px, quindi oltre i 1920 anche il suo
	   sconfinamento deve smettere di crescere, o il numero si stacca dal
	   prodotto invece di stargli dietro. */
	right: calc( -0.06 * var(--wp--custom--layout--canvas) );
	z-index: 1;
	transform: translateY( -50% );
	font-size: clamp( 280px, 38vw, 600px );
	font-weight: 700;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: var(--wp--preset--color--rosso);
	pointer-events: none;
}

.selezione__product {
	position: relative;
	z-index: 2;
	width: clamp( 360px, 44vw, 600px );
	margin: 0;
}

.selezione__product img {
	display: block;
	width: 100%;
	height: auto;
}

/* La tazzina è l'unica posata su una superficie: l'ombra la appoggia al
   bianco invece di lasciarla sospesa. */
.selezione__product--ombra img {
	filter: drop-shadow( 0 28px 36px rgba( 0, 0, 0, 0.28 ) );
}

.selezione__beans {
	position: absolute;
	z-index: 3;
	margin: 0;
	pointer-events: none;
}

.selezione__beans img {
	display: block;
	width: 100%;
	height: auto;
}

.selezione__beans--tl {
	top: calc( -4% + 30px );
	left: calc( -4% + 20px );
	width: clamp( 60px, 7vw, 100px );
}

.selezione__beans--br {
	right: -4%;
	bottom: -4%;
	width: clamp( 110px, 13vw, 180px );
}

/* --- Il meccanismo dell'aggancio ---------------------------------------
   Vale solo dove c'è JavaScript e da 901px in su. Senza JavaScript la traccia
   resterebbe larga tre schermate dentro a un contenitore che taglia: si
   vedrebbe la prima diapositiva e le altre due sarebbero irraggiungibili.
   Sotto ai 901px il riferimento stesso lo disattiva. */

@media ( scripting: enabled ) and ( min-width: 901px ) {
	/* Tre diapositive per 100vh l'una, più i 70vh di sosta finale che tengono
	   ferma l'ultima prima che la sezione si sganci: è l'altezza che il modulo
	   ricalcola dal numero vero di diapositive. Il valore qui è la stessa
	   formula scritta per quante ne porta il pattern, così la sezione ha la sua
	   altezza già al primo fotogramma e la pagina non salta quando il modulo
	   entra. */
	.selezione {
		height: 370vh;
	}

	.selezione__pin {
		position: sticky;
		top: 0;
		height: 100vh;
		overflow: hidden;
	}

	.selezione__track {
		display: flex;
		width: 300vw;
		height: 100%;
		will-change: transform;
	}

	.selezione__slide {
		flex: 0 0 100vw;
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		padding: 0;
	}

	.selezione__slide .selezione__inner {
		width: 100%;
	}

	/* --- Entrate in scena ---------------------------------------------
	   Ogni pezzo entra per conto suo quando la sua diapositiva arriva a
	   fuoco: è il modulo a mettere `is-active`, una volta sola. */

	.selezione__copy {
		opacity: 0;
		transform: translateY( 16px );
		transition: opacity 0.3s ease-out, transform 0.3s ease-out;
	}

	.selezione__slide.is-active .selezione__copy {
		opacity: 1;
		transform: translateY( 0 );
		transition-delay: 0.04s;
	}

	.selezione__product {
		opacity: 0;
		transform: scale( 0.92 );
		transition: opacity 0.35s ease-out, transform 0.35s ease-out;
	}

	.selezione__slide.is-active .selezione__product {
		opacity: 1;
		transform: scale( 1 );
		transition-delay: 0.1s;
	}

	/* Il numero entra da destra: la traslazione verticale che lo centra va
	   ripetuta, altrimenti la nuova `transform` la cancella. */
	.selezione__visual::before {
		opacity: 0;
		transform: translateY( -50% ) translateX( 60px );
		transition: opacity 0.4s ease-out, transform 0.4s ease-out;
	}

	.selezione__slide.is-active .selezione__visual::before {
		opacity: 1;
		transform: translateY( -50% ) translateX( 0 );
		transition-delay: 0.18s;
	}
}

/* --- Impilate ----------------------------------------------------------
   Sotto ai 901px, e ovunque non ci sia JavaScript, le tre diapositive sono
   tre sezioni una sotto l'altra. Non serve disfare niente: le regole
   dell'aggancio non sono mai state applicate. */

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

	/* A colonna singola la fotografia va sopra al testo: è lei a dire di quale
	   delle tre si sta parlando, e sotto a un paragrafo lungo arriverebbe
	   quando si è già scorso oltre.

	   `order` e non un altro ordine nel documento: là il titolo deve restare il
	   primo, perché è quello che apre la diapositiva a chi la ascolta o la
	   percorre da tastiera. Lo scambio non nasconde niente a nessuno — la
	   composizione è decorativa, la sua immagine ha il testo alternativo
	   vuoto. */
	.selezione__visual {
		order: -1;
	}

	/* A schermo largo la composizione è una colonna a metà pagina, quindi il
	   numerone scavalca la fotografia e i chicchi stanno ai suoi angoli.
	   Stringendo la colonna alla larghezza della sola fotografia quel rapporto
	   si conserva, e da lì si rimpicciolisce tutto l'insieme in un colpo. */
	.selezione__visual {
		width: fit-content;
		max-width: 100%;
		min-height: 0;
		margin-inline: auto;
		zoom: 0.66;
	}

	/* I chicchi lasciano gli angoli e si centrano sui due bordi: agli angoli
	   di una composizione stretta uscirebbero dallo schermo. */
	.selezione__beans--tl {
		top: -16px;
		right: auto;
		left: 50%;
		transform: translateX( -50% );
	}

	.selezione__beans--br {
		right: auto;
		bottom: -16px;
		left: 50%;
		transform: translateX( -50% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.selezione__copy,
	.selezione__product,
	.selezione__visual::before {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Il numero perde la transizione ma non la centratura. */
	.selezione__visual::before {
		transform: translateY( -50% );
	}
}