/**
 * Stili del blocco `fl/carosello-immagini`.
 *
 * Due effetti supportati con lo stesso markup (.carosello-immagini__slide
 * dentro .carosello-immagini__track): dissolvenza incrociata via opacity
 * (variante --fade, come già usato in carosello-con-descrizione.css) e
 * scorrimento orizzontale via transform (variante --slide), attivati
 * dalla classe sul wrapper e animati da assets/js/carosello-immagini.js.
 *
 * Dimensioni, spaziature e colori/opacità di frecce e puntini sono
 * impostati per istanza dai controlli del blocco: render.php li scrive come
 * custom property CSS inline sul wrapper (--carosello-immagini-*), lette
 * qui con dei fallback ai token del design system.
 */

.carosello-immagini {
	position: relative;
	padding-top: var(--carosello-immagini-padding-top, 0);
	padding-right: var(--carosello-immagini-padding-right, 0);
	padding-bottom: var(--carosello-immagini-padding-bottom, 0);
	padding-left: var(--carosello-immagini-padding-left, 0);
	margin-top: var(--carosello-immagini-margin-top, 0);
	margin-right: var(--carosello-immagini-margin-right, 0);
	margin-bottom: var(--carosello-immagini-margin-bottom, 0);
	margin-left: var(--carosello-immagini-margin-left, 0);
}

.carosello-immagini__viewport {
	position: relative;
	aspect-ratio: 16 / 9;
	min-height: var(--carosello-immagini-min-height, auto);
	overflow: hidden;
	border-radius: var(--carosello-immagini-border-radius, 8px);
}

.carosello-immagini__track {
	position: relative;
	width: 100%;
	height: 100%;
}

.carosello-immagini__slide {
	margin: 0;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

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

/* Prima slide visibile di default: copre sia il caso "una sola immagine"
   (nessun JS necessario) sia il caricamento iniziale, prima che il JS
   assegni .is-active. */
.carosello-immagini__slide:first-child {
	opacity: 1;
	transform: none;
}

/* Variante fade: dissolvenza incrociata via opacity. */
.carosello-immagini--fade .carosello-immagini__slide {
	opacity: 0;
	transform: none;
}

.carosello-immagini--fade .carosello-immagini__slide.is-active {
	opacity: 1;
}

/* Variante slide: scorrimento orizzontale via transform. La slide attiva è
   sempre a translateX(0); le altre restano fuori campo a destra finché non
   diventano attive (il JS le riposiziona a sinistra dopo il transito). */
.carosello-immagini--slide .carosello-immagini__slide {
	opacity: 1;
	transform: translateX(100%);
}

.carosello-immagini--slide .carosello-immagini__slide.is-active {
	transform: translateX(0);
}

.carosello-immagini--slide .carosello-immagini__slide.is-previous {
	transform: translateX(-100%);
}

/* Frecce di navigazione: colore, sfondo e opacità configurabili dal tab
   "Frecce" dei controlli del blocco. */
.carosello-immagini__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 999px; /* --radius-pill */
	background-color: var(--carosello-immagini-freccia-sfondo, var(--wp--preset--color--primary));
	color: var(--carosello-immagini-freccia-colore, var(--wp--preset--color--base));
	opacity: var(--carosello-immagini-freccia-opacita, 1);
	font-family: var(--wp--preset--font-family--input-mono);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(33, 42, 84, 0.08), 0 8px 24px rgba(33, 42, 84, 0.08); /* --shadow-card */
	transition: opacity 150ms ease, box-shadow 150ms ease;
}

.carosello-immagini__arrow:hover {
	opacity: 1;
}

.carosello-immagini__arrow--prev {
	left: var(--wp--preset--spacing--20);
}

.carosello-immagini__arrow--next {
	right: var(--wp--preset--spacing--20);
}

/* Puntini di paginazione: colore/opacità inattivo e colore attivo
   configurabili dal tab "Puntini" dei controlli del blocco. */
.carosello-immagini__dots {
	position: absolute;
	bottom: var(--wp--preset--spacing--20);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: var(--wp--preset--spacing--10);
}

.carosello-immagini__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 999px; /* --radius-pill */
	background-color: var(--carosello-immagini-puntino-colore, var(--wp--preset--color--base));
	opacity: var(--carosello-immagini-puntino-opacita, 0.5);
	cursor: pointer;
	transition: opacity 150ms ease, background-color 150ms ease;
}

.carosello-immagini__dot.is-active {
	background-color: var(--carosello-immagini-puntino-colore-attivo, var(--wp--preset--color--base));
	opacity: 1;
}

/* CLAUDE.md: qualsiasi classe che parte da opacity/transform nascosti e
   viene resa visibile solo da JS deve restare visibile nell'editor, dove
   gli script enqueued su wp_enqueue_scripts non girano mai. */
.editor-styles-wrapper .carosello-immagini__slide,
.block-editor-block-preview__content .carosello-immagini__slide {
	opacity: 1 !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.carosello-immagini__slide {
		transition: none !important;
	}
}

/* Opzione "Nascondi frecce su mobile/tablet piccolo" del blocco: il cambio
   immagine resta comunque disponibile via swipe (assets/js/carosello-immagini.js),
   le frecce spariscono solo sotto la stessa soglia usata per l'impilamento
   delle wp:columns nel resto del tema (781px, vedi assets/css/il-festival.css). */
@media (max-width: 781px) {
	.carosello-immagini[data-nascondi-frecce-mobile="1"] .carosello-immagini__arrow {
		display: none;
	}
}