.fba {
	position: relative;
	overflow: hidden;
	line-height: 0;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	--fba-pos: 50%;
	--fba-line-w: 0.15em;
	--fba-line-c: #fff;
	--fba-handle-s: 2.5em;
	--fba-handle-bg: #fff;
	--fba-handle-ic: #1a1a1a;
	--fba-label-off: 1em;
}

.fba img {
	display: block;
	width: 100%;
	max-width: 100%;
	pointer-events: none;
}

/* Beide afbeeldingen altijd als cover, gecentreerd (mid/mid).
   Zonder ingestelde hoogte lost height:100% op naar auto → natuurlijke verhouding. */
.fba .fba-after img,
.fba .fba-before img {
	height: 100%;
	object-fit: cover;
	object-position: center center;
}

/* "Na" bepaalt de hoogte van de container, "Voor" ligt eroverheen en wordt geclipt */
.fba-after {
	height: 100%;
}

.fba-before {
	position: absolute;
	inset: 0;
	clip-path: inset(0 calc(100% - var(--fba-pos)) 0 0);
}

/* Verticale scheidingslijn */
.fba-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--fba-pos);
	width: var(--fba-line-w);
	transform: translateX(-50%);
	background: var(--fba-line-c);
	pointer-events: none;
}

/* Greep */
.fba-handle {
	position: absolute;
	top: 50%;
	left: var(--fba-pos);
	transform: translate(-50%, -50%);
	width: var(--fba-handle-s);
	height: var(--fba-handle-s);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fba-handle-bg);
	color: var(--fba-handle-ic);
	border: none;
	border-radius: 50%;
	padding: 0;
	margin: 0;
	cursor: ew-resize;
	box-shadow: 0 0.1em 0.4em rgba(0, 0, 0, 0.35);
	transition: box-shadow 0.15s ease;
}

.fba-handle svg {
	width: 60%;
	height: 60%;
}

.fba-handle:focus-visible {
	outline: 0.15em solid var(--fba-handle-bg);
	outline-offset: 0.2em;
}

.fba.is-dragging .fba-handle {
	box-shadow: 0 0.15em 0.6em rgba(0, 0, 0, 0.45);
}

/* Labels */
.fba-label {
	position: absolute;
	top: var(--fba-label-off);
	line-height: 1.4;
	font-size: 0.875em;
	white-space: nowrap;
	pointer-events: none;
	z-index: 1;
}

.fba-label-before {
	left: var(--fba-label-off);
}

.fba-label-after {
	right: var(--fba-label-off);
}
