/**
 * "Image comparison" block (arpl/compare) — front-end + shared styles.
 *
 * Two images stack in the same box; the second is wiped via clip-path keyed to
 * `--arpl-compare-pos` (0–100, the handle's left offset in %). The JS sets the
 * box's aspect ratio from the first image; the value below is the pre-JS
 * fallback.
 *
 * @package arpl-fse
 */

.arpl-compare {
	--arpl-compare-pos: 12;
	position: relative;
	overflow: hidden;
	aspect-ratio: var( --arpl-compare-ratio, 2 / 1 );
	border-radius: 10px;
	touch-action: pan-y;
	user-select: none;
}

.arpl-compare__images {
	position: absolute;
	inset: 0;
}

/* Both images fill the box; the second (last) sits on top and is wiped away. */
.arpl-compare__images > .wp-block-image {
	position: absolute;
	inset: 0;
	margin: 0;
}

.arpl-compare__images > .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.arpl-compare__images > .wp-block-image:last-child {
	clip-path: inset( 0 0 0 calc( var( --arpl-compare-pos, 12 ) * 1% ) );
	transition: clip-path 0.35s ease;
}

/* No transition while the user is actively dragging — only on release/snap. */
.arpl-compare.is-dragging .arpl-compare__images > .wp-block-image:last-child {
	transition: none;
}

/* Vertical divider following the wipe. */
.arpl-compare__divider {
	position: absolute;
	inset-block: 0;
	left: calc( var( --arpl-compare-pos, 12 ) * 1% );
	width: 2px;
	background: #fff;
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.08 );
	transition: left 0.35s ease;
}

.arpl-compare.is-dragging .arpl-compare__divider {
	transition: none;
}

/* Round handle centered on the divider line. */
.arpl-compare__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50% );
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
	cursor: ew-resize;
	touch-action: none;
}

.arpl-compare__handle:focus-visible {
	outline: 2px solid var( --wp--preset--color--primary, #3376bd );
	outline-offset: 2px;
}

/* Double-headed arrow drawn from a masked SVG so it takes the brand color. */
.arpl-compare__icon {
	width: 30px;
	height: 30px;
	background-color: var( --wp--preset--color--primary, #3376bd );
	-webkit-mask: var( --arpl-compare-arrows ) no-repeat center / contain;
	mask: var( --arpl-compare-arrows ) no-repeat center / contain;
}

@media ( prefers-reduced-motion: reduce ) {
	.arpl-compare__images > .wp-block-image:last-child,
	.arpl-compare__divider {
		transition: none;
	}
}

/* Smaller handle on mobile — 50px is oversized on narrow screens. */
@media ( max-width: 600px ) {
	.arpl-compare__handle {
		width: 30px;
		height: 30px;
	}

	.arpl-compare__icon {
		width: 18px;
		height: 18px;
	}
}