/*
 * Before / after comparison, in two layouts.
 *
 * `pair` is the original: placeholder proportions, waiting on the case study
 * design. Two rules there are not provisional — the images keep their own
 * aspect ratios, and the pair is top aligned so the taller one hangs below
 * rather than the shorter one stretching.
 *
 * `wipe` is the opposite bargain and the second half of this file. One frame,
 * two images stacked in it, a divider the reader drags. Overlaying means
 * agreeing on a frame, so there the before image *is* cropped — that is the
 * price of the mode, not an oversight, and it is why both layouts exist.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 */

@layer bertex-components {
	.btxc-comparison {
		box-sizing: border-box;
		margin: 0;

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
		color: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-comparison__pair {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: var(--btx-spacing-lg, 1.5rem);
	}

	.btxc-comparison__side {
		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.5rem);
		margin: 0;
		min-width: 0;
	}

	.btxc-comparison__label {
		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		font-weight: 600;
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/*
	 * `height: auto` against the width is the whole aspect-ratio decision. No
	 * object-fit, no fixed ratio, no shared height: each image is whatever
	 * shape it is, and the pair not matching is the point.
	 */
	.btxc-comparison__image {
		display: block;
		width: 100%;
		height: auto;

		border: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
		border-radius: var(--btx-border-radius-m, 0.25rem);
	}

	.btxc-comparison__caption {
		margin-top: var(--btx-spacing-m, 1rem);

		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
		color: var(--btx-color-primary-1-light-40, #2e4578);
	}

	/*
	 * Editor only — the render callback emits this on REST renders and never on
	 * the front end. Styled to look like a warning rather than like content, so
	 * nobody mistakes it for part of the component.
	 */
	.btxc-comparison__notice {
		margin: 0 0 var(--btx-spacing-m, 1rem);
		padding: var(--btx-spacing-xs, 0.5rem) var(--btx-spacing-m, 1rem);

		border-left: 3px solid var(--btx-color-secondary-1, #c9a227);
		background-color: var(--btx-color-text-bg-1-dark-10, #dfd6c7);

		font-size: var(--btx-font-body-s, 0.875rem);
		line-height: var(--btx-line-height-body, 1.6);
	}

	/* Stacked — before first, which is the order the argument runs in. */

	@media (width < 40rem) {
		.btxc-comparison__pair {
			grid-template-columns: minmax(0, 1fr);
		}
	}

	/* Wipe ------------------------------------------------------------------ */

	/*
	 * One frame. The after image sits in normal flow and is what gives the
	 * frame its height; the before image is laid over it and clipped. The
	 * divider and the input are drawn at `--btxc-comparison-pos`, which the
	 * render callback writes inline so the resting position is correct in the
	 * first paint, and which view.js is the only thing that ever changes.
	 */
	.btxc-comparison__wipe {
		position: relative;
		overflow: hidden;

		/*
		 * A ceiling, because the images this component is for are usually
		 * full-page screenshots and those are enormous — a 305x1400 capture at
		 * a 1200px column is over five thousand pixels tall. Uncapped, the
		 * frame is several screens deep, which breaks the mode in two ways at
		 * once: the divider's handle sits at the frame's vertical centre, so it
		 * is off-screen almost always, and the input that reads the drag covers
		 * that entire area, so every click anywhere near the images moves a
		 * divider nobody can see.
		 *
		 * Capped, a wipe is a window onto the top of both pages at the same
		 * scale, and the handle is on screen whenever the frame is. Override
		 * `--btxc-comparison-max-height` for a component that wants a taller
		 * one.
		 */
		max-height: var(--btxc-comparison-max-height, 80svh);

		border: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
		border-radius: var(--btx-border-radius-m, 0.25rem);

		/* The clipped layer and the divider stack inside this and nowhere else. */
		isolation: isolate;
	}

	.btxc-comparison__layer {
		margin: 0;
	}

	/*
	 * `inset()` insets from each edge, so revealing the left `pos` of the image
	 * means insetting the *right* edge by the remainder. Getting this the wrong
	 * way round is a wipe that runs backwards, which looks like a bug in the
	 * script rather than in the geometry.
	 */
	.btxc-comparison__layer--before {
		position: absolute;
		inset: 0;
		clip-path: inset(0 calc(100% - var(--btxc-comparison-pos, 50%)) 0 0);
	}

	/* The frame carries the border now, so the images inside it must not. */
	.btxc-comparison--wipe .btxc-comparison__image {
		border: 0;
		border-radius: 0;
	}

	/*
	 * An image on this site may arrive wrapped in a <picture> — the optimizer
	 * emits one to offer WebP — and that wrapper, not the <img>, is what the
	 * layout actually sees. It is inline by default, so without this the frame
	 * gets a line box's height instead of the picture's and the whole wipe
	 * collapses. Sizing has to be set on both or it is set on neither.
	 */
	.btxc-comparison picture {
		display: block;
	}

	/* The one place this component crops. See the note at the top of the file. */
	.btxc-comparison__layer--before picture,
	.btxc-comparison__layer--before .btxc-comparison__image {
		height: 100%;
	}

	.btxc-comparison__layer--before .btxc-comparison__image {
		object-fit: cover;
		object-position: top center;
	}

	/*
	 * Labels ride on the images, so they cannot borrow their contrast from the
	 * page — a screenshot can be any colour at all. A solid token chip is the
	 * only version of this that is legible over every image someone will use.
	 *
	 * Each label lives *inside* its own layer, so the before label is clipped
	 * away with the image it names. A label still sitting there over an image
	 * that has been wiped off the screen is worse than no label.
	 */
	.btxc-comparison--wipe .btxc-comparison__label {
		position: absolute;
		top: var(--btx-spacing-xs, 0.5rem);
		z-index: 2;

		padding: 0.25em 0.75em;
		border-radius: var(--btx-border-radius-s, 0.125rem);

		background-color: var(--btx-color-primary-1, #1a2744);
		color: var(--btx-color-text-bg-1, #f6f3ee);
	}

	.btxc-comparison__label--before {
		left: var(--btx-spacing-xs, 0.5rem);
	}

	.btxc-comparison__label--after {
		right: var(--btx-spacing-xs, 0.5rem);
	}

	.btxc-comparison__divider {
		position: absolute;
		inset-block: 0;
		left: var(--btxc-comparison-pos, 50%);
		z-index: 3;

		display: grid;
		place-items: center;

		width: 2px;
		margin-left: -1px;

		background-color: var(--btx-color-text-bg-1, #f6f3ee);

		/* Keeps the line off a white screenshot, where it would disappear. */
		box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);

		/* The input underneath is what the reader actually grabs. */
		pointer-events: none;
	}

	.btxc-comparison__grip {
		display: grid;
		place-items: center;

		width: 2.5rem;
		height: 2.5rem;
		border-radius: 50%;

		background-color: var(--btx-color-text-bg-1, #f6f3ee);
		color: var(--btx-color-primary-1, #1a2744);
		box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);

		transition: transform 120ms ease-out;
	}

	/*
	 * A native range input, stretched over the frame and made invisible.
	 *
	 * It is the whole control: keyboard, touch, pointer and screen-reader
	 * support all come with the element, and every one of them would have to be
	 * rebuilt by hand behind a div with a drag listener. What the script does is
	 * copy its value into a custom property — nothing else — which is why the
	 * component still works with a stylesheet and no JavaScript.
	 */
	.btxc-comparison__range {
		position: absolute;
		inset: 0;
		z-index: 4;

		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;

		appearance: none;
		background: transparent;
		opacity: 0;
		cursor: ew-resize;

		/*
		 * Without this a range swallows a vertical swipe and the page stops
		 * scrolling on a phone, which is a far worse bug than the one the
		 * component fixes. `pan-y` gives vertical gestures back to the page and
		 * keeps horizontal ones for the divider.
		 */
		touch-action: pan-y;
	}

	.btxc-comparison__range::-webkit-slider-thumb {
		appearance: none;
		width: 2.5rem;
		height: 2.5rem;
	}

	.btxc-comparison__range::-moz-range-thumb {
		width: 2.5rem;
		height: 2.5rem;
		border: 0;
	}

	/*
	 * The input is invisible, so its focus ring has to be drawn on the thing
	 * that stands for it. `:has()` rather than a sibling combinator so the
	 * markup order stays free.
	 */
	.btxc-comparison__wipe:has(.btxc-comparison__range:focus-visible) .btxc-comparison__grip {
		outline: 2px solid var(--btx-color-primary-1, #1a2744);
		outline-offset: 3px;
	}

	.btxc-comparison__wipe:has(.btxc-comparison__range:hover) .btxc-comparison__grip,
	.btxc-comparison__wipe:has(.btxc-comparison__range:focus-visible) .btxc-comparison__grip {
		transform: scale(1.08);
	}

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

	/*
	 * No script, and paper.
	 *
	 * A wipe is a gesture, and neither a printed page nor a browser with
	 * scripting off has one — leaving the divider parked would show half of each
	 * image and call it a comparison. Both fall back to the layout that needs no
	 * gesture: the two images in full, before first.
	 */
	@media print, (scripting: none) {
		.btxc-comparison__wipe {
			display: grid;
			gap: var(--btx-spacing-lg, 1.5rem);
			overflow: visible;
			border: 0;

			/* Nothing to keep on screen here — both images show in full. */
			max-height: none;
		}

		.btxc-comparison__layer {
			position: relative;
		}

		.btxc-comparison__layer--before {
			/* Before first: the order the argument runs in. */
			order: -1;
			inset: auto;
			clip-path: none;
		}

		.btxc-comparison__layer--before picture,
		.btxc-comparison__layer--before .btxc-comparison__image {
			height: auto;
		}

		.btxc-comparison__layer--before .btxc-comparison__image {
			object-fit: fill;
		}

		.btxc-comparison--wipe .btxc-comparison__image {
			border: 1px solid var(--btx-color-text-bg-1-dark-40, #d1d3d4);
			border-radius: var(--btx-border-radius-m, 0.25rem);
		}

		.btxc-comparison__divider,
		.btxc-comparison__range {
			display: none;
		}
	}
}