/* Blocco "slider": vedi nma_render_slider_block() in includes/blocks.php per la
   scelta fra le due varianti (statica vs loop) e gli adattamenti immagine
   (copertura/naturale/fissa-altezza/fissa-larghezza/fissa-max-larghezza/
   fissa-max-altezza, scelti in wp-admin). --slider-gap (var CSS impostata
   inline sulla sezione da "Spazio minimo fra le immagini" in wp-admin) e' lo
   spazio minimo garantito fra le immagini. */
.slider-block {
	width: 100%;
	max-width: var(--wide-size);
	margin: 0 auto;
}

.slider-block__img {
	display: block;
}

.slider-block__slide {
	overflow: hidden;
}

/* --fit-copertura (default): l'immagine riempie sempre il proprio riquadro,
   ritagliata se serve (object-fit:cover) - riquadro responsive (percentuale
   + aspect-ratio), non una dimensione in px letterale. */
.slider-block--fit-copertura .slider-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --fit-naturale e le 4 varianti --fit-fissa-*: nessun ritaglio, l'immagine
   mantiene le sue proporzioni originali. Di default l'altezza e' 480px (limite
   di sicurezza, altrimenti una foto enorme spaccherebbe il layout) e la
   larghezza segue da sola; con --fit-fissa-* il valore dichiarato a mano in
   wp-admin arriva come style="{width|height|max-width|max-height}:...px"
   inline sull'img (vedi nma_render_slider_block()) e sovrascrive solo QUELLA
   proprieta' - object-fit:contain fa si' che anche con piu' vincoli attivi
   insieme (es. altezza di default + larghezza massima dichiarata) l'immagine
   non venga mai distorta, solo raccolta dentro lo spazio disponibile.

   Il flex-shrink per rispettare --slider-gap si applica SOLO alla variante
   --static (flex-wrap:wrap, si stringono fino al min-width poi vanno a
   capo). Nella variante --loop niente shrink: il raggruppamento in "pagine"
   che stanno intere nel viewport lo fa assets/js/slider.js (vedi
   .slider-block__page piu' sotto), non serve rimpicciolire le immagini per
   farcele stare - se non basta piu' spazio vanno semplicemente nella pagina
   successiva. */
.slider-block--static.slider-block--fit-naturale .slider-block__slide,
.slider-block--static.slider-block--fit-fissa-altezza .slider-block__slide,
.slider-block--static.slider-block--fit-fissa-larghezza .slider-block__slide,
.slider-block--static.slider-block--fit-fissa-max-larghezza .slider-block__slide,
.slider-block--static.slider-block--fit-fissa-max-altezza .slider-block__slide {
	flex: 0 1 auto;
	min-width: 60px;
}

.slider-block--loop.slider-block--fit-naturale .slider-block__slide,
.slider-block--loop.slider-block--fit-fissa-altezza .slider-block__slide,
.slider-block--loop.slider-block--fit-fissa-larghezza .slider-block__slide,
.slider-block--loop.slider-block--fit-fissa-max-larghezza .slider-block__slide,
.slider-block--loop.slider-block--fit-fissa-max-altezza .slider-block__slide {
	flex: 0 0 auto;
}

.slider-block--fit-naturale .slider-block__img,
.slider-block--fit-fissa-altezza .slider-block__img,
.slider-block--fit-fissa-larghezza .slider-block__img,
.slider-block--fit-fissa-max-larghezza .slider-block__img,
.slider-block--fit-fissa-max-altezza .slider-block__img {
	width: auto;
	max-width: 100%;
	max-height: min(480px, 60vh);
	object-fit: contain;
}

/* --static (3 immagini o meno): nessun loop/nessuna freccia, non serve
   navigare. Stesso trucco di .statistiche__row (dati.css): justify-content:
   space-between mette la prima a sinistra, l'ultima a destra, quelle in
   mezzo distribuite/centrate - gap agisce come minimo garantito anche
   insieme a space-between (se lo spazio libero e' piu' di --slider-gap si
   allarga, mai sotto). */
.slider-block__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--slider-gap, 24px);
}

.slider-block--static.slider-block--fit-copertura .slider-block__slide {
	flex: 0 1 340px;
	min-width: 160px;
	aspect-ratio: 4 / 3;
}

/* --loop (4 immagini o piu'): frecce SEMPRE fuori dall'area immagini (riga
   flex [freccia][viewport][freccia], mai sovrapposte via position:absolute
   come in una versione precedente) e navigazione a "pagine" invece che a
   singola immagine, cosi' non si vede mai un'immagine tagliata a meta' dal
   bordo del viewport: assets/js/slider.js raggruppa le immagini reali in
   pagine (.slider-block__page, una per "schermata") dopo il caricamento -
   con --fit-copertura ogni pagina e' una sola immagine a schermo intero;
   con le altre varianti il JS impacchetta quante immagini stanno intere
   nella larghezza del viewport rispettando --slider-gap, distribuite con
   la prima al margine sinistro e l'ultima al destro (vedi
   justify-content:space-between piu' sotto) cosi' lo spazio si ridistribuisce
   in modo pulito ogni volta che lo slider si ferma - quelle che non entrano
   vanno nella pagina dopo, raggiunta scorrendo. Loop infinito: pagina
   clonata ai due estremi della track, salto di scatto quando lo scroll si
   ferma su un clone. */
.slider-block--loop {
	position: relative;
}

/* Campo "Titolo" ora un TextareaCustom vero e proprio (.txc-richtext, vedi
   text-formats.css): il contenuto tipico e' un <p> col suo margin-bottom di
   default del browser (~1em, mai azzerato in frontend - vedi commento su
   .txc-richtext h1-h4 li'), che gia' da solo crea un minimo di distacco dallo
   slider sotto - default qui a 0px apposta, nessuna spaziatura RADDOPPIATA
   sopra quella del paragrafo. --slider-title-gap (campo "Spazio sotto il
   titolo (px)" in wp-admin, vedi nma_render_slider_fields_at()/
   nma_render_slider_cpt_html_fields_at() in includes/meta-boxes.php) SI SOMMA a
   quel margine naturale, non lo sostituisce: e' pensata per aggiungere
   respiro in piu', non per essere l'unica fonte dello spazio. */
.slider-block__title {
	text-align: left;
	color: var(--color-mainText);
	margin-bottom: var(--slider-title-gap, 0px);
}

/* Riga [freccia][viewport][freccia] separata dal titolo: prima il flex era
   sulla section stessa (.slider-block--loop), ma con un h2 titolo come primo
   figlio finirebbe anch'esso nella riga invece che sopra. */
.slider-block__carousel {
	display: flex;
	align-items: center;
	gap: 12px;
}

.slider-block__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.slider-block__track {
	display: flex;
	/* Stesso --slider-gap delle card dentro ogni pagina (vedi
	   .slider-block__page piu' sotto): senza questo gap, due pagine
	   adiacenti si toccano bordo a bordo (prima card a sinistra/ultima
	   a destra di ogni pagina, vedi space-between) e durante l'animazione
	   di cambio pagina l'ultima card della pagina che esce sembra
	   incollata alla prima di quella che entra, invece di avere la stessa
	   distanza delle card in focus. */
	gap: var(--slider-gap, 12px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.slider-block__track::-webkit-scrollbar {
	display: none;
}

/* justify-content:space-between, non center: la prima immagine della
   pagina va al margine sinistro, l'ultima al margine destro (stesso trucco
   di .slider-block__row/.statistiche__row), niente spazio laterale uguale
   sui due lati quando il gruppo non riempie esattamente il viewport. */
.slider-block__page {
	flex: 0 0 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--slider-gap, 12px);
	scroll-snap-align: start;
	overflow: hidden;
}

/* space-between con una sola immagine in pagina (tipico su schermi stretti,
   dove magari ne entra una sola per volta) si comporta come flex-start - va
   a sinistra invece che al centro. La centriamo esplicitamente in quel caso. */
.slider-block__page:has(> .slider-block__slide:only-child) {
	justify-content: center;
}

.slider-block--loop.slider-block--fit-copertura .slider-block__page {
	aspect-ratio: 21 / 9;
}

.slider-block--loop.slider-block--fit-copertura .slider-block__slide {
	width: 100%;
	height: 100%;
}

.slider-block__arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-size: 28px;
	padding: 0;
}

/* Pallini di navigazione (opzionali, "Mostra i pallini" in wp-admin - vedi
   nma_render_slider_block()): un pallino per pagina reale, gestiti da
   assets/js/slider.js (data-slider-dots). Grigio chiaro = non in focus,
   grigio pieno = pagina corrente (.is-active, aggiornata da slider.js ad
   ogni cambio pagina, sia da freccia/autoplay che da scroll manuale). */
.slider-block__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
}

.slider-block__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #d0d0d0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.slider-block__dot:hover {
	background: #adadad;
}

.slider-block__dot.is-active {
	background: #6b6b6b;
}

@media (max-width: 767.98px) {
	.slider-block--static.slider-block--fit-copertura .slider-block__slide {
		flex: 1 1 100%;
		max-width: 420px;
	}

	.slider-block--loop.slider-block--fit-copertura .slider-block__page {
		aspect-ratio: 4 / 3;
	}

	.slider-block--fit-naturale .slider-block__img,
	.slider-block--fit-fissa-altezza .slider-block__img,
	.slider-block--fit-fissa-larghezza .slider-block__img,
	.slider-block--fit-fissa-max-larghezza .slider-block__img,
	.slider-block--fit-fissa-max-altezza .slider-block__img {
		max-height: 260px;
	}

	.slider-block__carousel {
		gap: 8px;
	}

	.slider-block__arrow {
		width: 36px;
		height: 36px;
		font-size: 22px;
	}
}