/* ILPA Image Slider
 * Layout da Figma — ILPA Website, "5. Impresa luogo di cultura" (nodo 259:4996):
 * container 1327 · foto principale 1026x516 @ x190 · foto dietro 872x424 @ x455
 * (centrata in verticale, sbuca 111px a destra) · frecce 72px affiancate con
 * gap 24 in basso a sinistra (x0 e x96), allineate al fondo della foto.
 * Avanti: la foto in primo piano esce verso sinistra, la successiva entra da destra. */

.ilpa-is {
	--ilpa-is-ratio: 1026 / 516;   /* proporzione della foto principale */
	--ilpa-is-peek: 111px;         /* quanto sbuca la foto dietro */
	--ilpa-is-back-scale: 0.822;   /* riduzione della foto dietro (424 / 516) */
	--ilpa-is-radius: 20px;
	--ilpa-is-bg: transparent;     /* nel design la sezione non ha uno sfondo proprio */
	--ilpa-is-arrow: #276A95;               /* chevron */
	--ilpa-is-arrow-hover: #276A95;         /* chevron in hover */
	--ilpa-is-arrow-bg: #FFFFFF;            /* fondo */
	--ilpa-is-arrow-bg-press: #E6EDF5;      /* fondo al clic */
	--ilpa-is-arrow-off: #8C8C8C;           /* chevron non attivo */
	--ilpa-is-arrow-off-bg: #E6E6E6;        /* fondo non attivo */
	--ilpa-is-arrow-size: 72px;
	--ilpa-is-arrow-gap: 24px;     /* distanza tra le due frecce */
	--ilpa-is-nav-gap: 22px;       /* dalle frecce alla foto: 190 - (72 + 24 + 72) */
	--ilpa-is-duration: 600ms;
	--ilpa-is-ease: cubic-bezier(0.65, 0.02, 0.25, 1);

	background: var(--ilpa-is-bg);
	box-sizing: border-box;

	/* Frecce in basso a sinistra, foto a destra, sulla stessa riga. */
	display: flex;
	align-items: flex-end;
	gap: var(--ilpa-is-nav-gap);
}

.ilpa-is *,
.ilpa-is *::before,
.ilpa-is *::after {
	box-sizing: border-box;
}

/* Viewport: contenitore a strati, le slide si sovrappongono.
 * Occupa lo spazio rimanente e riserva a destra lo spazio in cui sbuca
 * la slide sottostante. */
.ilpa-is__viewport {
	order: 2; /* dopo le frecce */
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	padding-right: var(--ilpa-is-peek);
}

.ilpa-is__track {
	position: relative;
}

/* Ogni slide sovrapposta nello stesso punto. */
.ilpa-is__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(0);
	transition: opacity var(--ilpa-is-duration) var(--ilpa-is-ease),
		transform var(--ilpa-is-duration) var(--ilpa-is-ease);
}

/* La slide attiva sta sopra, a piena larghezza utile. */
.ilpa-is__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 3;
	transform: translateX(0);
}

/* La slide "next" sta DIETRO: rimpicciolita, centrata in verticale e spostata
 * a destra quel tanto che basta a farla sbucare di --ilpa-is-peek.
 * La traslazione compensa il margine lasciato dalla riduzione di scala. */
.ilpa-is__slide.is-next,
.ilpa-is__slide.is-returning {
	opacity: 1;
	visibility: visible;
	transform:
		translateX( calc( var(--ilpa-is-peek) + ( 100% - 100% * var(--ilpa-is-back-scale) ) / 2 ) )
		scale( var(--ilpa-is-back-scale) );
}

.ilpa-is__slide.is-next {
	z-index: 1;
}

/* ---------- ANIMAZIONE ----------
 * Ogni effetto è una combinazione di keyframe: la slide che esce ("is-leaving"),
 * quella che entra in primo piano ("is-incoming" in avanti, "is-entering"
 * all'indietro, riprodotta al contrario) e quella che si scopre dietro
 * ("is-appearing"). Durata e curva arrivano dalle variabili, così CSS e JS
 * restano allineati. */
.ilpa-is__slide.is-leaving,
.ilpa-is__slide.is-entering,
.ilpa-is__slide.is-incoming {
	animation-duration: var(--ilpa-is-duration);
	animation-timing-function: var(--ilpa-is-ease);
	animation-fill-mode: both;
}

.ilpa-is__slide.is-leaving {
	opacity: 1;
	visibility: visible;
	pointer-events: none;
	z-index: 4;
}

.ilpa-is__slide.is-entering {
	z-index: 4;
	transition: none;
}

/* Chi entra in primo piano con un'animazione propria non deve anche
 * "transitare" dalla posizione di peek: ci pensa il keyframe. */
.ilpa-is__slide.is-incoming {
	transition: none;
}

/* La slide che si scopre dietro cambia posizione di colpo e compare in
 * dissolvenza (serve dove il posto del peek resta scoperto). */
.ilpa-is__slide.is-appearing {
	transition-property: opacity;
}

/* Indietro: la slide in primo piano arretra nella posizione della slide dietro. */
.ilpa-is__slide.is-returning {
	z-index: 2;
}

/* Punto di partenza della dissolvenza (serve solo con due sole slide, dove la
 * slide appena uscita deve tornare subito a fare da "peek"). */
.ilpa-is__slide.is-faded {
	opacity: 0;
}

/* Riallineamento di stato senza animazione (fine transizione). */
.ilpa-is__slide.is-instant,
.ilpa-is__slide.is-instant .ilpa-is__media {
	transition: none !important;
	animation: none !important;
}

/* --- Effetto 1: scorrimento orizzontale (default) --- */
.ilpa-is--fx-slide .ilpa-is__slide.is-leaving {
	animation-name: ilpa-is-exit-left;
}
.ilpa-is--fx-slide .ilpa-is__slide.is-entering {
	animation-name: ilpa-is-enter-left;
}
.ilpa-is--fx-slide.ilpa-is--dir-rev .ilpa-is__slide.is-leaving {
	animation-name: ilpa-is-exit-right;
}
.ilpa-is--fx-slide.ilpa-is--dir-rev .ilpa-is__slide.is-entering {
	animation-name: ilpa-is-enter-right;
}

/* --- Effetto 2: scorrimento verticale ---
 * Qui anche la slide che entra ha il suo keyframe: sale dal basso a tutta
 * dimensione invece di avanzare dalla posizione di peek. Uscita ed entrata
 * usano la stessa curva nello stesso verso, così i due bordi restano
 * combacianti per tutta la durata e dietro non si vede nulla. */
.ilpa-is--fx-slide-y .ilpa-is__slide.is-leaving {
	animation-name: ilpa-is-exit-up;
}
.ilpa-is--fx-slide-y .ilpa-is__slide.is-incoming {
	animation-name: ilpa-is-enter-bottom;
}
.ilpa-is--fx-slide-y .ilpa-is__slide.is-entering {
	animation-name: ilpa-is-enter-top;
}
.ilpa-is--fx-slide-y.ilpa-is--dir-rev .ilpa-is__slide.is-leaving {
	animation-name: ilpa-is-exit-down;
}
.ilpa-is--fx-slide-y.ilpa-is--dir-rev .ilpa-is__slide.is-incoming {
	animation-name: ilpa-is-enter-top;
}
.ilpa-is--fx-slide-y.ilpa-is--dir-rev .ilpa-is__slide.is-entering {
	animation-name: ilpa-is-enter-bottom;
}

/* --- Effetto 3: dissolvenza incrociata ---
 * Nessuno spostamento: chi entra prende posto subito e compare sfumando. */
.ilpa-is--fx-fade .ilpa-is__slide.is-leaving {
	animation-name: ilpa-is-fade-out;
}
.ilpa-is--fx-fade .ilpa-is__slide.is-incoming,
.ilpa-is--fx-fade .ilpa-is__slide.is-entering {
	animation-name: ilpa-is-fade-in;
}
.ilpa-is--fx-fade .ilpa-is__slide.is-returning {
	transition: none;
}

/* --- Effetto 4: cambio istantaneo --- */
.ilpa-is--fx-none .ilpa-is__slide {
	transition: none !important;
	animation: none !important;
}

/* Gli inset negativi tengono fuori dal taglio l'ombra sui lati che restano
 * dentro la cornice, mentre l'inset del lato di uscita cresce esattamente
 * quanto la traslazione: il bordo di taglio resta fermo sul bordo del riquadro
 * e la foto sparisce sotto, senza passare sopra le frecce. Le entrate sono le
 * uscite specchiate, scritte per esteso invece che con animation-direction:
 * reverse, che applicherebbe la curva al tempo invertito e sfaserebbe i due
 * movimenti. */
@keyframes ilpa-is-exit-left {
	from { transform: translateX(0); -webkit-clip-path: inset(-100px -100px -100px 0%); clip-path: inset(-100px -100px -100px 0%); }
	to   { transform: translateX(-100%); -webkit-clip-path: inset(-100px 0 -100px 100%); clip-path: inset(-100px 0 -100px 100%); }
}
@keyframes ilpa-is-enter-left {
	from { transform: translateX(-100%); -webkit-clip-path: inset(-100px 0 -100px 100%); clip-path: inset(-100px 0 -100px 100%); }
	to   { transform: translateX(0); -webkit-clip-path: inset(-100px -100px -100px 0%); clip-path: inset(-100px -100px -100px 0%); }
}
@keyframes ilpa-is-exit-right {
	from { transform: translateX(0); -webkit-clip-path: inset(-100px 0% -100px -100px); clip-path: inset(-100px 0% -100px -100px); }
	to   { transform: translateX(100%); -webkit-clip-path: inset(-100px 100% -100px 0); clip-path: inset(-100px 100% -100px 0); }
}
@keyframes ilpa-is-enter-right {
	from { transform: translateX(100%); -webkit-clip-path: inset(-100px 100% -100px 0); clip-path: inset(-100px 100% -100px 0); }
	to   { transform: translateX(0); -webkit-clip-path: inset(-100px 0% -100px -100px); clip-path: inset(-100px 0% -100px -100px); }
}
@keyframes ilpa-is-exit-up {
	from { transform: translateY(0); -webkit-clip-path: inset(0% -100px -100px -100px); clip-path: inset(0% -100px -100px -100px); }
	to   { transform: translateY(-100%); -webkit-clip-path: inset(100% -100px 0 -100px); clip-path: inset(100% -100px 0 -100px); }
}
@keyframes ilpa-is-enter-top {
	from { transform: translateY(-100%); -webkit-clip-path: inset(100% -100px 0 -100px); clip-path: inset(100% -100px 0 -100px); }
	to   { transform: translateY(0); -webkit-clip-path: inset(0% -100px -100px -100px); clip-path: inset(0% -100px -100px -100px); }
}
@keyframes ilpa-is-exit-down {
	from { transform: translateY(0); -webkit-clip-path: inset(-100px -100px 0% -100px); clip-path: inset(-100px -100px 0% -100px); }
	to   { transform: translateY(100%); -webkit-clip-path: inset(0 -100px 100% -100px); clip-path: inset(0 -100px 100% -100px); }
}
@keyframes ilpa-is-enter-bottom {
	from { transform: translateY(100%); -webkit-clip-path: inset(0 -100px 100% -100px); clip-path: inset(0 -100px 100% -100px); }
	to   { transform: translateY(0); -webkit-clip-path: inset(-100px -100px 0% -100px); clip-path: inset(-100px -100px 0% -100px); }
}
@keyframes ilpa-is-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ilpa-is-fade-in  { from { opacity: 0; } to { opacity: 1; } }

.ilpa-is__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--ilpa-is-ratio);
	border-radius: var(--ilpa-is-radius);
	overflow: hidden;
	background: #d3dcea;
	/* Figma "Shadow/m" */
	box-shadow: 0 12px 16px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.03);
	transition: box-shadow var(--ilpa-is-duration) var(--ilpa-is-ease);
}

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

/* La slide dietro ha l'ombra più ampia — Figma "Shadow/l". */
.ilpa-is__slide.is-next .ilpa-is__media,
.ilpa-is__slide.is-returning .ilpa-is__media {
	box-shadow: 0 20px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 8px -4px rgba(0, 0, 0, 0.03);
}

/* ---------- FRECCE (affiancate, in basso a sinistra) ---------- */
.ilpa-is__nav {
	order: 1; /* prima del viewport */
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	gap: var(--ilpa-is-arrow-gap);
}

.ilpa-is__arrow {
	width: var(--ilpa-is-arrow-size);
	height: var(--ilpa-is-arrow-size);
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: var(--ilpa-is-arrow-bg);
	color: var(--ilpa-is-arrow);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 24px 24px rgba(0, 0, 0, 0.18);
	transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

/* Hover: stessa freccia, ombra più marcata. */
.ilpa-is__arrow:hover:not(:disabled) {
	color: var(--ilpa-is-arrow-hover);
	box-shadow: 0 28px 36px rgba(0, 0, 0, 0.26);
}

/* Clic: fondo azzurro, ombra tolta. */
.ilpa-is__arrow:active:not(:disabled) {
	background: var(--ilpa-is-arrow-bg-press);
	box-shadow: none;
}

/* Non attiva (una sola slide): piatta e in grigio. */
.ilpa-is__arrow:disabled {
	background: var(--ilpa-is-arrow-off-bg);
	color: var(--ilpa-is-arrow-off);
	box-shadow: none;
	cursor: default;
}

.ilpa-is__arrow:focus-visible {
	outline: 2px solid var(--ilpa-is-arrow-hover);
	outline-offset: 3px;
}

/* Con le frecce a destra cambia solo l'ordine: la foto resta a sinistra,
 * lo spazio del "peek" e il verso dell'uscita non cambiano. */
.ilpa-is--nav-right .ilpa-is__nav {
	order: 3;
}

/* ---------- RESPONSIVE ----------
 * Sotto i 1024px il design non prevede un frame: la colonna delle frecce
 * toglierebbe troppo spazio alla foto, quindi passano sotto, a sinistra. */
@media (max-width: 1023px) {
	.ilpa-is {
		--ilpa-is-peek: 64px;
		--ilpa-is-arrow-size: 56px;
		--ilpa-is-arrow-gap: 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}
	.ilpa-is__viewport {
		order: 1;
	}
	.ilpa-is__nav {
		order: 2; /* sotto la foto */
	}
}

@media (max-width: 767px) {
	.ilpa-is {
		--ilpa-is-peek: 40px;
		--ilpa-is-radius: 14px;
	}
}

/* Chi ha ridotto le animazioni vede il cambio slide immediato. */
@media (prefers-reduced-motion: reduce) {
	.ilpa-is {
		--ilpa-is-duration: 1ms;
	}
}