/* =========================================================
   Celarix Carousel (Showcase Block)
   - Screenshot flush top/left/right
   - Caption bottom-left
   - Prev/Next bottom-right (no overlay)
   - Dots bottom-left, link bottom-right
   - Works with JS display:none/block
   - Aces Palette only
   ========================================================= */

.celarix-carousel{

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

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

/* Viewport / Frame */
.celarix-carousel__viewport{
	position:relative;
	overflow:hidden;
}

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

/* Slide */
.celarix-carousel__slide{
	display:none; /* JS setzt is-active + display:block */
	padding:0px;
	margin:0px;
	border:0px;
	background:transparent;
	border:1px solid var(--col-contentbox-border-dark);
	border-radius:var(--border-radius-default) !important;
	box-shadow:var(--box-shadow-1) !important;
}

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

/* Image: flush, no inner frame */
.celarix-carousel__slide img{
	width:100%;
	height:auto;
	display:block;

	margin:0px;
	padding:0px;

	border:0px;
	background:transparent;
}

/* ---------------------------------------------------------
   Footer (inside box)
   Row 1: caption left + arrows right
   Row 2: dots left + link right
   --------------------------------------------------------- */

.celarix-carousel__footer{
	display:flex;
	flex-direction:column;
	gap:10px;

	padding:12px 0px 0px 0px;
}

/* Top row */
.celarix-carousel__footer-top{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:12px;
}

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

	flex:1 1 auto;
	min-width:0;
}

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

/* Nav wrap (right side) */
.celarix-carousel__navwrap{
	padding:10px;
	display:flex;
	gap:10px;
	align-items:center;
	flex:0 0 auto;
}

/* Nav Buttons (NOT overlay) */
.celarix-carousel__nav{
	position:static;
	transform:none;
	z-index:auto;

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

	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;
}

.celarix-carousel__nav:hover{
	background:var(--col-aces-blue);
	color:#ffffff;
	border-color:var(--col-aces-blue);
	transform:scale(1.06);
}

.celarix-carousel__nav:active{
	transform:scale(0.98);
}

/* Keep modifiers for JS hooks */
.celarix-carousel__nav--prev{}
.celarix-carousel__nav--next{}

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

.celarix-carousel__nav:focus-visible{
	border-color:rgba(245,166,35,.75);
}

/* Bottom row */
.celarix-carousel__footer-bottom{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

/* Dots */
.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:0px;
	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{
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:720px){

	.celarix-carousel{
		max-width:100%;
	}

	.celarix-carousel__footer{
		padding:10px 10px 10px 10px;
	}

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

	.celarix-carousel__navwrap{
		align-self:flex-end;
		padding-top:0px;
	}

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

	.celarix-carousel__footer-bottom{
		flex-direction:column;
		align-items:flex-start;
	}
}


.celarix-carousel__nav{
	font-size:22px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
}

.celarix-carousel__nav span{
	display:block;
	transform:translateY(-1px);
}