/**
 * ZONA 2 DELLA HOME - il carosello delle sei categorie madre.
 *
 * S-Z2, 6/9/2026. Vestito nuovo per `template-parts/home/categorie.php`,
 * riscritto da zero: prima qui c'era la griglia di sei card a sfumatura
 * (classi `.categorie__*`, ancora vive dentro `cerca.css` finche' quel
 * foglio non viene ripulito da chi lo possiede). Questo file usa SOLO
 * classi nuove (`.carosello__*`): zero dipendenza da `cerca.css`, che resta
 * un file di un'altra squadra.
 *
 * Si accoda da solo DOPO `radar-cerca` (-> `templates/cerca.php`, il ciclo
 * `wp_enqueue_style` su `home-<zona>.css`): eredita i token globali di
 * `ossatura.css`/`radar.css` (`--inchiostro`, `--su-inchiostro`, `--oro`,
 * `--marchio-chiaro`...), gia' a tre stati (`color-scheme` + `light-dark()`,
 * -> `radar.css` sezione tema) - non serve una seconda coppia chiaro/scuro
 * locale come fa `.cerca`: qui non c'e' nessuna foto giorno/notte da
 * scambiare in base a `data-tema-eff`, solo una fascia scura come il resto
 * del tema.
 *
 * PERCHE' IL TESTO CAMBIA COLORE FRA LASTRA-FOTO E LASTRA-TINTA
 *
 * Con la foto il fondo e' sempre scuro (foto + velo): il testo chiaro
 * `--su-inchiostro` (16,79:1 su `--inchiostro`, verificato in
 * `ossatura.css`) si legge sempre.
 *
 * Senza foto la lastra si veste del colore del pin - `colore_scuro`, che
 * `radar-core/data/pin.php` dichiara pastello apposta per un fondo
 * scuro (bianco non ci arriva mai). Il bianco fisso ci sparirebbe sopra:
 * il testo usa `su_scuro`, la STESSA coppia che `pin.php` ha gia'
 * misurato contro `colore_scuro` (6,69-8,90:1 sulle sei categorie) - non
 * una seconda idea di contrasto, la stessa fonte.
 *
 * `--carosello-testo` esiste SOLO sulla lastra senza foto (impostata
 * in linea dal PHP): `var(--carosello-testo, var(--su-inchiostro))`
 * su `.carosello__corpo` la applica una volta sola, e ogni figlio la
 * eredita - sulla lastra-foto la variabile non c'e', e il fallback
 * riporta al bianco fisso da solo.
 *
 * @package radar-theme
 */

.carosello,
.carosello__pista,
.carosello__lastra {
	margin: 0;
	padding: 0;
	list-style: none;
}

.carosello {
	position: relative;
	background: var(--inchiostro);
}

.carosello__pista {
	display: flex;
	height: clamp(480px, 56.25vw, 810px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.carosello__pista::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.carosello__pista {
		scroll-behavior: auto;
	}
}

@media (max-width: 679px) {
	.carosello__pista {
		height: auto;
		min-height: 640px;
	}
}

.carosello__lastra {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	/* `radar.css` mette `p, li, dd { max-width: 68ch }` per la prosa: una
	   lastra non è un paragrafo, e senza questa riga la regola generica
	   clampava ogni `<li>` a 68ch (~666px) invece dei 1425 della pista —
	   stesso opt-out già in uso altrove nel tema (`.termini li`, `.porte li`,
	   → `radar.css`). */
	max-width: none;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	isolation: isolate;
}

@media (max-width: 679px) {
	.carosello__lastra {
		flex-basis: 100%;
		min-height: 640px;
	}
}

/*
 * 🚨 7/9/2026 — LA FOTO DEVE MUOVERSI, NON SOLO STARE.
 *
 * Ordine di Gabriele, prima schermata: *«questa slide la devi animare, la
 * foto deve essere adattata alla dimensione e deve scorrere lievemente»* —
 * il motivo che dà lui: così chi legge ha il tempo di leggere e il sito non
 * sembra fermo. «Adattata» c'era già (`object-fit: cover`); «scorrere» no.
 *
 * 👉 Una panoramica lenta: dodici secondi, dallo `scale(1.06)` fermo a
 * `scale(1.15)` spostato di un paio di punti. È **solo `transform`**, cioè
 * lavoro della scheda grafica: nessun ridisegno del testo sopra.
 *
 * ⚠ Si muove **una lastra sola**, quella in vista: la classe `--viva` la
 * mette lo script in coda alla sezione, dentro `soloLaVisibile()`, che
 * l'indice della lastra attiva lo calcola già. Sei immagini da 1600 px che
 * si trasformano insieme sono sei livelli in memoria e batteria buttata per
 * cinque che nessuno guarda. Ed è anche il motivo per cui `will-change` sta
 * **qui dentro** e non sulla foto in generale.
 * ⚠ Il fermo di partenza è già `scale(1.06)`: così lo spostamento non
 * scopre mai un bordo, e la lastra senza JavaScript resta piena com'era.
 * ⚠ `prefers-reduced-motion`: lo script esce alla prima riga e la classe
 * non arriva mai — quindi qui basterebbe niente. La regola c'è lo stesso,
 * perché la classe potrebbe arrivare da un'altra strada domani, e una
 * animazione che ignora quella preferenza non è una svista da poco.
 */
/*
 * 🚨 8/9/2026 — LA BARRA NERA A DESTRA: `object-fit` SU UN `<picture>`
 * NON FA NIENTE.
 *
 * Segnalato da Gabriele («questa slide non deve avere mai una barra nera sulla
 * destra») e riprodotto: a 1903 px di finestra la foto si ferma a ~1645 e il
 * resto è il fondo scuro della sezione, contatore «04/06» compreso.
 *
 * La causa: la classe è sul **`<picture>`**, e un `<picture>` non è un elemento
 * rimpiazzato — `object-fit` e `height: 100%` su di lui non toccano l'`<img>`
 * che ha dentro. L'immagine restava alla sua misura naturale, **1600×1000**:
 * sotto i 1600 px di finestra sbordava e sembrava tutto a posto, sopra i 1600
 * lasciava scoperta la differenza. Cioè il difetto **non si vedeva alle
 * larghezze che provavamo** e si vedeva sempre sul monitor di Gabriele.
 * ⚠ Ed è il secondo difetto in due giorni che si nasconde in una larghezza
 * che nessuno misurava (il primo: `cattura-zone.py` che a «375» misurava 500).
 *
 * 👉 Il `<picture>` resta il riquadro che si sposta (la panoramica è sua, ed
 * è un solo livello composto); l'`<img>` dentro riempie il riquadro ed è lui a
 * fare il `cover`. Le due cose non si possono scambiare: `object-fit` vuole
 * l'immagine.
 */
.carosello__foto {
	position: absolute;
	inset: 0;
	transform: scale(1.06);
}

.carosello__foto img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;   /* `radar.css` mette `img { max-width: 100% }` */
	object-fit: cover;
}

@keyframes carosello-panoramica {
	from { transform: scale(1.06) translate3d(0, 0, 0); }
	to   { transform: scale(1.15) translate3d(-2%, -1.5%, 0); }
}

/* 🚨 8/9/2026 — IL TESTO DA UNA PARTE, LA FOTO DALL'ALTRA.
   Gabriele: «quando cambi slide, gioca un po' con gli effetti: il testo va da
   una parte la foto dall'altra! Se una foto ha l'effetto zoom in, l'altra
   zoom out».
   · il testo entra da **sinistra** e si scopre (0,6 s);
   · la foto si muove nel verso **opposto**, e alterna: le lastre dispari
     stringono (zoom in), le pari allargano (zoom out). Così due lastre di
     fila non fanno mai lo stesso movimento.
   ⚠ Riparte a ogni cambio perché la classe `--viva` si toglie e si rimette
   (`categorie.php`, `soloLaVisibile()`): nessun timer in più da tenere.
   ⚠ Solo `transform` e `opacity`, i due che la scheda grafica fa da sola.
   ⚠ Con «riduci movimento» la classe non arriva mai e non si muove niente. */
.carosello__lastra--viva .carosello__foto {
	will-change: transform;
	animation: carosello-panoramica 12s ease-out both;
}

.carosello__lastra--viva:nth-child(even) .carosello__foto {
	animation-name: carosello-panoramica-indietro;
}

@keyframes carosello-panoramica-indietro {
	from { transform: scale(1.16) translate3d(-2%, -1.5%, 0); }
	to   { transform: scale(1.06) translate3d(0, 0, 0); }
}

/* Il testo: entra da sinistra mentre la foto va dall'altra parte. */
.carosello__lastra--viva .carosello__corpo {
	animation: carosello-testo .62s cubic-bezier(.2, .75, .25, 1) both;
}

@keyframes carosello-testo {
	from { opacity: 0; transform: translate3d(-26px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

/* Sulle lastre pari il testo entra da destra: il verso si scambia insieme a
   quello della foto, o l'alternanza si vedrebbe a metà. */
.carosello__lastra--viva:nth-child(even) .carosello__corpo {
	animation-name: carosello-testo-destra;
}

@keyframes carosello-testo-destra {
	from { opacity: 0; transform: translate3d(26px, 0, 0); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.carosello__lastra--viva .carosello__corpo,
	.carosello__lastra--viva:nth-child(even) .carosello__corpo {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.carosello__lastra--viva .carosello__foto {
		animation: none;
		will-change: auto;
	}
}

.carosello__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(10, 8, 6, .82) 0%, rgba(10, 8, 6, .40) 46%, rgba(10, 8, 6, .18) 100%),
		linear-gradient(100deg, rgba(10, 8, 6, .55) 0%, rgba(10, 8, 6, .20) 55%, rgba(10, 8, 6, 0) 78%);
}

.carosello__lastra--tinta {
	background: var(--carosello-tinta-scuro, var(--inchiostro));
}

.carosello__filigrana {
	position: absolute;
	right: clamp(-4vw, -1vw, 2vw);
	bottom: clamp(-14vw, -6vw, -2vw);
	font: 800 clamp(14rem, 34vw, 26rem)/1 var(--font-titolo);
	color: var(--carosello-testo, var(--inchiostro));
	opacity: .16;
	pointer-events: none;
	user-select: none;
}

.carosello__corpo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: inherit;
	padding: clamp(20px, 3.2vw, 46px) clamp(20px, 4vw, 60px) clamp(16px, 2.4vw, 30px);
	gap: clamp(14px, 2vh, 24px);
	color: var(--carosello-testo, var(--su-inchiostro));
	font-family: var(--font);
}

@media (max-width: 679px) {
	.carosello__corpo {
		padding: 20px 18px 16px;
		gap: 16px;
	}
}

.carosello__riga-alta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}

.carosello__occhiello {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font: 600 13px/1 var(--font);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.carosello__filetto {
	width: 22px;
	height: 1px;
	background: currentColor;
	opacity: .7;
}

.carosello__contatore {
	margin: 0;
	font: 600 14px/1 var(--font);
	font-variant-numeric: tabular-nums;
	opacity: .9;
}

.carosello__solo-lettori {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.carosello__presentazione {
	margin-top: auto;
	max-width: 46rem;
}

/* 🚨 RADAR-4, 7/9/2026 — SENZA FOTO IL TESTO NON STA IN FONDO.
   `margin-top: auto` è giusto sulla lastra CON foto: il testo poggia sul
   bordo basso e sopra c'è l'immagine, come nel disegno. Sulla lastra a
   tinta piatta sopra non c'è niente, e a 375 il 40% in alto restava un
   campo di colore vuoto (guardato, non dedotto). Qui il blocco si centra:
   la lastra si legge come una tessera, non come una foto che non ha
   caricato.
   ⚠ Resta una rinuncia, non una soluzione: la zona del disegno è una foto
   a tutta tela, e le foto vere delle sei categorie **non esistono** (quelle
   del disegno sono generate e non sono Cosenza, `_disegno/immagini/LEGGIMI.md`).
   È scritto nel PIANO come cosa che aspetta Gabriele. */
.carosello__lastra--tinta {
	/* Il `min-height: 640px` è la misura giusta per una lastra CON foto:
	   serve alla foto per esserci. Sulla tinta piatta lascia un campo di
	   colore vuoto — a 375 il 40% in alto, guardato e non dedotto. La
	   lastra a tinta prende l'altezza del suo contenuto, con un fondo che
	   la tiene comunque una tessera e non un rigo. */
	min-height: 460px;
}

@media (min-width: 680px) {
	.carosello__lastra--tinta { min-height: 540px; }
}

/* L'altezza vera non la dava la lastra ma la PISTA: altezza fissa e
   `overflow-y: hidden`, cioè un ritaglio fotografico. Senza foto non c'è
   niente da ritagliare, e il ritaglio tagliava le linguette (a 768 la
   lastra faceva 540 dentro una pista di 480 — trovato dal cancello).
   La classe la mette il PHP, che sa già se le foto ci sono: niente `:has()`,
   che qui vorrebbe dire tagliare le linguette dove non è supportato. */
.carosello__pista--senza-foto {
	/* `height: auto` da solo faceva scendere la zona a 580 px a 1440, e gli
	   810 del disegno erano l'unica misura di questa zona che combaciava al
	   pixel. Quindi: **altezza minima** uguale a quella di prima, e crescita
	   libera oltre. A 1440 vince il disegno (810 > 580 di testo), a 768 e a
	   375 vince il testo (540 e 536 > 480), e niente si taglia più. */
	height: auto;
	min-height: clamp(480px, 56.25vw, 810px);
	overflow-y: visible;
}

.carosello__etichetta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 7px 16px 7px 9px;
	border-radius: 999px;
	font: 600 14px/1 var(--font);
}

.carosello__lastra--foto .carosello__etichetta {
	background: rgba(12, 10, 9, .55);
	border: 1px solid var(--inchiostro-bordo);
	color: var(--su-inchiostro);
}

.carosello__lastra--tinta .carosello__etichetta {
	background: rgba(255, 255, 255, .34);
	border: 1px solid rgba(23, 17, 14, .18);
	color: var(--carosello-testo, var(--inchiostro));
}

.carosello__segno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--carosello-pl, 26px);
	height: var(--carosello-pa, 26px);
	flex: none;
	background: var(--carosello-tinta-scuro, var(--su-inchiostro));
	color: var(--carosello-su-pin-scuro, var(--inchiostro));
	font: 700 12px/1 var(--font);
	border-radius: 50%;
}

.carosello__segno[data-forma="quadrato"]  { border-radius: 6px; }
.carosello__segno[data-forma="rombo"]     { border-radius: 5px; transform: rotate(45deg); }
.carosello__segno[data-forma="rombo"] > * { display: inline-block; transform: rotate(-45deg); }
.carosello__segno[data-forma="esagono"]   { border-radius: 0; clip-path: polygon(50% 0, 100% 27%, 100% 73%, 50% 100%, 0 73%, 0 27%); }
.carosello__segno[data-forma="pastiglia"] { border-radius: 999px; }
.carosello__segno[data-forma="goccia"]    { border-radius: 13px 5px; }

.carosello__titolo {
	margin: 0 0 14px;
	max-width: 13ch;
	font: 400 clamp(2rem, 4.6vw, 4.6rem)/1.04 var(--font-titolo);
	letter-spacing: -.01em;
}

.carosello__lastra--foto .carosello__titolo em {
	font-style: italic;
	color: var(--marchio-chiaro);
}

.carosello__lastra--tinta .carosello__titolo em {
	font-style: italic;
}

.carosello__testo {
	margin: 0 0 20px;
	max-width: 38em;
	font: 400 clamp(15px, 1.05vw, 17px)/1.55 var(--font);
}

.carosello__lastra--foto .carosello__testo {
	color: var(--su-inchiostro-soft);
}

/* La lastra «servizi» — S-CAROSELLO, 7/9/2026: i mestieri veri
   (radar_servizio, ramo «Lavori e mestieri») al posto della descrizione
   generica, → nota in `categorie.php`. Stesso disegno a pillola di
   `.carosello__linguetta` (sono la stessa famiglia visiva) ma con un
   secondo giro di sfondo per il numero, per non confonderle con le
   linguette di navigazione poco più sotto nel piede. */
.carosello__mestieri {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	max-width: 46rem;
}

.carosello__mestieri a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 34px;
	padding: 0 8px 0 14px;
	border-radius: 999px;
	font: 500 13px/1 var(--font);
	text-decoration: none;
	transition: transform .15s;
}

.carosello__mestieri a:hover,
.carosello__mestieri a:focus-visible {
	transform: translateY(-1px);
}

.carosello__mestieri span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	font: 700 11px/1 var(--font);
	font-variant-numeric: tabular-nums;
}

.carosello__lastra--foto .carosello__mestieri a {
	background: rgba(12, 10, 9, .5);
	border: 1px solid var(--inchiostro-bordo);
	color: var(--su-inchiostro);
}

.carosello__lastra--foto .carosello__mestieri span {
	background: rgba(255, 255, 255, .18);
}

.carosello__lastra--tinta .carosello__mestieri a {
	background: rgba(255, 255, 255, .34);
	border: 1px solid rgba(23, 17, 14, .18);
	color: var(--carosello-testo, var(--inchiostro));
}

.carosello__lastra--tinta .carosello__mestieri span {
	background: rgba(0, 0, 0, .12);
}

@media (max-width: 679px) {
	.carosello__mestieri a {
		min-height: 38px;
	}
}

/* 🚨 RADAR-4, 7/9/2026 — STESSO TAGLIO GIÀ VISTO IN TESTA AL FILE, VERSIONE
   NUOVA. La pista con la foto è un ritaglio a altezza fissa
   (`carosello__pista`, `overflow-y: hidden`): da 680 a 853px di larghezza
   quel ritaglio sta fermo al minimo del clamp, 480px — ed è lì che il piede
   (frecce/barra/linguette) della lastra «servizi» usciva dal ritaglio,
   **tagliato ma ancora raggiungibile da tastiera** (misurato con Chrome
   headless via CDP, non a occhio: a 768 il fondo del piede cadeva 31px
   sotto il bordo della pista). Sopra i 1024px il ritaglio è già abbastanza
   alto per le tre righe intere (verificato a 1440 con le catture reali) —
   sotto, si mostrano solo le prime otto voci: due righe piene, mai tre. */
@media (max-width: 1023px) {
	.carosello__mestieri li:nth-child(n + 9) {
		display: none;
	}
}

.carosello__riga-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: clamp(16px, 2.6vw, 36px);
}

.carosello__cifre {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.carosello__numero {
	font: 400 clamp(1.6rem, 2.2vw, 2.2rem)/1 var(--font-titolo);
	font-variant-numeric: tabular-nums;
}

.carosello__didascalia {
	font: 400 13px/1.3 var(--font);
	opacity: .85;
}

.carosello__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--su-inchiostro);
	color: var(--inchiostro);
	font: 600 15px/44px var(--font);
	text-decoration: none;
	white-space: nowrap;
}

.carosello__cta:hover {
	opacity: .88;
}

.carosello__piede {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
	flex-wrap: wrap;
	padding-top: clamp(10px, 1.4vw, 16px);
}

.carosello__frecce {
	display: flex;
	gap: 8px;
	flex: none;
}

.carosello__freccia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font: 400 19px/1 var(--font);
	text-decoration: none;
}

.carosello__lastra--foto .carosello__freccia {
	background: rgba(12, 10, 9, .5);
	border: 1px solid var(--inchiostro-bordo);
	color: var(--su-inchiostro);
}

.carosello__lastra--tinta .carosello__freccia {
	background: rgba(255, 255, 255, .38);
	border: 1px solid rgba(23, 17, 14, .18);
	color: var(--carosello-testo, var(--inchiostro));
}

.carosello__avanzamento {
	flex: 1 1 0;
	min-width: 100px;
	height: 3px;
	border-radius: 2px;
	overflow: hidden;
}

.carosello__lastra--foto .carosello__avanzamento {
	background: var(--inchiostro-bordo);
}

.carosello__lastra--tinta .carosello__avanzamento {
	background: rgba(23, 17, 14, .18);
}

/* 🚨 8/9/2026 — LA BARRA DIVENTA UN TIMER.

   Gabriele: «nella demo che ti avevo dato c'era anche un timer fatto da una
   barra che scorreva, per capire quando stava scattando alla foto successiva».
   Quella che c'era mostrava la POSIZIONE (lastra 4 di 6 = 66%): un'altra
   informazione, utile, ma non quella chiesta.

   👉 Sulla lastra viva la barra si riempie in 7 secondi — gli stessi
   dell'avanzamento automatico (`categorie.php`, `DURATA`) — e riparte da capo
   a ogni cambio, perché la classe `--viva` si toglie e si rimette.
   ⚠ `transform: scaleX()`, non `width`: la larghezza fa rifare
   l'impaginazione sessanta volte al secondo, la trasformazione no.
   ⚠ Sulle lastre ferme resta la posizione (lo `style` in linea del PHP): due
   informazioni diverse su due stati diversi, non due barre.
   ⚠ Se l'utente prende il comando l'avanzamento si ferma per sempre
   (`categorie.php`, `fermaPerSempre`): il JS mette `data-fermo` sulla pista e
   il timer sparisce. Una barra che continua a correre mentre niente scatta
   è una bugia. */
.carosello__lastra--viva .carosello__avanzamento span {
	width: 100%;
	transform-origin: left center;
	animation: carosello-tempo 7s linear both;
}

@keyframes carosello-tempo {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* ⚠ Due regole, non un selettore solo: una lista di selettori non può
   contenere una @media, e scritte insieme il browser le butta tutte e due
   in silenzio. */
[data-fermo] .carosello__lastra--viva .carosello__avanzamento span {
	animation: none;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.carosello__lastra--viva .carosello__avanzamento span {
		animation: none;
		transform: none;
	}
}

.carosello__avanzamento span {
	display: block;
	height: 100%;
	background: var(--oro);
}

.carosello__linguette {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.carosello__linguetta {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 13px;
	border-radius: 999px;
	font: 500 13px/1 var(--font);
	text-decoration: none;
}

.carosello__lastra--foto .carosello__linguetta {
	background: rgba(12, 10, 9, .5);
	border: 1px solid var(--inchiostro-bordo);
	color: var(--su-inchiostro);
}

.carosello__lastra--foto .carosello__linguetta--attiva {
	background: var(--su-inchiostro);
	border-color: var(--su-inchiostro);
	color: var(--inchiostro);
	font-weight: 700;
}

.carosello__lastra--tinta .carosello__linguetta {
	background: rgba(255, 255, 255, .34);
	border: 1px solid rgba(23, 17, 14, .18);
	color: var(--carosello-testo, var(--inchiostro));
}

.carosello__lastra--tinta .carosello__linguetta--attiva {
	background: var(--carosello-testo, var(--inchiostro));
	border-color: var(--carosello-testo, var(--inchiostro));
	color: var(--carosello-tinta-scuro, var(--su-inchiostro));
	font-weight: 700;
}

@media (max-width: 679px) {
	.carosello__linguette {
		width: 100%;
		order: 3;
	}
}

.carosello a:focus-visible {
	outline: 2px solid var(--oro);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   🚨 8/9/2026 — TUTTA LA LASTRA PORTA ALLA MAPPA FILTRATA.

   Gabriele: «se premo un link sulle slide, quel link mi deve portare alla mappa
   con i filtri impostati sulla base di quello che ho cliccato». Il bottone
   «Vedi sulla mappa» lo faceva già (`/mappa/?cat[]=affitto`, verificato: apre
   la mappa con la sola pillola Affitto accesa), ma era **l'unica** parte
   cliccabile: una lastra grande come lo schermo, con la sua foto e il suo
   titolo, che non risponde al clic sembra rotta.

   👉 Il collegamento si «stende» su tutta la lastra con uno pseudo-elemento.
   ⚠ Non si annida un `<a>` dentro l'altro né si mette un `onclick` sulla
   lastra: resta **un solo** collegamento nell'albero di accessibilità, con il
   suo nome, e chi va a tastiera trova una fermata sola invece di due.
   ⚠ Gli altri comandi della lastra (frecce, linguette, i mestieri) salgono
   sopra il velo steso: senza, sarebbero coperti e smetterebbero di funzionare.
   -------------------------------------------------------------------------- */
/* ⚠ `z-index: 3`, non 1: `.carosello__corpo` è già `position: relative` con
   `z-index: 2` (riga ~207), quindi un velo a 1 gli finiva **sotto** e il clic
   lo prendeva il corpo. Misurato con `elementFromPoint` al 72%/35% della
   lastra: rispondeva `DIV.carosello__corpo`. I comandi salgono a 4. */
.carosello__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* ⚠ IL BOTTONE NON DEVE ESSERE POSIZIONATO, o il velo si attacca a lui.
   Primo tentativo: gli avevo dato `position: relative` insieme agli altri
   comandi, e `inset: 0` sullo pseudo-elemento si è ancorato **al bottone**
   invece che alla lastra — il velo copriva 180×40 px e basta. Misurato con
   `elementFromPoint`: al 72%/35% rispondeva ancora `DIV.carosello__corpo`.
   Lasciandolo statico, lo pseudo si ancora al primo antenato posizionato, che
   è `.carosello__corpo` (relative, z-index 2): il velo copre tutta la lastra e
   gli altri comandi, che stanno dentro lo stesso contenitore a z-index 4, gli
   restano sopra. */
.carosello__cta {
	position: static;
}

.carosello__frecce,
.carosello__linguette,
.carosello__mestieri {
	position: relative;
	z-index: 4;
}