/* components/before-after-slider/before-after-slider.css */

.mvc-bas {
	--mvc-bas-radius: var(--mvc-radius-lg, 1rem);
	--mvc-bas-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.45), 0 8px 20px -12px rgba(0, 0, 0, 0.25);
	--mvc-bas-handle-bg: var(--mvc-color-bg, #ffffff);
	--mvc-bas-handle-fg: var(--mvc-color-primary, #111827);
	--mvc-bas-label-bg: rgba(0, 0, 0, 0.62);
	--mvc-bas-label-fg: #ffffff;

	position: relative;
	width: 100%;
	border-radius: var(--mvc-bas-radius);
	overflow: hidden;
	box-shadow: var(--mvc-bas-shadow);
	background: #000;
	user-select: none;
	touch-action: pan-y; /* let vertical scroll through, JS handles horizontal */
}

.mvc-bas__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	cursor: ew-resize;
}

.mvc-bas__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	display: block;
}

/* "After" sits at full size as the base layer. */
.mvc-bas__img--after { z-index: 1; }

/* The "before" image is wrapped in a clip layer the JS resizes. */
.mvc-bas__clip {
	position: absolute;
	inset: 0;
	width: 50%; /* overridden inline + by JS */
	height: 100%;
	overflow: hidden;
	z-index: 2;
	will-change: width;
}

.mvc-bas__img--before {
	/* Image inside .mvc-bas__clip — pin to the LEFT edge of the slider, not
	   the clip box, so it doesn't slide as the handle moves. */
	width: var(--mvc-bas-w, 100vw);
	max-width: none;
}

/* JS sets --mvc-bas-w to the actual stage width on init + resize. */
.mvc-bas[data-ready="1"] .mvc-bas__img--before {
	width: var(--mvc-bas-w);
}

/* ── Labels ───────────────────────────────────────────────────────── */

.mvc-bas__label {
	position: absolute;
	top: var(--space-3, 0.75rem);
	padding: 0.35rem 0.7rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: var(--mvc-bas-label-bg);
	color: var(--mvc-bas-label-fg);
	border-radius: 999px;
	z-index: 4;
	pointer-events: none;
	backdrop-filter: blur(6px);
}

.mvc-bas__label--before { left: var(--space-3, 0.75rem); }
.mvc-bas__label--after  { right: var(--space-3, 0.75rem); }

/* ── Handle ───────────────────────────────────────────────────────── */

.mvc-bas__handle {
	position: absolute;
	top: 0;
	left: 50%; /* overridden inline + by JS */
	width: 44px;
	height: 100%;
	margin-left: -22px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: ew-resize;
	z-index: 5;
	color: var(--mvc-bas-handle-fg);
	touch-action: none;
}

.mvc-bas__handle:focus-visible {
	outline: 3px solid var(--mvc-color-accent, #2563eb);
	outline-offset: 4px;
	border-radius: 8px;
}

.mvc-bas__handle-line {
	position: absolute;
	top: 0;
	left: 50%;
	width: 3px;
	height: 100%;
	margin-left: -1.5px;
	background: var(--mvc-bas-handle-bg);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 6px 18px rgba(0, 0, 0, 0.35);
}

.mvc-bas__handle-knob {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 46px;
	height: 46px;
	margin: -23px 0 0 -23px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--mvc-bas-handle-bg);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 12px 28px rgba(0, 0, 0, 0.32);
	transition: transform 160ms ease;
}

.mvc-bas__handle:hover .mvc-bas__handle-knob,
.mvc-bas__handle:focus-visible .mvc-bas__handle-knob {
	transform: scale(1.08);
}

.mvc-bas[data-dragging="1"] .mvc-bas__handle-knob {
	transform: scale(0.96);
}

/* When ready, suppress JS-incompatible cursor change globally on the stage. */
.mvc-bas[data-dragging="1"] .mvc-bas__stage { cursor: grabbing; }

/* ── Reduced motion ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.mvc-bas__handle-knob { transition: none; }
}

/* ── Small screens ────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.mvc-bas__stage   { aspect-ratio: 1 / 1; }
	.mvc-bas__label   { font-size: 0.64rem; padding: 0.3rem 0.55rem; }
	.mvc-bas__handle-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
}