*,*::before,*::after{box-sizing:border-box}
/* Basic reset */
*,*::before,*::after{box-sizing:border-box}

/*
html,body{
	height:100%;
	margin:0;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
	background:#0b0c10;
	color:#111;
}
*/

.page{
	min-height:100vh;
	display:grid;
	place-items:center;
	padding:24px;
}

/* Slider container */
.ba-slider{
	--h:36px; /* handle visual diameter */
	position:relative;
	display:block;
	/* Force a square slider as requested */
	width:96vw;
	max-width:100%;
	aspect-ratio:1/1; /* carré */
	/* remove rounded corners */
	border-radius:0;
	overflow:hidden;
	background:#111;
	box-shadow:none;
	/* allow pointer gestures, but individual elements will set touch-action where needed */
	touch-action:manipulation;
}
.ba-slider43{
	aspect-ratio:4/3; /* rectangle (backwards-compatible class) */
}

/* Prefer explicit attribute-based control when JS sets data-display-mode */
.ba-slider[data-display-mode="rect"]{
	aspect-ratio:4/3;
}
.ba-slider[data-display-mode="square"]{
	aspect-ratio:1/1;
}

.ba-media{position:absolute;inset:0}
.ba-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before,.ba-after{width:100%;height:100%}

/* When the row should have equal height columns, allow the slider to fill the column height */
.ba-slider[data-display-mode="rect"]{
	/* In rect mode we prefer a 4/3 aspect ratio; height will be controlled by the slider's container
	   To keep changes local, we do not force 100% height of arbitrary parents here. */
	aspect-ratio:4/3;
}

/* Force the slider to fill its container (width and height) when explicitly requested */
.ba-slider[data-fill="true"]{
	width:100% !important;
	height:100% !important;
	aspect-ratio: auto !important;
}
.ba-slider[data-fill="true"] .ba-media img{width:100%;height:100%;object-fit:cover}

.ba-handle{
	position:absolute;
	/* center horizontally via left; vertical center via top:50% + translateY */
	/* We compute left using 50% less half of the HIT zone so the visual dot and the full-height line align exactly */
	--hit: calc(var(--h) * 2);
	/* center visual dot: left = 50% - half of the visual dot width */
	left: calc(50% - var(--h) / 2);
	top:50%;
	transform:translateY(-50%);
	width:var(--hit);
	height:var(--hit);
	display:grid;
	place-items:center;
	cursor:ew-resize;
	background:transparent;
	border:0;
	padding:0;
	outline:0;
	z-index:3; /* ensure the handle and its children sit above the images */
	/* disable default gestures on the handle so dragging works smoothly */
	touch-action:none;
}


.ba-handle-line{
	/* put the thin white line behind the round handle */
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:3px;
	background:#fff;
	border-radius:2px;
	pointer-events:none;
	z-index:1; /* behind the dot but above the images */
}

/* Separate full-height visible line element (fallback/explicit) */
.ba-line{
	position:absolute;
	top:0;
	bottom:0;
	/* align the line to the center X of the visual dot: use calc to offset half of the visual dot width */
	left:50%;
	transform:translateX(-50%);
	width:3px;
	background:#fff;
	border-radius:0;
	pointer-events:none;
	z-index:1; /* above images, behind handle */
}

.ba-handle-dot{
	/* keep the dot above the line */
	z-index:4;
	width:var(--h);
	height:var(--h);
	border-radius:50%;
	background:#fff;
	border:1px solid rgba(0,0,0,.12);
	display:grid;
	place-items:center;
	box-shadow:none;
}
.ba-handle-dot svg{width:64%;height:64%}

.ba-label{display:none}
.ba-range{display:none}

/* Mobile-specific tweaks */
@media (max-width:640px){
	.ba-slider{ aspect-ratio:1/1; }
	:root{ --h:44px } /* larger visual handle on touch devices */
	.ba-handle{ --hit: calc(var(--h) * 1.6); }
	.ba-handle-dot svg{ width:56%; height:56% }
}

.grid{display:grid;gap:28px}
@media (min-width:1000px){.grid{grid-template-columns:1fr 1fr}}
.credit{color:#94a3b8;font-size:12px;margin-top:8px}