/**
 * Bagliori Booking — il carosello, e basta.
 *
 * Il meccanismo per far scorrere delle schede di lato: la pista, i puntini, le
 * frecce facoltative. Non sa cosa contiene, e non deve saperlo — le schede dei
 * consulti e quelle degli eventi hanno un aspetto diverso, e chi le disegna e'
 * il foglio di stile che le riguarda.
 *
 * Sta in un file suo perche' adesso lo usano in due. Lasciarlo dentro
 * booking.css avrebbe significato o caricare quattromila righe di calendario
 * per far scorrere tre locandine, o riscrivere le stesse regole in events.css
 * e vederle divergere alla prima modifica.
 */

/* ---------- Slider del catalogo ---------- */

.bgl-slider {
	position: relative;
}

.bgl-slider-track {
	-ms-overflow-style: none;
	display: grid;
	gap: 16px;
	grid-auto-columns: 78%;
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding: 2px 2px 6px;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.bgl-slider-track::-webkit-scrollbar {
	display: none;
}

@media (min-width: 620px) {
	.bgl-slider-track { grid-auto-columns: 46%; }
}

@media (min-width: 900px) {
	.bgl-slider-track { grid-auto-columns: 31%; }
}

/* ---------- Frecce dello slider ---------- */

/*
 * La riga dei puntini sta appena sotto le schede e non lascia code sotto di
 * sé: il margine inferiore lo decide il tema, non noi.
 */
.bgl-slider-nav {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 8px 0 0;
}

.bgl-slider-btn {
	align-items: center;
	background: #111;
	border: 1px solid #111;
	border-radius: 99px;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	/* 44px è la misura sotto la quale un dito manca il bersaglio. */
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
	width: 44px;
}

.bgl-slider-btn svg {
	display: block;
	height: 22px;
	width: 22px;
}

.bgl-slider-btn:hover:not([disabled]),
.bgl-slider-btn:focus-visible:not([disabled]) {
	background: #fff;
	border-color: #111;
	color: #111;
}

/*
 * Disabilitata deve restare VISIBILE. Prima era a opacità 0.3 su fondo bianco:
 * la freccia indietro, che all'apertura è sempre disabilitata, semplicemente
 * spariva e sembrava che ce ne fosse una sola. Ora diventa un contorno grigio:
 * si vede che c'è e si capisce che per ora non serve.
 */
.bgl-slider-btn[disabled] {
	background: transparent;
	border-color: var(--bgl-line);
	color: var(--bgl-muted);
	cursor: default;
	opacity: 1;
}

/*
 * Puntini tondi, non trattini che si allungano: quello attivo si distingue
 * perché è pieno e nero, gli altri sono cerchi vuoti. Resta un pallino anche
 * da attivo, come chiesto.
 */
.bgl-slider-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	justify-content: center;
	/* L'area cliccabile è più grande del pallino: 9px di diametro non si
	   centrano col dito, ma il padding trasparente sì. */
	margin: -8px;
	padding: 8px;
}

.bgl-slider-dots button {
	background: transparent;
	border: 1.5px solid var(--bgl-muted);
	border-radius: 50%;
	box-sizing: content-box;
	cursor: pointer;
	height: 9px;
	padding: 0;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	width: 9px;
}

.bgl-slider-dots button:hover {
	border-color: #111;
}

.bgl-slider-dots button[aria-current="true"] {
	background: #111;
	border-color: #111;
	transform: scale(1.18);
	width: 9px;
}

/*
 * Le frecce restano nella riga sotto, in mezzo ai puntini. Erano ai lati in
 * posizione assoluta, ma sporgevano fuori dal riquadro: dentro una colonna
 * Kadence finivano sopra il contenuto accanto. Un comando che esce dal suo
 * contenitore è un comando che prima o poi finisce sotto qualcos'altro.
 */
.bgl-slider-btn.is-prev,
.bgl-slider-btn.is-next {
	height: 36px;
	width: 36px;
}

.bgl-slider-btn svg {
	height: 18px;
	width: 18px;
}
/*
 * Quanto e' larga una scheda dentro la pista.
 *
 * Si mette qui e non sulla singola scheda: la pista e' una griglia, e la
 * larghezza delle colonne la decide lei. Il 78% su telefono non e' un caso —
 * lascia intravedere il bordo della scheda dopo, che e' il modo piu' onesto
 * di dire "si scorre" senza scriverlo.
 */
.bgl-slider-track > * {
	scroll-snap-align: start;
}

/* Una pagina sola: niente puntini, non c'è dove andare. */
.bgl-slider.is-single .bgl-slider-nav {
	display: none;
}

/* Il carosello non deve mai debordare dalla colonna che lo ospita. */
.bgl-slider {
	max-width: 100%;
	overflow: hidden;
}

.bgl-slider .bgl-slider-track {
	/* Lo spazio per l'ombra della scheda, senza barra orizzontale in più. */
	margin: 0 -2px;
	padding-left: 2px;
	padding-right: 2px;
}

/* Chi ha chiesto meno movimento non riceve lo scorrimento animato. */
@media (prefers-reduced-motion: reduce) {
	.bgl-slider-track {
		scroll-behavior: auto;
		transition: none;
	}
}