/* Before/after comparison slider.
 *
 * Replaces the twenty20 jQuery plugin (and with it jQuery itself). Visual
 * design is carried over from twenty20.css unchanged — 38px ringed handle,
 * 3px white guide lines with a soft glow, labels that fade in on hover — so
 * this is a behaviour swap, not a redesign.
 *
 * The drag layer is the part that is genuinely different: Pointer Events with
 * setPointerCapture, clip-path instead of the deprecated clip:rect(), and
 * touch-action split so vertical page scroll still works on a phone while a
 * horizontal drag on the image is captured.
 */

.cmp {
	position: relative;
	overflow: hidden;
	line-height: 0;               /* kill the inline-image descender gap */
	background: #000;
	isolation: isolate;
	contain: layout paint;
	cursor: ew-resize;

	/* Vertical scrolling passes through; horizontal drag is ours. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

/* The "after" image sits in normal flow and therefore defines the box height,
 * so any aspect ratio works without hardcoding a padding-top percentage. */
.cmp-img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-user-drag: none;
}

/* The "before" image is overlaid and revealed by clip-path. */
.cmp-before {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: inset(0 50% 0 0);
	will-change: clip-path;
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* --- handle ------------------------------------------------------------- */

.cmp-handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 38px;
	height: 38px;
	margin: -19px 0 0 -19px;
	border: 3px solid #fff;
	border-radius: 1000px;
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	box-sizing: border-box;
	will-change: left;
	z-index: 30;
}

.cmp-handle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}

/* The guide lines running to the top and bottom edges. 9999px is how the
 * original achieved this; overflow:hidden on .cmp does the trimming. */
.cmp-handle::before,
.cmp-handle::after {
	content: '';
	position: absolute;
	left: 50%;
	width: 3px;
	height: 9999px;
	margin-left: -1.5px;
	background: #fff;
}

.cmp-handle::before {
	bottom: 50%;
	margin-bottom: 22px;
	box-shadow: 0 3px 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
}

.cmp-handle::after {
	top: 50%;
	margin-top: 22px;
	box-shadow: 0 -3px 0 #fff, 0 0 12px rgba(51, 51, 51, 0.5);
}

/* --- arrows inside the handle ------------------------------------------- */

.cmp-arrow {
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -6px;
	border: 6px inset transparent;
}

.cmp-arrow-l { border-right: 6px solid #fff; left: 50%; margin-left: -17px; }
.cmp-arrow-r { border-left: 6px solid #fff; right: 50%; margin-right: -17px; }

/* --- hover dim + labels ------------------------------------------------- */

.cmp-overlay {
	position: absolute;
	inset: 0;
	z-index: 25;
	background: rgba(0, 0, 0, 0);
	transition: background 0.5s;
}

.cmp:hover .cmp-overlay { background: rgba(0, 0, 0, 0.5); }
.cmp.cmp-dragging .cmp-overlay { background: rgba(0, 0, 0, 0); }

.cmp-label {
	position: absolute;
	bottom: 0;
	max-width: 50%;
	padding: 4px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 2px;
	color: #fff;
	font-size: 13px;
	line-height: normal;
	letter-spacing: 0.1em;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.5s;
}

.cmp-label-before { left: 1px; }
.cmp-label-after  { right: 1px; }

.cmp:hover .cmp-label { opacity: 1; }
.cmp.cmp-dragging .cmp-label { opacity: 0; }

/* Without JS the overlay would hide a static 50/50 split; leave it visible. */
.no-js .cmp-handle,
.no-js .cmp-overlay { display: none; }