/**
 * Modulo Carosello — disposizione degli accessori.
 *
 * Qui c'è solo ciò che le utility Bootstrap non sanno fare: portare in flusso gli
 * elementi che Swiper posiziona in assoluto, e dare alle frecce in testata la forma
 * tonda. Tutto il resto — allineamenti, spaziature — sta come classi Bootstrap nel
 * markup, dove il cliente le vede e le può cambiare dal pannello proprietà.
 *
 * I colori non sono scritti qui: si ereditano con `currentColor` e con le variabili di
 * Swiper, così il carosello prende la tavolozza del sito su cui gira invece di
 * imporne una sua.
 */

.ns-carousel {
	position: relative;
}

/* Un carosello senza slide non ha comandi da mostrare: testata e barra sparirebbero
   comunque, ma la spaziatura della testata lascerebbe un buco in pagina. La condizione
   sta qui e non nel JavaScript perché è una condizione sul markup, e detta così vale
   sempre — anche prima che gli script partano, anche se non partono affatto.
   Il titolo è contenuto, non un comando: se c'è, la testata resta. */
/* Stessa cosa quando le slide ci sono ma ci stanno tutte: Swiper se ne accorge e
   marca i comandi come «bloccati» (`swiper-button-lock`, `swiper-scrollbar-lock`),
   perché non c'è niente da scorrere. Nasconderli non basta — resterebbe la spaziatura
   della testata, cioè un buco. */
.ns-carousel:has(.swiper-button-lock) .ns-carousel-testata:not(:has(.ns-carosello-titolo)),
.ns-carousel > .swiper-scrollbar.swiper-scrollbar-lock,
.ns-carousel:not(:has(.swiper-slide)) .ns-carousel-testata:not(:has(.ns-carosello-titolo)),
.ns-carousel:not(:has(.swiper-slide)) > .swiper-scrollbar {
	/* `!important` serve davvero: la testata porta `d-flex`, e le utility Bootstrap
	   sono dichiarate `!important`. Senza, questa regola perde — e perdeva anche lo
	   stile inline che ci avevo messo prima dal JavaScript, per lo stesso motivo. */
	display: none !important;
}

/* ── Testata: titolo a sinistra, frecce a destra ──────────────────────────── */

/* Senza titolo e con le frecce sul carosello, la testata non deve occupare spazio:
   le frecce sono fuori dal flusso, quindi resta una riga alta zero. */
.ns-carousel-testata {
	min-height: 0;
}

.ns-carousel-frecce {
	flex-shrink: 0;
	/* Senza titolo le frecce sono l'unico figlio della testata, e
	   `justify-content-between` le manda a inizio riga: a sinistra, dove nessuno le
	   cerca. Con il margine automatico restano a destra in entrambi i casi. */
	margin-left: auto;
}

/* Le frecce di Swiper nascono in assoluto, a metà altezza del carosello. In testata
   vanno rimesse nel flusso, o si sovrappongono alle immagini. */
.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-prev,
.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-next {
	position: static;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	opacity: 0.55;
	transition: opacity 0.15s ease;
}

.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-prev:hover,
.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-next:hover {
	opacity: 1;
}

.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-prev::after,
.ns-carousel[data-arrows="alto"] .ns-carousel-frecce .swiper-button-next::after {
	font-size: 0.8rem;
	font-weight: 700;
}

/* Arrivata in fondo, la freccia si spegne: è Swiper ad aggiungere la classe. */
.ns-carousel .swiper-button-disabled {
	opacity: 0.22;
	pointer-events: none;
}

/* Frecce sul carosello (comportamento di Swiper): la testata resta ma non pesa. */
.ns-carousel:not([data-arrows="alto"]) .ns-carousel-frecce {
	position: static;
}

/* ── Pallini ──────────────────────────────────────────────────────────────── */

/* Sotto: in flusso, sotto le slide. Vale sia che stiano dentro `.swiper` sia fuori,
   perché la regola non dipende da dove sono nel DOM. */
.ns-carousel[data-dots="sotto"] .swiper-pagination {
	position: static;
	margin-top: 0.75rem;
	transform: none;
}

/* Swiper colora i pallini di nero fisso: su un sito scuro spariscono. Con
   `currentColor` prendono il colore del testo intorno, qualunque sia. */
.ns-carousel .swiper-pagination-bullet {
	background: currentColor;
	opacity: 0.3;
}

.ns-carousel .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ── Barra di scorrimento ─────────────────────────────────────────────────── */

.ns-carousel > .swiper-scrollbar {
	position: static;
	width: 100%;
	height: 3px;
	margin-top: 1rem;
	background: currentColor;
	opacity: 0.15;
	border-radius: 2px;
}

.ns-carousel > .swiper-scrollbar .swiper-scrollbar-drag {
	background: currentColor;
	opacity: 1;
	border-radius: 2px;
}

/* Spento: si nasconde qui invece che togliere l'elemento dal markup, così cambiare
   idea nel pannello non riscrive l'HTML. */
.ns-carousel:not([data-scrollbar="true"]) > .swiper-scrollbar {
	display: none;
}

/* ── Modalità sfondo ──────────────────────────────────────────────────────────
   Il carosello riempie la sezione e sta dietro il contenuto. Il posizionamento
   se lo porta il contenitore, con le classi Bootstrap che aveva l'immagine che
   sostituisce: qui c'è solo ciò che serve perché le slide siano alte quanto lui.  */

.ns-carousel[data-sfondo="true"],
.ns-carousel[data-sfondo="true"] .swiper,
.ns-carousel[data-sfondo="true"] .swiper-wrapper,
.ns-carousel[data-sfondo="true"] .swiper-slide {
	height: 100%;
}

.ns-carousel[data-sfondo="true"] .swiper-slide > img,
.ns-carousel[data-sfondo="true"] .swiper-slide > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Un fondale non ha comandi: quelli stanno sulla barra «Sfondo», che è sopra il
   contenuto e quindi cliccabile. Dentro il carosello sarebbero dietro di esso. */
.ns-carousel[data-sfondo="true"] .ns-carousel-testata,
.ns-carousel[data-sfondo="true"] > .swiper-scrollbar,
.ns-carousel[data-sfondo="true"] .swiper-pagination,
.ns-carousel[data-sfondo="true"] .swiper-button-prev,
.ns-carousel[data-sfondo="true"] .swiper-button-next {
	display: none !important;
}