/**
 * Bopea Feature Slider — overrides for custom controls.
 * The theme CSS handles all base styles for .jl-eb-sl, .jl_lg_op, etc.
 */

/* Il tema usa --jlpagi-ma per il margin dei punti di paginazione
   ma non la definisce mai. Impostiamo 10px come valore corretto. */
.jl-eb-sl {
	--jlpagi-ma: 10px;
}

/* "Casuale tra ultimi N": chrome (frecce + dots) nascosto finché Swiper
   non è inizializzato — niente frecce orfane durante il caricamento. Le
   slide restano sempre visibili (hero/LCP-safe). visibility è paint-only
   su elementi absolute: niente CLS. Il selettore batte il
   `visibility:visible` esplicito del tema sui div .jl_arpw. Classe emessa
   solo sul frontend (mai nell'editor) e rimossa dal JS. */
.jl-eb-sl.bpcw-chrome-pending .jl_arpw,
.jl-eb-sl.bpcw-chrome-pending .jl_arpw div,
.jl-eb-sl.bpcw-chrome-pending .jl_spw {
	visibility: hidden !important;
}

/* Arrow hover colors — per-button, not on container hover. */
.jl-eb-sl .jl-swiper-button-next:hover .jl-spn-inner,
.jl-eb-sl .jl-swiper-button-prev:hover .jl-spn-inner {
	background: var(--jl-arrow-hbg, var(--jl-arrow-bg, #fff));
	color: var(--jl-arrow-hcolor, var(--jl-arrow-color, #000));
}

/* Caption alignment defaults — left + flex-start (matches original widget). */
.jl_lg_opt {
	--jl-algin-h: flex-start;
}
.jl_ov_el .jl_fe_text {
	text-align: var(--jl-t-align, left) !important;
}

/* Caption width — constrain the inner container. */
.jl_ov_el .jl_fe_text .jl_fe_inner {
	max-width: var(--jl-cap-w, 650px);
}

/* Mouse drag: i link-overlay (jl_cap_ov) e le immagini avviano il drag
   nativo del browser che sottrae il gesto a Swiper. Doppia cintura
   (il preventDefault su dragstart nel JS copre anche Firefox). */
.jl-eb-sl .jl_mslide img,
.jl-eb-sl .jl_mslide a {
	-webkit-user-drag: none;
	user-select: none;
}

.jl-eb-sl .swiper-wrapper {
	cursor: grab;
}

.jl-eb-sl .swiper-wrapper:active {
	cursor: grabbing;
}

/* Mobile: nel layout jl-eb-msl il tema posiziona i punti di paginazione
   in assoluto sul fondo dello slider (height fissa + overflow hidden),
   ma con margine 30px che li fa "fluttuare" sopra autore/data.
   Li abbassiamo al bordo (bottom ridotto, margin azzerato) e riserviamo
   una fascia minima nella didascalia. Innocuo con punti disattivati. */
@media (max-width: 767px) {
	.jl-eb-sl.jl-eb-msl .jl_spw {
		bottom: 8px;
	}

	.jl-eb-sl.jl-eb-msl .jl_spw .swiper-pagination {
		margin: 0;
	}

	.jl-eb-sl.jl-eb-msl .jl_mslide .jl_fe_text {
		padding-bottom: 22px;
	}
}