/* Elab13 Sidebar Banner - Frontend */
.el13sb-wrap{
	position:relative;
	width:100%;
	margin:0 0 1rem;
	line-height:0;
}
.el13sb-slide{
	width:100%;
}
.el13sb-img{
	display:block;
	width:100%;
	height:auto;
	margin:0;
}
.el13sb-rounded .el13sb-img{
	border-radius:8px;
	overflow:hidden;
}
.el13sb-link{
	display:block;
	text-decoration:none;
	border:0;
	outline:none;
	transition:opacity .2s ease, transform .2s ease;
}
.el13sb-link:hover{
	opacity:.92;
}
.el13sb-link:focus-visible{
	outline:2px solid currentColor;
	outline-offset:2px;
}

/* ===== Carousel ===== */
.el13sb-mode-carousel{
	overflow:hidden;
}
.el13sb-mode-carousel .el13sb-slide{
	display:none;
}
.el13sb-mode-carousel .el13sb-slide.is-active{
	display:block;
}

/* Transizione dissolvenza */
.el13sb-trans-fade.el13sb-mode-carousel{
	position:relative;
}
.el13sb-trans-fade.el13sb-mode-carousel .el13sb-slide{
	display:block;
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity .6s ease;
	pointer-events:none;
}
.el13sb-trans-fade.el13sb-mode-carousel .el13sb-slide.is-active{
	position:relative;
	opacity:1;
	pointer-events:auto;
}

/* Transizione scorrimento */
.el13sb-trans-slide.el13sb-mode-carousel .el13sb-track{
	display:flex;
}

/* ===== Dots ===== */
.el13sb-dots{
	display:flex;
	justify-content:center;
	gap:6px;
	margin-top:8px;
	line-height:1;
}
.el13sb-dot{
	width:9px;
	height:9px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgba(0,0,0,.22);
	cursor:pointer;
	transition:background .2s ease, transform .2s ease;
}
.el13sb-dot:hover{
	background:rgba(0,0,0,.4);
}
.el13sb-dot.is-active{
	background:rgba(0,0,0,.65);
	transform:scale(1.2);
}
/* Area di tocco più ampia sui dispositivi touch (accessibilità WCAG ~24px) */
.el13sb-dot::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:24px;
	height:24px;
	transform:translate(-50%,-50%);
}
.el13sb-dot{
	position:relative;
}
@media (prefers-color-scheme: dark){
	.el13sb-dot{background:rgba(255,255,255,.3);}
	.el13sb-dot.is-active{background:rgba(255,255,255,.85);}
}

/* Nascondi per dispositivo / quando non ci sono slide valide */
.el13sb-dev-hidden{
	display:none !important;
}

/* Sicurezza responsive: il banner non sfora mai il contenitore */
.el13sb-wrap,
.el13sb-img{
	max-width:100%;
	box-sizing:border-box;
}
.el13sb-mode-carousel.el13sb-trans-fade .el13sb-slide{
	width:100%;
}

@media (prefers-reduced-motion: reduce){
	.el13sb-link,
	.el13sb-trans-fade.el13sb-mode-carousel .el13sb-slide{
		transition:none;
	}
}