/*
 * CUIA Slider
 * Personalizzabile dal tema con le variabili --cuia-slider-* (vedi sotto).
 */
.cuia-slider {
	--_accent: var(--cuia-slider-accent, var(--cuia-primary, #3d64e5));
	--_radius: var(--cuia-slider-radius, 14px);
	--_ctrl-bg: var(--cuia-slider-control-bg, rgb(255 255 255 / .92));
	--_ctrl-fg: var(--cuia-slider-control-fg, #14213d);

	position: relative;
	width: 100%;
	margin: 0;
	border-radius: var(--_radius);
	overflow: hidden;
	background: #eef1f8;
	isolation: isolate;
	container-type: inline-size;
}

.cuia-slider__viewport {
	overflow: hidden;
}

.cuia-slider__track {
	display: grid;
}

.cuia-slide {
	position: relative;
	min-width: 0;
}

.cuia-slide__media {
	display: block;
	color: inherit;
}

/* L'immagine decide l'altezza: il rapporto d'aspetto riserva lo spazio prima del caricamento e uniforma
   banner di proporzioni diverse; l'altezza minima vale per gli schermi stretti. */
.cuia-slide__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--cuia-ratio, 1000 / 140);
	min-height: var(--cuia-min-h, 90px);
	object-fit: cover; /* su schermi stretti il banner viene ritagliato al centro, non schiacciato */
	object-position: center;
	user-select: none;
	-webkit-user-drag: none;
}

/* --- Transizione: dissolvenza (tutte le slide impilate nella stessa cella) --- */
.cuia-slider--fade .cuia-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s linear .7s;
}

.cuia-slider--fade .cuia-slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s ease, visibility 0s;
	z-index: 1;
}

/* --- Transizione: scorrimento laterale --- */
.cuia-slider--slide .cuia-slider__track {
	display: flex;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.cuia-slider--slide .cuia-slide {
	flex: 0 0 100%;
}

/* --- Didascalia (facoltativa) ---
   I banner sono molto bassi (es. 1000×140): la didascalia è centrata in verticale e le misure seguono la
   larghezza dello slider (unità cqi), così titolo, testo e pulsante restano dentro l'immagine a ogni dimensione. */
.cuia-slide__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: .2rem;
	padding: .5rem clamp(1rem, 4cqi, 3rem) 1.6rem;
	color: #fff;
	background: linear-gradient(90deg, rgb(10 20 50 / .8), rgb(10 20 50 / .3) 65%, rgb(10 20 50 / 0));
	text-shadow: 0 1px 2px rgb(0 0 0 / .4);
}

.cuia-slide--center .cuia-slide__caption {
	align-items: center;
	text-align: center;
	background: rgb(10 20 50 / .5);
}

.cuia-slide--right .cuia-slide__caption {
	align-items: flex-end;
	text-align: right;
	background: linear-gradient(270deg, rgb(10 20 50 / .8), rgb(10 20 50 / .3) 65%, rgb(10 20 50 / 0));
}

.cuia-slide__title {
	margin: 0;
	font-size: clamp(.95rem, 2.6cqi, 1.6rem);
	font-weight: 700;
	line-height: 1.2;
}

.cuia-slide__text {
	margin: 0;
	max-width: 60ch;
	font-size: clamp(.8rem, 1.5cqi, 1rem);
	line-height: 1.35;
}

.cuia-slide__button {
	display: inline-block;
	margin-top: .25rem;
	padding: .3em 1em;
	border-radius: 999px;
	background: var(--_accent);
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	text-shadow: none;
}

.cuia-slide__button:hover,
.cuia-slide__button:focus-visible { filter: brightness(1.12); }

/* su schermi stretti resta il titolo (e il pulsante, unico modo di aprire il link); i margini liberano le frecce */
@container (max-width: 640px) {
	.cuia-slide__text { display: none; }
	.cuia-slide__caption { padding-inline: 3.25rem; }
}

/* --- Frecce --- */
.cuia-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--_ctrl-bg);
	color: var(--_ctrl-fg);
	box-shadow: 0 2px 10px rgb(0 0 0 / .2);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity .2s ease, background-color .2s ease;
}

.cuia-slider__nav--prev { left: .75rem; }
.cuia-slider__nav--next { right: .75rem; }

.cuia-slider__nav:hover { background: #fff; }

/* con il mouse le frecce compaiono al passaggio; su touch e da tastiera restano visibili */
@media (hover: hover) and (pointer: fine) {
	.cuia-slider__nav { opacity: 0; }
	.cuia-slider:hover .cuia-slider__nav,
	.cuia-slider:focus-within .cuia-slider__nav { opacity: 1; }
}

@media (max-width: 600px) {
	.cuia-slider__nav { width: 34px; height: 34px; }
}

/* --- Barra inferiore: pausa e indicatori --- */
.cuia-slider__bar {
	position: absolute;
	inset: auto 0 .6rem 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	pointer-events: none;
}

.cuia-slider__bar > * { pointer-events: auto; }

.cuia-slider__toggle {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--_ctrl-bg);
	color: var(--_ctrl-fg);
	cursor: pointer;
}

.cuia-slider__toggle .cuia-icon-play { display: none; }
.cuia-slider.is-paused .cuia-slider__toggle .cuia-icon-play { display: block; }
.cuia-slider.is-paused .cuia-slider__toggle .cuia-icon-pause { display: none; }

.cuia-slider__dots {
	display: flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .55rem;
	border-radius: 999px;
	background: rgb(10 20 50 / .35);
	backdrop-filter: blur(4px);
}

.cuia-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / .55);
	cursor: pointer;
	transition: transform .2s ease, background-color .2s ease;
}

.cuia-slider__dot[aria-current="true"] {
	background: #fff;
	transform: scale(1.35);
}

.cuia-slider__counter {
	min-width: 3.4em;
	color: #fff;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.cuia-slider button:focus-visible,
.cuia-slider a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
	box-shadow: 0 0 0 5px var(--_accent);
}

/* --- Senza JavaScript: si vede solo la prima slide --- */
.cuia-slider:not(.is-ready) .cuia-slide:not(:first-child) { display: none; }

@media (prefers-reduced-motion: reduce) {
	.cuia-slider--fade .cuia-slide,
	.cuia-slider--slide .cuia-slider__track { transition: none; }
}