/* LS Vertical Timeline
 *
 * Colonna verticale sovrapposta allo slider: una linea sottile con i pallini delle slide,
 * di cui quello attivo diventa un cerchio pieno con dentro il numero della slide.
 *
 * I mockup (slide1-8.png) danno l'intento visivo, non le misure definitive. Rapporti
 * ricavati da lì: pallino attivo circa il doppio di quello inattivo, linea sottilissima,
 * colonna alta circa l'86% dello slider. I valori qui sotto partono da quelle proporzioni
 * ma sono leggermente più generosi, perché 16px sono un bersaglio cliccabile scomodo.
 *
 * Sono tutti custom property: si tarano dal tema senza toccare questo file.
 *
 * I colori arrivano come custom property dalle impostazioni del plugin e restano
 * sovrascrivibili dal tema.
 */

/* Variabili condivise fra timeline e card.

   Vanno dichiarate su ENTRAMBI i selettori: .lsvt e .lsvt-cards sono due elementi
   fratelli dentro al container dello slider, non uno dentro l'altro, quindi le custom
   property dichiarate sull'uno non arrivano all'altro per ereditarietà. Lo stesso vale
   per lo stile inline generato dalle impostazioni, in class-lsvt-frontend.php. */
.lsvt,
.lsvt-cards {
	--lsvt-active: #3a9dcb;
	--lsvt-on-active: #fff;
	--lsvt-idle: rgba(255, 255, 255, .75);
	--lsvt-track: rgba(255, 255, 255, .35);

	/* I layer di LayerSlider stanno su z-index 102-106 e i suoi elementi di interfaccia
	   ancora più in alto. A z-index basso timeline e card finiscono dietro ai layer:
	   presenti nel DOM ma invisibili. */
	--lsvt-z: 1000;
}

.lsvt {
	--lsvt-offset: 3rem;

	/* Diametro del pallino attivo. Quelli inattivi sono lo stesso cerchio rimpicciolito
	   con una scala, così l'animazione è una sola transform invece di quattro proprietà.
	   La scala è senza unità perché in CSS non si può dividere per una lunghezza. */
	--lsvt-size: 20px;
	--lsvt-dot-scale: .5;

	/* Correzione ottica del numero dentro al pallino.

	   Con line-height 1 la scatola di testo è alta 1em e la linea di base cade a circa
	   0.75em dall'alto; le cifre, che non hanno discendenti, occupano più o meno da 0.05em
	   a 0.75em. Il loro centro visivo sta quindi circa 0.1em SOPRA il centro della
	   scatola, e centrare la scatola non basta: il numero sembra alto. Lo spazio dei
	   discendenti resta vuoto sotto.

	   Il valore giusto dipende dalle metriche del font, quindi è una variabile e non un
	   numero magico sepolto nel codice.

	   È in em, cioè relativo alla dimensione del numero: con i default il font è
	   20px x .6 = 12px, quindi .04em vale circa mezzo pixel. Per ritararlo: .08em è un
	   pixel intero verso il basso, 0 lascia il numero dove lo mette il browser. */
	--lsvt-num-nudge: .04em;

	--lsvt-line: 1px;

	/* Altezza della colonna QUANDO le slide sono al massimo. In percentuale, non in
	   pixel: l'altezza dello slider non è nota e cambia col viewport (LayerSlider la
	   ricalcola ad ogni resize). Essendo la timeline in position:absolute dentro al
	   container, la percentuale si riferisce a quell'altezza. Dalle impostazioni. */
	--lsvt-height: 86%;

	/* Numero di slide, scritto dal JS su ogni istanza. La colonna si accorcia in
	   proporzione: la distanza fra due pallini resta la stessa con 3 slide o con 9,
	   invece di allungarsi fino a riempire l'altezza disponibile. */
	--lsvt-count: 1;
	--lsvt-max-slides: 9;

	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	/* Sopra al pannello di transizione mobile (--lsvt-z + 1): la timeline deve restare
	   visibile anche mentre quello copre lo slider. */
	z-index: calc(var(--lsvt-z) + 2);

	/* (n-1) intervalli alla distanza fissa ricavata da --lsvt-height, più il diametro
	   di un pallino perché la colonna contiene i cerchi interi, non solo i loro centri. */
	height: calc(
		var(--lsvt-height) * (var(--lsvt-count) - 1) / (var(--lsvt-max-slides) - 1)
		+ var(--lsvt-size)
	);

	font: inherit;
	line-height: 1;
}

.lsvt--left {
	left: var(--lsvt-offset);
}

.lsvt--right {
	right: var(--lsvt-offset);
}

/* Linea di fondo + riempimento -------------------------------------------- */

/* La linea passa dietro ai pallini, centrata sulla loro colonna.

   Va dal centro del primo pallino al centro dell'ultimo, non da bordo a bordo: i pallini
   sono alti --lsvt-size, quindi partendo da 0 la linea sporgerebbe di mezzo pallino sopra
   al primo e sotto all'ultimo, e quelli agli estremi sembrerebbero fuori asse. */
.lsvt__track {
	position: absolute;
	top: calc(var(--lsvt-size) / 2);
	bottom: calc(var(--lsvt-size) / 2);
	left: 50%;
	width: var(--lsvt-line);
	transform: translateX(-50%);
	background: var(--lsvt-track);
}

.lsvt__fill {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100%;
	background: var(--lsvt-active);
	transform: scaleY(0);
	transform-origin: top center;
	will-change: transform;
}

/* Con l'avanzamento continuo il transform cambia ad ogni frame: una transizione
   aggiungerebbe solo ritardo. Serve invece quando la barra avanza a scatti. */
.lsvt--stepped .lsvt__fill {
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

/* Elenco ------------------------------------------------------------------ */

.lsvt__list {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lsvt__item {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.lsvt__dot {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lsvt-size);
	height: var(--lsvt-size);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	font: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Il cerchio vero e proprio: a riposo è rimpicciolito dalla scala, da attivo torna a
   grandezza naturale e si riempie del colore di accento. */
.lsvt__dot::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--lsvt-idle);
	transform: scale(var(--lsvt-dot-scale));
	transition: transform .4s cubic-bezier(.4, 0, .2, 1), background-color .4s ease;
}

/* Area di tocco più generosa del cerchio, senza spostarlo né ingrandirlo: un pallino di
   20px è un bersaglio scomodo, soprattutto da toccare. */
.lsvt__dot::after {
	content: '';
	position: absolute;
	inset: -8px;
	border-radius: 50%;
}

.lsvt__dot:hover::before,
.lsvt__dot:focus-visible::before {
	transform: scale(calc(var(--lsvt-dot-scale) * 1.5));
	background: var(--lsvt-active);
}

.lsvt__dot:focus-visible {
	outline: 2px solid var(--lsvt-active);
	outline-offset: 4px;
}

.lsvt__dot.is-active::before,
.lsvt__dot.is-active:hover::before {
	transform: scale(1);
	background: var(--lsvt-active);
}

/* Numero della slide: sta dentro al cerchio ed è visibile solo quando è attivo.
   Resta comunque nel DOM per i lettori di schermo. */
.lsvt__num {
	position: relative;
	font-size: calc(var(--lsvt-size) * .6);
	font-weight: 800;
	line-height: 1;
	/* Cifre a larghezza fissa: senza, "1" è più stretto degli altri e il numero balla
	   dentro al cerchio passando da una slide all'altra. */
	font-variant-numeric: tabular-nums;
	color: transparent;
	transform: translateY(var(--lsvt-num-nudge));
	transition: color .3s ease;
	pointer-events: none;
}

.lsvt__dot.is-active .lsvt__num {
	color: var(--lsvt-on-active);
}

.lsvt--no-labels .lsvt__num {
	display: none;
}

/* Nome della slide, se richiesto: compare accanto al pallino attivo. Dentro al cerchio
   non ci starebbe. */
.lsvt__name {
	position: absolute;
	top: 50%;
	left: calc(100% + .75rem);
	max-width: 12em;
	overflow: hidden;
	color: var(--lsvt-active);
	font-size: .8125rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: left;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

.lsvt--right .lsvt__name {
	left: auto;
	right: calc(100% + .75rem);
	text-align: right;
}

.lsvt__dot.is-active .lsvt__name {
	opacity: 1;
}

/* Il comportamento sotto i 768px sta tutto nel blocco Mobile in fondo al file,
   insieme a quello delle card: tenerli separati aveva già portato a due media query con
   le stesse regole dentro. */

@media (prefers-reduced-motion: reduce) {
	.lsvt__fill,
	.lsvt__dot::before,
	.lsvt__num,
	.lsvt__name {
		transition: none;
	}
}

/* ==========================================================================
   Cascata orizzontale di card
   ==========================================================================

   Una card per slide: la prima è quella corrente ed è più alta, dietro sfilano le
   successive in ordine circolare. Ad ogni cambio slide il binario scorre di una
   posizione verso sinistra.

   Misure dai mockup (screenshot a 1.98x), come sopra da prendere come intento:
   card 200x240, quella attiva 200x300 — stessa larghezza, così il ritmo orizzontale
   resta costante e il passo dello scorrimento è uno solo. */

.lsvt-cards {
	--lsvt-card-w: 200px;
	--lsvt-card-h: 240px;
	--lsvt-card-h-active: 300px;
	--lsvt-card-gap: 15px;
	--lsvt-card-radius: 5px;
	--lsvt-card-border-w: 0px;
	--lsvt-card-border-color: rgba(255, 255, 255, .25);

	/* Spazio dentro la finestra per le ombre, che altrimenti verrebbero tagliate: la
	   finestra deve ritagliare in orizzontale, e in CSS non si può nascondere un solo asse
	   — se uno è hidden, l'altro non può restare visible.

	   Con overflow:hidden il ritaglio avviene sul bordo del padding, quindi il padding fa
	   da margine di sicurezza mentre il bordo destro resta a filo e le card in coda
	   continuano a uscire tagliate di lì.

	   Deve coprire l'ombra della card attiva: con 0 16px 32px -16px l'ombra scende
	   16 + 16 - 16 = 16px sotto la card e non sborda di lato. */
	--lsvt-card-bleed: 28px;

	/* Zero: le ombre non sbordano lateralmente, quindi non serve. Se un domani si usasse
	   un'ombra più larga e questo valore venisse alzato, non deve superare lo spazio fra le
	   card, o dal bordo sinistro spunterebbe la card precedente. Il min() qui sotto lo
	   impedisce. */
	--lsvt-card-bleed-x: 0px;

	--lsvt-card-title: #fff;
	--lsvt-card-cat: #adcbde;
	--lsvt-card-bg: #0d1b24;

	/* Durata e curva dello scorrimento della cascata. La durata va accordata a quella
	   della transizione fra slide impostata in LayerSlider (Project Settings), così card e
	   sfondo si muovono insieme invece che una dietro l'altra. Entrambe dalle
	   impostazioni del plugin. */
	--lsvt-card-anim: .65s;
	--lsvt-card-ease: cubic-bezier(.4, 0, .2, 1);

	--lsvt-arrow-size: 34px;
	/* Distanza fra il bordo inferiore della card attiva e le frecce, e fra le due frecce. */
	--lsvt-arrow-gap: 28px;
	--lsvt-arrow-gap-x: 22px;

	/* Da dove parte la fascia. Il bordo destro coincide con quello dello slider: le card
	   in coda escono di lì, tagliate, com'è nei mockup. */
	--lsvt-cards-left: 47%;
	--lsvt-cards-top: 45%;

	/* Posizione del binario in numero di card, scritta dal JS. La conversione in pixel la
	   fa il CSS, che già conosce larghezza e distanza: così non si misura niente in JS e
	   non serve ricalcolare al resize. */
	--lsvt-rail: 0;

	/* Di quante card spostare la finestra rispetto a quella attiva. A zero si vede la card
	   della slide corrente; a uno si vede la successiva, quella che sta per entrare. Serve
	   su mobile, dove della fascia resta solo una striscia. */
	--lsvt-rail-offset: 0;

	position: absolute;
	left: var(--lsvt-cards-left);
	right: 0;
	top: var(--lsvt-cards-top);
	transform: translateY(-50%);
	z-index: var(--lsvt-z);
}

.lsvt-cards__viewport {
	/* content-box perché l'altezza sia quella della card attiva e il padding si aggiunga
	   attorno: molti temi impostano border-box su tutto. */
	box-sizing: content-box;
	height: var(--lsvt-card-h-active);
	/* Il respiro a sinistra non può superare lo spazio fra le card: oltre quello, il
	   ritaglio cadrebbe sulla card precedente invece che nel vuoto fra le due. */
	padding: var(--lsvt-card-bleed) 0 var(--lsvt-card-bleed)
		min(var(--lsvt-card-bleed-x), var(--lsvt-card-gap));
	/* Il padding sinistro sposterebbe la prima card verso destra: il margine negativo la
	   rimette dov'era. */
	margin-left: calc(min(var(--lsvt-card-bleed-x), var(--lsvt-card-gap)) * -1);
	overflow: hidden;
	/* Le card animano l'altezza, che è una proprietà di layout. Con il contenimento il
	   browser sa che niente di ciò che succede qui dentro può spostare qualcosa fuori, e
	   limita il ricalcolo a questa finestra invece che alla pagina. paint equivale al
	   ritaglio che overflow:hidden fa già. */
	contain: layout paint;
}

.lsvt-cards__track {
	display: flex;
	align-items: center;
	gap: var(--lsvt-card-gap);
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(calc(
		(var(--lsvt-rail) + var(--lsvt-rail-offset)) * -1
		* (var(--lsvt-card-w) + var(--lsvt-card-gap))
	));
	transition: transform var(--lsvt-card-anim) var(--lsvt-card-ease);
}

/* Usata solo per riportare il binario dentro al primo ciclo: quel salto non va animato, o
   si vedrebbe la cascata attraversare lo schermo all'indietro.

   Va spenta la transizione di TUTTO ciò che sta nel binario, non solo del binario stesso.
   Nel salto la classe della card attiva passa da una copia all'altra: se l'altezza resta
   animata, la copia che perde il ruolo si rimpicciolisce mentre quella che lo prende
   cresce, e si vede la card attiva sgonfiarsi e rigonfiarsi di colpo. */
.lsvt-cards__track--instant,
.lsvt-cards__track--instant .lsvt-card,
.lsvt-cards__track--instant .lsvt-card__btn,
.lsvt-cards__track--instant .lsvt-card__title {
	transition: none;
}

.lsvt-card {
	flex: 0 0 var(--lsvt-card-w);
	width: var(--lsvt-card-w);
	height: var(--lsvt-card-h);
	margin: 0;
	padding: 0;
	transition: height var(--lsvt-card-anim) var(--lsvt-card-ease);
}

/* Si anima l'altezza e non una scala: l'immagine è in object-fit cover, quindi il
   riquadro più alto mostra più foto invece di stirarla. */
.lsvt-card.is-active {
	height: var(--lsvt-card-h-active);
}

.lsvt-card__btn {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--lsvt-card-bg);
	/* border-box esplicito: il bordo deve stare dentro la card, non aggiungersi alle sue
	   misure. La larghezza è quella su cui il binario calcola lo scorrimento, e una card
	   più larga del previsto lo sfaserebbe di qualche pixel ad ogni posizione. */
	box-sizing: border-box;
	border: var(--lsvt-card-border-w) solid var(--lsvt-card-border-color);
	border-radius: var(--lsvt-card-radius);
	/* Spread pari a metà della sfocatura: l'ombra si estende SOLO verso il basso, con
	   sbordo laterale nullo (sfocatura/2 - spread = 0).

	   Non è un dettaglio estetico. La finestra ritaglia in orizzontale e, per non tranciare
	   l'ombra della prima card, serviva del respiro a sinistra; ma con overflow:hidden il
	   ritaglio avviene sul bordo del padding, quindi quel respiro mostrava ciò che sta
	   prima della card attiva. Finché era minore dello spazio fra le card si vedeva solo il
	   vuoto, appena diventava maggiore spuntava la card precedente — ed è quello che
	   succedeva su tablet, dove lo spazio è più stretto.

	   Un'ombra che non sborda di lato non ha bisogno di respiro laterale, e il problema non
	   si pone su nessuna misura. */
	box-shadow: 0 10px 22px -11px rgba(0, 0, 0, .5);
	font: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: box-shadow var(--lsvt-card-anim) var(--lsvt-card-ease);
}

.lsvt-card.is-active .lsvt-card__btn {
	box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .55);
}

.lsvt-card__media {
	position: absolute;
	inset: 0;
}

.lsvt-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nei mockup il testo cade su porzioni di foto già scure. Non è garantito con altre
   immagini, quindi una velatura in basso: costa poco e mette al riparo dal caso in cui
   qualcuno carichi una thumbnail chiara. */
.lsvt-card__btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, .78) 0%,
		rgba(0, 0, 0, .45) 32%,
		rgba(0, 0, 0, 0) 62%
	);
}

.lsvt-card__body {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: .95rem;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.lsvt-card__title {
	color: var(--lsvt-card-title);
	font-size: .9375rem;
	font-weight: 800;
	line-height: 1.25;
	transition: font-size var(--lsvt-card-anim) var(--lsvt-card-ease);
}

.lsvt-card.is-active .lsvt-card__title {
	font-size: 1.0625rem;
}

.lsvt-card__cat {
	color: var(--lsvt-card-cat);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Frecce ------------------------------------------------------------------ */

/* Sotto la card attiva e allineate al suo bordo sinistro.

   Il margine negativo recupera lo spazio che la finestra lascia alle ombre, così
   --lsvt-arrow-gap resta la distanza reale dal bordo della card e non cambia se si tocca
   --lsvt-card-bleed. Se --lsvt-arrow-gap è minore del bleed il margine diventa negativo e
   le frecce risalgono dentro alla finestra: --lsvt-cards__track ha un transform, quindi
   crea un contesto di impilamento e finirebbe sopra alle frecce prendendosi i loro click.
   Il nastro è largo quanto tutte le card in fila e riceve i click anche dove non ce n'è
   nessuna, perché un elemento senza sfondo è comunque un bersaglio.

   Da qui position/z-index: mettono le frecce sopra al nastro in ogni caso, anche a chi
   dovesse stringere --lsvt-arrow-gap. */
.lsvt-cards__nav {
	position: relative;
	z-index: 1;
	display: flex;
	gap: var(--lsvt-arrow-gap-x);
	margin-top: calc(var(--lsvt-arrow-gap) - var(--lsvt-card-bleed));
}

.lsvt-cards__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lsvt-arrow-size);
	height: var(--lsvt-arrow-size);
	margin: 0;
	padding: 0;
	background: var(--lsvt-active);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: filter .25s ease, transform .25s ease;
}

.lsvt-cards__arrow:hover,
.lsvt-cards__arrow:focus-visible {
	filter: brightness(1.15);
	transform: scale(1.08);
}

.lsvt-cards__arrow:focus-visible {
	outline: 2px solid var(--lsvt-active);
	outline-offset: 3px;
}

/* Chevron disegnato con due bordi ruotati: nessuna dipendenza da font di icone o SVG. */
.lsvt-cards__arrow::before {
	content: '';
	width: calc(var(--lsvt-arrow-size) * .26);
	height: calc(var(--lsvt-arrow-size) * .26);
	border: 2px solid var(--lsvt-on-active);
	border-right: 0;
	border-bottom: 0;
}

.lsvt-cards__arrow--prev::before {
	transform: rotate(-45deg);
	margin-left: .18em;
}

.lsvt-cards__arrow--next::before {
	transform: rotate(135deg);
	margin-right: .18em;
}

/* ==========================================================================
   Tablet
   ==========================================================================

   La soglia è impostabile (default 1280px): vedi "Soglie: classi, non media query" in
   CLAUDE.md. Qui non compare nessun numero, è il JS a mettere la classe.

   Card più piccole e spinte a destra: si vede quella attiva e metà della successiva.

   La fascia passa da `left: <percentuale>` a larghezza fissa ancorata a destra, perché
   con una percentuale la porzione visibile dipende dalla larghezza dello schermo: su un
   tablet stretto sarebbe rimasta mezza card, su uno largo tre. Con una larghezza fissa la
   composizione è la stessa ovunque. */

/* Non è una media query ma una classe, messa dal JS: le soglie sono impostabili, e in una
   media query non si può usare una variabile CSS. Ogni elemento riceve una sola classe di
   livello, quindi tablet e mobile non si sovrappongono e ciascuno dichiara tutto ciò che
   gli serve. */

.lsvt.lsvt-bp--tablet {
	/* Timeline più vicina al bordo, per lasciare respiro al testo della slide. */
	--lsvt-offset: 1.25rem;
	--lsvt-size: 18px;
}

.lsvt-cards.lsvt-bp--tablet {
	--lsvt-card-w: 150px;
	--lsvt-card-h: 190px;
	--lsvt-card-h-active: 240px;
	--lsvt-card-gap: 12px;
	--lsvt-arrow-size: 30px;
	--lsvt-arrow-gap-x: 16px;

	left: auto;
	right: 0;
	width: calc(var(--lsvt-card-w) * 1.5 + var(--lsvt-card-gap));
}

/* ==========================================================================
   Mobile
   ==========================================================================

   Soglia impostabile (default 767px), applicata dal JS come classe.

   Della fascia resta una striscia verticale sul bordo destro, alta quasi quanto lo
   slider: si intravede la card della slide SUCCESSIVA, e questo suggerisce che c'è altro
   da vedere e che si può trascinare.

   Lo scorrimento col dito non lo gestiamo noi: è la navigazione touch di LayerSlider, e le
   card seguono il cambio slide come per ogni altro comando. */

.lsvt.lsvt-bp--mobile {
	--lsvt-offset: .5rem;
	--lsvt-size: 16px;
	--lsvt-height: 68%;
}

/* La timeline resta verticale sul bordo sinistro. Le due alternative — pallini in fila in
   basso, oppure niente — restano disponibili dalle impostazioni. */
.lsvt--mobile-horizontal.lsvt-bp--mobile {
	top: auto;
	bottom: 1.25rem;
	left: 50%;
	right: auto;
	height: auto;
	transform: translateX(-50%);
}

.lsvt--mobile-horizontal.lsvt-bp--mobile .lsvt__track {
	display: none;
}

.lsvt--mobile-horizontal.lsvt-bp--mobile .lsvt__list {
	flex-direction: row;
	gap: 1rem;
	height: auto;
}

.lsvt--mobile-horizontal.lsvt-bp--mobile .lsvt__name {
	display: none;
}

.lsvt--mobile-hidden.lsvt-bp--mobile {
	display: none;
}

.lsvt-cards.lsvt-bp--mobile {
	/* Larghezza della card intera: è quella che si vedrà entrando, anche se ora se ne
	   scorge solo un lembo. */
	--lsvt-card-w: 62vw;
	--lsvt-card-gap: 10px;

	/* Quanto se ne intravede: un lembo, non una card tagliata a metà. Deve bastare a far
	   capire che c'è dell'altro, senza rubare spazio alla slide. */
	--lsvt-card-peek: 40px;

	/* Si mostra la card che sta per entrare, non quella corrente. */
	--lsvt-rail-offset: 1;

	/* Niente respiro laterale: allargherebbe la striscia. */
	--lsvt-card-bleed: 0px;
	--lsvt-card-bleed-x: 0px;

	--lsvt-arrow-size: 34px;
	--lsvt-arrow-gap-x: 14px;

	/* La fascia occupa tutta l'altezza dello slider, così le frecce possono essere
	   posizionate rispetto al suo fondo. */
	left: auto;
	right: 0;
	top: 0;
	bottom: 0;
	width: var(--lsvt-card-peek);
	transform: none;
	display: flex;
	align-items: center;
}

.lsvt-cards.lsvt-bp--mobile .lsvt-cards__viewport {
	height: 86%;
	margin-left: 0;

	/* Ombra sul bordo d'attacco del lembo, la stessa del pannello di transizione: separa la
	   card dallo sfondo e la fa leggere come un livello sopra la slide.

	   Sta sulla finestra e non sulla card: su mobile la card riempie la finestra
	   esattamente (bleed a zero), quindi il suo bordo sinistro coincide con quello della
	   finestra, che ritaglia — un'ombra sulla card cadrebbe fuori e sparirebbe. L'ombra di
	   un elemento invece non è soggetta al ritaglio dell'elemento stesso, che riguarda solo
	   il contenuto. Gli angoli arrotondati a sinistra evitano che l'ombra rettangolare
	   sbordi dagli angoli tondi della card. */
	border-radius: var(--lsvt-card-radius) 0 0 var(--lsvt-card-radius);
	box-shadow: -14px 0 28px -10px rgba(0, 0, 0, .55);

	/* Riferimento per il chevron qui sotto. */
	position: relative;
}

/* Chevron sul lembo: l'indizio esplicito che c'è qualcosa da trascinare, messo dove
   l'occhio va già. Fisso: resta anche dopo il primo cambio slide, perché è parte
   dell'aspetto del lembo e non un suggerimento di primo contatto — quello è il capolino,
   che invece si spegne. Un lento respiro di opacità lo fa notare senza agitarsi. */
.lsvt-cards.lsvt-bp--mobile .lsvt-cards__viewport::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 9px;
	height: 9px;
	border-left: 2px solid var(--lsvt-on-active);
	border-bottom: 2px solid var(--lsvt-on-active);
	transform: translate(-25%, -50%) rotate(45deg);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7));
	pointer-events: none;
	animation: lsvt-chevron 1.8s ease-in-out infinite;
}

@keyframes lsvt-chevron {
	0%,
	100% {
		opacity: .45;
	}

	50% {
		opacity: 1;
	}
}

/* Tutte alla stessa altezza: qui non c'è una card "attiva" da mettere in evidenza, se ne
   vede una sola per volta. */
.lsvt-cards.lsvt-bp--mobile .lsvt-card,
.lsvt-cards.lsvt-bp--mobile .lsvt-card.is-active {
	height: 100%;
}

/* Niente titolo e categoria: del lembo si vedono 40px, cioè due o tre lettere che
   sembrano un errore più che un'informazione. E senza testo non serve nemmeno la velatura
   in basso che lo rendeva leggibile. */
.lsvt-cards.lsvt-bp--mobile .lsvt-card__body,
.lsvt-cards.lsvt-bp--mobile .lsvt-card__btn::after {
	display: none;
}

/* In basso a destra. La fascia è larga quanto il lembo, ma non ritaglia: le frecce possono
   sporgere a sinistra restando ancorate al bordo destro. */
.lsvt-cards.lsvt-bp--mobile .lsvt-cards__nav {
	position: absolute;
	right: 0;
	bottom: 1rem;
	margin: 0;
}

/* Invito allo swipe.

   Un lembo di pochi pixel può passare inosservato. Per un paio di volte dopo il caricamento la
   fascia si allarga di qualche pixel e torna indietro: la card "fa capolino", che è il
   gesto stesso che si vuole suggerire. Poi smette, e smette subito al primo cambio slide
   — se l'utente ha già capito, insistere sarebbe solo fastidio.

   Si anima la larghezza della fascia e non una transform: la fascia è ancorata a destra,
   quindi allargandola si scopre più card verso sinistra, ed è un elemento solo per due
   cicli. Il binario, che ha già il suo transform, non viene toccato. */
@keyframes lsvt-peek {
	0%,
	100% {
		width: var(--lsvt-card-peek);
	}

	40%,
	60% {
		width: calc(var(--lsvt-card-peek) + 18px);
	}
}

.lsvt-cards.lsvt-bp--mobile.lsvt-cards--hint {
	animation: lsvt-peek 1.6s cubic-bezier(.4, 0, .2, 1) 1.5s 2;
}

/* ==========================================================================
   Pannello di transizione (mobile)
   ==========================================================================

   Al cambio slide, l'immagine della card in arrivo scivola da destra e copre lo slider
   mentre LayerSlider fa la sua transizione sotto; a fine corsa si dissolve e lascia la
   nuova slide. L'effetto è quello della card che "entra" e diventa la slide.

   Non blocca mai i tocchi: pointer-events è none anche mentre copre, e a fine dissolvenza
   il pannello viene nascosto. Uno strato sopra allo slider in modo permanente renderebbe
   la slide non cliccabile.

   Il pannello è fratello di .lsvt-cards, non figlio: la fascia su mobile è una striscia
   larga quanto il lembo, e un figlio non potrebbe coprire tutto lo slider. Per questo le
   variabili di durata e curva vanno dichiarate anche qui. */

.lsvt-wipe {
	--lsvt-card-anim: .65s;
	--lsvt-card-ease: cubic-bezier(.4, 0, .2, 1);
	/* Scala di partenza del pannello. Pari all'altezza del lembo rispetto allo slider,
	   così parte grande quanto la card che si vede nella striscia. */
	--lsvt-wipe-scale: .86;

	position: absolute;
	inset: 0;
	z-index: calc(var(--lsvt-z, 1000) + 1);
	display: none;
	overflow: hidden;
	pointer-events: none;
}

.lsvt-wipe.is-on {
	display: block;
}

.lsvt-wipe__panel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #0d1b24;
	/* Parte più piccolo dello slider, come la card nella striscia che è alta meno della
	   slide, e cresce entrando: così si legge "la card diventa la slide" e non "compare
	   un pannello". Scala uniforme e non solo verticale, perché una scala su un asse solo
	   deformerebbe l'immagine; l'origine a destra lo fa crescere verso sinistra, da dove
	   la card entra. */
	transform: translateX(100%) scale(var(--lsvt-wipe-scale, .86));
	transform-origin: right center;
	border-radius: var(--lsvt-card-radius, 5px);
	opacity: 1;
	/* Ombra sul bordo d'attacco, così il pannello sembra passare sopra e non fondersi. */
	box-shadow: -18px 0 36px -12px rgba(0, 0, 0, .6);
}

.lsvt-wipe__panel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lsvt-wipe.is-in .lsvt-wipe__panel {
	transform: translateX(0) scale(1);
	border-radius: 0;
	transition:
		transform var(--lsvt-card-anim) var(--lsvt-card-ease),
		border-radius var(--lsvt-card-anim) var(--lsvt-card-ease);
}

/* Dissolvenza lenta, e solo a slider fermo (lo decide il JS): un incrocio lento con una
   slide che non si muove più non si nota, anche se le due immagini sono uguali. Una
   dissolvenza rapida sopra una slide ancora in transizione la faceva invece "sparire e
   riapparire". Stessa durata in WIPE_FADE nel JS. */
.lsvt-wipe.is-out .lsvt-wipe__panel {
	opacity: 0;
	transition: opacity .8s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.lsvt-cards__track,
	.lsvt-card,
	.lsvt-card__title,
	.lsvt-cards__arrow {
		transition: none;
	}

	.lsvt-cards--hint,
	.lsvt-cards.lsvt-bp--mobile .lsvt-cards__viewport::after {
		animation: none;
	}
}