/**
 * SCF Slider PA - stili minimi.
 *
 * Colori, punti e pulsanti vengono da Bootstrap Italia (variabili --bsi-*, con un
 * valore di ripiego per gli altri temi). Qui ci sono solo le proporzioni delle
 * immagini, le frecce (Bootstrap Italia le disegna solo nella variante
 * "-arrow-visible") e lo stato prima dell'avvio di Splide.
 * Mobile first; i breakpoint (769 e 993 px) sono quelli delle opzioni di Bootstrap
 * Italia per it-big-img e it-standard-image (768 e 992 px, come larghezza massima).
 */

.scfslider {
	--scfslider-proporzioni: 16 / 9;
	--scfslider-altezza-max: 75vh;
	position: relative;
}

.scfslider--p-21-9 {
	--scfslider-proporzioni: 21 / 9;
}

.scfslider--p-3-2 {
	--scfslider-proporzioni: 3 / 2;
}

.scfslider--p-4-3 {
	--scfslider-proporzioni: 4 / 3;
}

.scfslider__scena {
	position: relative;
}

/* Tutte le immagini con le stesse proporzioni: il carosello non cambia altezza. */
.scfslider__immagine {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--scfslider-proporzioni);
	max-height: var(--scfslider-altezza-max);
	object-fit: cover;
	object-position: center;
}

/* Inquadratura scelta nella slide: quale parte della foto resta nel ritaglio. */
.scfslider__immagine--alto {
	object-position: center top;
}

.scfslider__immagine--basso {
	object-position: center bottom;
}

/* Slide con collegamento: tutta l'immagine è cliccabile. */
.scfslider__link {
	display: block;
	position: relative;
}

/* Anello di focus dentro l'immagine: quello esterno del design system verrebbe tagliato dal carosello. */
.scfslider__link:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 3px var(--bsi-color-border-inverse, #fff), inset 0 0 0 6px var(--bsi-color-outline-focus, #000);
	pointer-events: none;
}

/* In testata le immagini partono dal bordo, senza lo spazio sopra delle schede. */
.scfslider .it-carousel-wrapper .splide__track {
	padding-top: 0;
}

/* Pulsante di pausa (solo con lo scorrimento automatico). */
.scfslider__comandi {
	display: flex;
	justify-content: flex-end;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.scfslider__pausa .scfslider__icona {
	width: 1rem;
	height: 1rem;
	margin-right: 0.375rem;
	vertical-align: -0.15em;
	fill: currentColor;
}

/* Frecce: stesso aspetto di quelle del design system, sopra le immagini. */
.scfslider .splide__arrows {
	position: absolute;
	top: 50%;
	right: var(--bsi-spacing-xs, 0.5rem);
	left: var(--bsi-spacing-xs, 0.5rem);
	z-index: 1;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%);
	pointer-events: none;
}

.scfslider .splide__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--bsi-carousel-arrow-size, 2.5rem);
	height: var(--bsi-carousel-arrow-size, 2.5rem);
	padding: 0;
	border: 0;
	background: var(--bsi-carousel-arrow-background, #06c);
	color: var(--bsi-carousel-arrow-icon-color, #fff);
	cursor: pointer;
	pointer-events: auto;
}

.scfslider .splide__arrow .scfslider__icona {
	width: 1.5rem;
	height: 1.5rem;
	fill: currentColor;
}

.scfslider .splide__arrow[disabled] {
	background: var(--bsi-color-background-disabled, #6c757d);
	cursor: default;
}

/* Tutte le slide già visibili (variante standard con poche immagini): niente frecce. */
.scfslider .splide:not(.is-overflow) .splide__arrows {
	display: none;
}

/* Spazio dei punti riservato da subito, per non spostare la pagina all'avvio. */
.scfslider .splide__pagination {
	min-height: var(--bsi-carousel-pagination-dot-size, 1rem);
}

/*
 * Punti non attivi: un anello grigio su fondo bianco invece del grigio chiaro pieno
 * (1,5:1). L'anello ha 3,8:1 (WCAG 1.4.11) e la forma distingue il punto attivo,
 * pieno, senza affidarsi solo al colore (WCAG 1.4.1).
 */
.scfslider .splide__pagination .splide__pagination__page:not(.is-active) {
	background-color: #fff;
	box-shadow: inset 0 0 0 2px #768594;
}

/*
 * Prima dell'avvio di Splide Bootstrap Italia nasconde il carosello. Qui la prima
 * immagine si vede già, con la larghezza che avrà dopo (padding e spazi delle opzioni
 * di Bootstrap Italia): l'immagine principale non aspetta lo script (LCP) e la
 * pagina non si sposta (CLS). Frecce e pausa compaiono quando funzionano.
 */
.scfslider .splide:not(.is-initialized) {
	visibility: visible;
}

.scfslider .splide:not(.is-initialized) .splide__arrows,
.scfslider .splide:not(.is-initialized) .splide__toggle {
	visibility: hidden;
}

.scfslider .splide:not(.is-initialized) .splide__slide {
	width: 100%;
}

.scfslider--standard .splide:not(.is-initialized) .splide__track {
	padding-right: 40px;
	padding-left: 40px;
}

.scfslider--standard .splide:not(.is-initialized) .splide__slide {
	margin-right: 24px;
}

@media (min-width: 769px) {
	.scfslider--grande .splide:not(.is-initialized) .splide__track {
		padding-right: 160px;
		padding-left: 160px;
	}

	.scfslider--grande .splide:not(.is-initialized) .splide__slide {
		margin-right: 24px;
	}

	.scfslider--standard .splide:not(.is-initialized) .splide__track {
		padding-right: 48px;
		padding-left: 48px;
	}

	.scfslider--standard .splide:not(.is-initialized) .splide__slide {
		width: calc((100% - 24px) / 2);
	}
}

@media (min-width: 993px) {
	.scfslider--grande .splide:not(.is-initialized) .splide__track {
		padding-right: 320px;
		padding-left: 320px;
	}

	.scfslider--grande .splide:not(.is-initialized) .splide__slide {
		margin-right: 48px;
	}

	.scfslider--standard .splide:not(.is-initialized) .splide__slide {
		width: calc((100% - 48px) / 3);
	}
}