/*
 * Modulo Slide eroe.
 *
 * Tutto quello che c'e' qui si comanda da quattro attributi sull'elemento
 * .pg-slide: data-pos, data-velo, data-h, data-testo. Nessuna classe da
 * ricordare, nessuna utility da scrivere a mano.
 *
 * IL PUNTO DEL MODULO: velo e posizione non sono due impostazioni, sono una.
 * Il gradiente e' costruito attorno a dove sta il testo, quindi spostando il
 * testo il velo si sposta con lui. Non esiste piu' lo stato in cui il testo sta
 * dove il velo non arriva — che e' come la terza slide della homepage e' finita
 * con il titolo a 1,69:1 su una foto chiara.
 *
 * QUANTO SCURO, e perche' proprio questi numeri. Col testo bianco serve 4,5:1
 * per il sottotitolo. Un velo nero ad alfa a su una foto bianca — il caso
 * peggiore — lascia 255*(1-a):
 *
 *     a .45  ->  140  ->  3,35:1   non basta da solo
 *     a .55  ->  114  ->  4,76:1   minimo
 *     a .62  ->   97  ->  6,00:1   medio, quello predefinito
 *     a .74  ->   71  ->  9,23:1   forte
 *
 * Per questo «leggero» e' etichettato nel pannello come adatto solo alle foto
 * gia' scure: da solo non garantisce niente.
 */

.pg-slide {
	/* Intensita' del velo. La cambia data-velo, la usano tutti i gradienti. */
	--velo: .62;

	/* Nero sopra foto chiare, bianco sopra foto scure con testo scuro. */
	--velo-rgb: 0, 0, 0;

	position: relative;
	display: grid;
	min-height: 62svh;
}

.pg-slide > picture,
.pg-slide > picture img,
.pg-slide > img,
.pg-slide-velo {
	grid-area: 1 / 1;
}

.pg-slide > picture img,
.pg-slide > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Intensita' ─────────────────────────────────────────────────────────── */

.pg-slide[data-velo="leggero"] { --velo: .45; }
.pg-slide[data-velo="forte"]   { --velo: .74; }
.pg-slide[data-velo="nessuno"] .pg-slide-velo,
.pg-slide[data-velo="nessuno"]::after { display: none; }

/* ── Il velo ────────────────────────────────────────────────────────────── */

/*
 * Sta sull'elemento .pg-slide-velo e non su uno pseudo-elemento, ed e' una
 * scelta: gli pseudo-elementi non si vedono risalendo il DOM, quindi qualunque
 * strumento che misuri il contrasto leggendo l'albero non saprebbe che sotto al
 * testo c'e' un velo, e segnalerebbe fallimenti che non esistono. Con un
 * elemento vero il contrasto resta verificabile.
 *
 * Lo pseudo-elemento resta come rete: se una slide scritta a mano non ha il div
 * del velo, il testo bianco finirebbe direttamente sulla foto.
 */
.pg-slide-velo,
.pg-slide:not(:has(.pg-slide-velo))::after {
	content: '';
	grid-area: 1 / 1;
	pointer-events: none;

	/*
	 * MOBILE, per qualunque posizione: il testo attraversa quasi tutta la
	 * larghezza, quindi un gradiente orizzontale lascerebbe scoperto un bordo.
	 * Verticale, pieno per tutta la fascia centrale.
	 */
	background: linear-gradient(
		180deg,
		rgba(var(--velo-rgb), calc(var(--velo) - .20)) 0%,
		rgba(var(--velo-rgb), var(--velo)) 28%,
		rgba(var(--velo-rgb), var(--velo)) 80%,
		rgba(var(--velo-rgb), calc(var(--velo) - .16)) 100%
	);
}

@media (min-width: 992px) {

	/* Testo a sinistra: il velo e' pieno fin oltre meta', poi apre la foto. */
	.pg-slide .pg-slide-velo,
	.pg-slide:not(:has(.pg-slide-velo))::after {
		background: linear-gradient(
			90deg,
			rgba(var(--velo-rgb), calc(var(--velo) + .12)) 0%,
			rgba(var(--velo-rgb), calc(var(--velo) + .04)) 40%,
			rgba(var(--velo-rgb), calc(var(--velo) - .04)) 72%,
			rgba(var(--velo-rgb), .20) 90%,
			rgba(var(--velo-rgb), 0) 100%
		);
	}

	/* Testo al centro: pieno dal 12 all'88%, e sfuma solo ai bordi. */
	.pg-slide[data-pos="centro"] .pg-slide-velo,
	.pg-slide[data-pos="centro"]:not(:has(.pg-slide-velo))::after {
		background: linear-gradient(
			90deg,
			rgba(var(--velo-rgb), calc(var(--velo) - .18)) 0%,
			rgba(var(--velo-rgb), calc(var(--velo) + .04)) 12%,
			rgba(var(--velo-rgb), calc(var(--velo) + .04)) 88%,
			rgba(var(--velo-rgb), calc(var(--velo) - .18)) 100%
		);
	}

	/* Testo a destra: lo specchio di sinistra. */
	.pg-slide[data-pos="destra"] .pg-slide-velo,
	.pg-slide[data-pos="destra"]:not(:has(.pg-slide-velo))::after {
		background: linear-gradient(
			270deg,
			rgba(var(--velo-rgb), calc(var(--velo) + .12)) 0%,
			rgba(var(--velo-rgb), calc(var(--velo) + .04)) 40%,
			rgba(var(--velo-rgb), calc(var(--velo) - .04)) 72%,
			rgba(var(--velo-rgb), .20) 90%,
			rgba(var(--velo-rgb), 0) 100%
		);
	}
}

/* ── Posizione del testo ────────────────────────────────────────────────── */

.pg-slide-testo {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;                 /* sopra il velo */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding-block: 4rem;
}

.pg-slide[data-pos="centro"] .pg-slide-testo {
	align-items: center;
	text-align: center;
}

.pg-slide[data-pos="destra"] .pg-slide-testo {
	align-items: flex-end;
	text-align: right;
}

/* ── Altezza ────────────────────────────────────────────────────────────── */

/*
 * svh e non vh: su mobile vh comprende la barra del browser, che poi sparisce,
 * e la prima schermata risulta piu' alta del visibile.
 */
.pg-slide[data-h="bassa"] { min-height: 48svh; }
.pg-slide[data-h="piena"] { min-height: 92svh; }

/* ── Colore del testo ───────────────────────────────────────────────────── */

.pg-slide-testo,
.pg-slide-titolo { color: #fff; }

.pg-slide-sotto { color: rgba(255, 255, 255, .88); }

/*
 * Testo scuro: cambia anche il velo, che diventa bianco. Un velo nero sotto un
 * testo scuro peggiorerebbe il contrasto invece di migliorarlo — e' l'errore
 * che questa opzione esiste per non permettere.
 */
.pg-slide[data-testo="scuro"] {
	--velo-rgb: 255, 255, 255;
	--velo: .70;
}

.pg-slide[data-testo="scuro"] .pg-slide-testo,
.pg-slide[data-testo="scuro"] .pg-slide-titolo { color: #14181C; }

.pg-slide[data-testo="scuro"] .pg-slide-sotto  { color: #3A4149; }

/* ── Tipografia della slide ─────────────────────────────────────────────── */

/*
 * Sta qui e non nel foglio del tema perche' il modulo possiede la slide per
 * intero. Averla in due posti significa vederla divergere: e' esattamente il
 * problema che questo modulo esiste per chiudere.
 */

.pg-slide-titolo {
	max-width: 18ch;
	margin: 0 0 .6rem;
	font-size: clamp(30px, 5vw, 54px);
	font-weight: 800;
	line-height: 1.05;
}

.pg-slide[data-pos="centro"] .pg-slide-titolo { max-width: 24ch; }

.pg-slide-sotto {
	max-width: 46ch;
	margin: 0 0 1.5rem;
	font-size: clamp(15px, 1.6vw, 19px);
}