/* =========================================================
   Before / After Comparison Widget — Styles
   All sizing is fluid: clamp(), %, aspect-ratio, CSS vars.
   ========================================================= */

.bafi-widget {
	--bafi-radius: 24px;
	--bafi-shadow: 0 20px 45px -10px rgba(20, 20, 20, 0.18);
	--bafi-pos: 50%;

	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background-color: #ffffff;
	border-radius: var(--bafi-radius);
	box-shadow: var(--bafi-shadow);
	overflow: hidden;
}

.bafi-widget * {
	box-sizing: border-box;
}

.bafi-container {
	position: relative;
	width: 100%;
	height: clamp(220px, 40vw, 460px);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: inherit;
	touch-action: none; /* allow custom drag handling on touch devices */
	-webkit-user-select: none;
	user-select: none;
}

/* Both image layers occupy the exact same box */
.bafi-image-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.bafi-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* The "after" layer is clipped to reveal only what's right of the divider */
.bafi-after {
	clip-path: inset(0 0 0 var(--bafi-pos));
	will-change: clip-path;
}

/* -----------------------------------------------------------
   Labels
   ----------------------------------------------------------- */
.bafi-label {
	position: absolute;
	top: clamp(10px, 3%, 20px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(11px, 1.4vw, 14px);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	border-radius: 30px;
	padding: 0.55em 1.2em;
	pointer-events: none;
	z-index: 3;
}

.bafi-label-before {
	left: clamp(10px, 3%, 20px);
	background-color: rgba(40, 40, 40, 0.55);
	color: #ffffff;
	backdrop-filter: blur(2px);
}

.bafi-label-after {
	right: clamp(10px, 3%, 20px);
	background-color: #d8ab53;
	color: #3a2e14;
}

/* -----------------------------------------------------------
   Divider + Handle
   ----------------------------------------------------------- */
.bafi-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bafi-pos);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	pointer-events: none; /* the handle re-enables pointer events */
}

.bafi-divider-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background-color: #ffffff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.bafi-handle {
	position: relative;
	width: clamp(44px, 8vw, 56px);
	height: clamp(44px, 8vw, 56px);
	border-radius: 50%;
	background-color: #ffffff;
	border: 3px solid #ffffff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	cursor: ew-resize;
	pointer-events: all;
	touch-action: none;
}

.bafi-handle:focus-visible {
	outline: 2px solid #d8ab53;
	outline-offset: 3px;
}

.bafi-handle svg {
	width: 10px;
	height: 10px;
	stroke: #8a8a8a;
	flex-shrink: 0;
}

.bafi-widget.bafi-dragging,
.bafi-widget.bafi-dragging * {
	cursor: ew-resize !important;
}

.bafi-widget.bafi-dragging .bafi-image,
.bafi-widget.bafi-dragging .bafi-label {
	-webkit-user-select: none;
	user-select: none;
}

/* -----------------------------------------------------------
   Responsive tweaks
   ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.bafi-container {
		height: clamp(220px, 45vw, 380px);
	}
}

@media (max-width: 767px) {
	.bafi-widget {
		--bafi-radius: 18px;
		width: 100%;
	}

	.bafi-container {
		height: clamp(200px, 60vw, 320px);
		aspect-ratio: 4 / 3;
	}

	.bafi-label {
		font-size: 11px;
		padding: 0.5em 0.9em;
	}
}