/* =========================================================
   Celarix Carousel (Clean Block)
   - Aces Palette only
   - Stable clickable nav
   - Works with JS display:none/block
   ========================================================= */

.celarix-carousel{
	--aces-dark-blue:#062f60;
	--aces-orange:#F5A623;
	--aces-dark-orange:#E89A1F;
	--aces-shadow-blue:#0B1F3A;

	--radius-lg:18px;
	--radius-md:12px;

	--border:rgba(11,31,58,.12);
	--text:rgba(11,31,58,.78);

	--nav-size:44px;
	--nav-gap:10px;

	max-width:980px;
	margin:18px 0 0 0;
}

/* Viewport / Frame */
.celarix-carousel__viewport{
	position:relative;
	border-radius:var(--radius-lg);
	border:1px solid var(--border);
	box-shadow:0 14px 40px rgba(11,31,58,.16);
	overflow:hidden;
	background:#fff;
}

/* Track holds exactly one visible slide (JS toggles display) */
.celarix-carousel__track{
	position:relative;
	z-index:1;
	padding:16px;
}

/* Slide */
.celarix-carousel__slide{
	display:none; /* JS setzt is-active + display:block */
}

.celarix-carousel__slide.is-active{
	display:block;
}

/* Image */
.celarix-carousel__slide img{
	width:100%;
	height:auto;
	display:block;
	border-radius:var(--radius-md);
	border:1px solid rgba(11,31,58,.10);
}

/* Caption */
.celarix-carousel__caption{
	margin-top:12px;
	line-height:1.5;
	color:var(--text);
}

.celarix-carousel__caption strong{
	display:inline-block;
	margin-bottom:4px;
	color:var(--aces-dark-blue);
}

/* ---------------------------------------------------------
   NAVIGATION
   Make buttons ALWAYS clickable (fix for overlay issues)
   --------------------------------------------------------- */

/* Let slides never steal clicks */
.celarix-carousel__track,
.celarix-carousel__slide,
.celarix-carousel__slide *{
	pointer-events:none;
}

/* Only the controls accept clicks */
.celarix-carousel__nav,
.celarix-carousel__footer,
.celarix-carousel__dot,
.celarix-carousel__more{
	pointer-events:auto;
}

/* Nav Buttons */
.celarix-carousel__nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:9999;

	width:var(--nav-size);
	height:var(--nav-size);
	border-radius:999px;

	display:flex;
	align-items:center;
	justify-content:center;

	border:1px solid rgba(20,60,110,.22);
	background:rgba(255,255,255,.88);
	color:var(--col-aces-blue);

	font-size:26px;
	line-height:1;
	font-weight:900;

	cursor:pointer;
	user-select:none;

	box-shadow:0 10px 22px rgba(11,31,58,.18);
	transition:transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.celarix-carousel__nav:hover{
	background:var(--col-aces-blue);
	color:#ffffff;
	border-color:var(--col-aces-blue);
	box-shadow:0 14px 28px rgba(11,31,58,.28);
	transform:translateY(-50%) scale(1.06);
}
.celarix-carousel__nav:active{
	transform:translateY(-50%) scale(0.98);
}

.celarix-carousel__nav--prev{
	left:var(--nav-gap);
}

.celarix-carousel__nav--next{
	right:var(--nav-gap);
}

/* Optional: show focus nicely */
.celarix-carousel__nav:focus{
	outline:none;
}

.celarix-carousel__nav:focus-visible{
	box-shadow:0 0 0 4px rgba(245,166,35,.32), 0 10px 22px rgba(11,31,58,.18);
	border-color:rgba(245,166,35,.75);
}

/* ---------------------------------------------------------
   Footer: dots + link
   --------------------------------------------------------- */

.celarix-carousel__footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:12px 2px 0 2px;
}

.celarix-carousel__dots{
	display:flex;
	gap:8px;
	align-items:center;
}

.celarix-carousel__dot{
	width:10px;
	height:10px;
	border-radius:999px;
	border:1px solid rgba(20,60,110,.28);
	background:rgba(20,60,110,.12);
	cursor:pointer;
	padding:0;
	transition:transform .12s ease, background .12s ease, border-color .12s ease;
}

.celarix-carousel__dot:hover{
	transform:scale(1.15);
	border-color:rgba(245,166,35,.70);
	background:rgba(245,166,35,.30);
}

.celarix-carousel__dot.is-active{
	border-color:rgba(245,166,35,.85);
	background:var(--aces-orange);
}

/* Footer Link */
.celarix-carousel__more{
	display:inline-flex;
	align-items:center;
	gap:8px;
	text-decoration:none;
	font-weight:900;
	color:var(--aces-blue);
	transition:color .12s ease, transform .12s ease;
}

.celarix-carousel__more:hover{
	color:var(--aces-dark-blue);
	transform:translateX(2px);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:720px){
	.celarix-carousel{
		max-width:100%;
	}

	.celarix-carousel__track{
		padding:12px;
	}

	.celarix-carousel__nav{
		width:42px;
		height:42px;
		font-size:24px;
	}

	.celarix-carousel__footer{
		flex-direction:column;
		align-items:flex-start;
		padding-top:10px;
	}
}