/**
 * GP Compare — presentation.
 *
 * Uses the theme's own tokens so the widget belongs on the page rather than
 * looking like a bolt-on. Falls back to sane values if a token is absent.
 */

.gpcr {
	--gpcr-pos: 50%;
	--gpcr-ratio: 16 / 9;
	--gpcr-line: 2px;
	--gpcr-grip: 44px;
	--gpcr-accent: var(--gp-accent, #f97316);
	position: relative;
	margin: 1.75rem 0;
}

.gpcr__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--gpcr-ratio);
	overflow: hidden;
	background: var(--gp-surface-2, #0f0f0f);
	border-radius: var(--gp-radius, 10px);
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.gpcr__layer {
	position: absolute;
	inset: 0;
}

.gpcr__layer img {
	display: block;
	width: 100%;
	height: 100%;
	/* contain, not cover: cropping either image would change what is being
	   compared, which defeats the point of the widget. */
	object-fit: contain;
}

/* The AFTER layer is clipped from the left, revealing BEFORE underneath. */
.gpcr__layer--after {
	clip-path: inset(0 0 0 var(--gpcr-pos));
}

.gpcr__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--gpcr-pos);
	width: var(--gpcr-line);
	margin-left: calc(var(--gpcr-line) / -2);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: left 120ms linear;
}

.gpcr__grip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--gpcr-grip);
	height: var(--gpcr-grip);
	margin: calc(var(--gpcr-grip) / -2) 0 0 calc(var(--gpcr-grip) / -2);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* Two opposing arrows, drawn with borders: no icon font, no SVG request. */
.gpcr__grip::before,
.gpcr__grip::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -5px;
	border-block: 5px solid transparent;
}

.gpcr__grip::before {
	left: 10px;
	border-right: 6px solid #111;
}

.gpcr__grip::after {
	right: 10px;
	border-left: 6px solid #111;
}

/*
 * The range is the real control: transparent, stretched over the whole frame, so
 * a drag anywhere on the image moves the divider. It stays focusable for
 * keyboard and screen-reader users, and gets a visible focus ring.
 */
.gpcr__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
}

.gpcr__range:focus-visible {
	opacity: 1;
	background: transparent;
	outline: 3px solid var(--gpcr-accent);
	outline-offset: -3px;
}

/* Keep the thumb from being drawn when opacity is 0 but present. */
.gpcr__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1px;
	height: 1px;
	background: transparent;
	border: 0;
}

.gpcr__range::-moz-range-thumb {
	width: 1px;
	height: 1px;
	background: transparent;
	border: 0;
}

/* Mismatched pair: still renders, and says so for QA and the editor. */
.gpcr[data-gpcr-mismatch]::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px dashed #d63638;
	pointer-events: none;
	border-radius: var(--gp-radius, 10px);
}

/* A missing image must not leave a collapsed box. */
.gpcr[data-gpcr-state="error"] {
	display: none;
}

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

@media (max-width: 600px) {
	.gpcr {
		--gpcr-grip: 38px;
	}

	.gpcr__frame {
		border-radius: 0;
	}
}

/* ==========================================================================
   Editor
   The editor shows the same frame the reader gets, so these rules only add
   what the front end has no reason to need: placeholders for an empty slot,
   and a readable layout for the picker controls beneath the frame.
   ========================================================================== */

.gpcr--editor {
	/* The block wrapper sits in the editor canvas, which has its own padding. */
	margin: 0;
}

/* An empty slot must still read as "put a photo here", not as a broken image. */
.gpcr-editor__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #a7aaad;
	background-image:
		linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
		linear-gradient(-45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%),
		linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.04) 75%);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.gpcr-editor__actions {
	margin-top: 12px;
}

.gpcr-editor__picks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.gpcr-editor__pick {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.gpcr-editor__label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #646970;
}

.gpcr-editor__thumb,
.gpcr-editor__empty {
	width: 100%;
	height: 72px;
	object-fit: cover;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.05);
}

.gpcr-editor__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #a7aaad;
}

/* The editor frame must not swallow clicks meant for the block toolbar. */
.gpcr--editor .gpcr__frame {
	cursor: default;
}