/**
 * Frontend styles: cover images.
 *
 * Plain CSS (copied verbatim to build/extensions/cover-images/view.css via
 * CopyWebpackPlugin) so the enqueued filename is deterministic. Also enqueued
 * into the editor canvas (enqueue_block_assets) where it styles the
 * side-by-side preview layer.
 *
 * Layering: the .ch-cvi layer replaces core's background <img> between the
 * dim overlay span and the inner container. Images stay at z-index 0 (below
 * the overlay); slideshow arrows/dots at z-index 2 so they are clickable
 * through the overlay (which core gives z-index 1 on the frontend via its
 * :has() rule once the span is no longer adjacent to the inner container).
 * That core rule is scoped body:not(.editor-styles-wrapper), so it is
 * re-stated here scoped to our marker for the editor canvas — harmless
 * duplication on the frontend, load-bearing in the canvas.
 *
 * Breakpoints are viewport media queries at 768/1024 (matching the repo's
 * mobile/tablet/desktop convention) — deliberately NOT container queries:
 * that would require container-type on .wp-block-cover, a core block this
 * extension does not own.
 */

.wp-block-cover > .ch-cvi {
	position: absolute;
	inset: 0;
}

.ch-cvi--side-by-side,
.ch-cvi__viewport {
	z-index: 0;
}

.wp-block-cover:has(> .ch-cvi) > .wp-block-cover__background,
.wp-block-cover:has(> .ch-cvi) > .wp-block-cover__gradient-background,
.wp-block-cover:has(> .ch-cvi) > .wp-block-cover__inner-container {
	z-index: 1;
}

/* ── Side by side ───────────────────────────────────────────────────── */
.ch-cvi--side-by-side {
	display: flex;
}

/* flex-basis 0 ⇒ visible items always share the width 1/N regardless of
   image intrinsic sizes; the imgs are absolutely positioned within each
   item (core's .wp-block-cover__image-background rules), so items stretch
   to the cover's full height for free. */
.ch-cvi__item {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
}

@media (max-width: 767.98px) {
	.ch-cvi--side-by-side > .ch-cvi--hide-mobile {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023.98px) {
	.ch-cvi--side-by-side > .ch-cvi--hide-tablet {
		display: none;
	}
}

@media (min-width: 1024px) {
	.ch-cvi--side-by-side > .ch-cvi--hide-desktop {
		display: none;
	}
}

/* Editor preview (side by side + compare): the portal layer paints instead
   of core's own background image (which would double-paint beneath it). */
.wp-block-cover:has(> .ch-cvi--editor-preview) > img.wp-block-cover__image-background {
	visibility: hidden;
}

/* ── Slideshow ──────────────────────────────────────────────────────── */
/* The cover defines the box: viewport fills it, slides stack in one grid
   cell, the active one is opaque. No aspect-ratio logic (contrast with
   media-text-slideshow) — height comes from the cover itself. */
.ch-cvi__viewport {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.ch-cvi__track {
	display: grid;
	grid-template-areas: "stack";
	grid-template-columns: 1fr;
	width: 100%;
	height: 100%;
}

.ch-cvi__slide {
	grid-area: stack;
	position: relative;
	min-width: 0;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.ch-cvi__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms ease, visibility 0s linear 0s;
	z-index: 1;
}

/* ── Arrows ─────────────────────────────────────────────────────────── */
.ch-cvi__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background 150ms ease, opacity 150ms ease;
}

.ch-cvi__arrow:hover {
	background: rgba(0, 0, 0, 0.65);
}

.ch-cvi__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.ch-cvi__arrow svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.ch-cvi__arrow--prev {
	left: 0.75rem;
}

.ch-cvi__arrow--next {
	right: 0.75rem;
}

/* ── Dots ───────────────────────────────────────────────────────────── */
.ch-cvi__dots {
	position: absolute;
	bottom: 1.5rem;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 0.4rem;
	pointer-events: none;
}

.ch-cvi__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	pointer-events: auto;
	transition: background 200ms ease, transform 200ms ease;
}

.ch-cvi__dot.is-active {
	background: #fff;
	transform: scale(1.15);
}

.ch-cvi__dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ── Compare ────────────────────────────────────────────────────────── */
/* Before = core's own image (full layer); after = stacked on top, clipped
   to the right of the divider. Everything reads one custom property,
   --ch-cvi-pos (0–100%), inlined server-side and updated by compare.js.
   Theme hooks: --ch-cvi-compare-line (divider colour), --ch-cvi-compare-
   line-width, --ch-cvi-compare-grip-size, --ch-cvi-compare-grip-bg,
   --ch-cvi-compare-grip-color, --ch-cvi-compare-label-bg,
   --ch-cvi-compare-label-color, --ch-cvi-compare-label-inset. */
.wp-block-cover:has(> .ch-cvi--compare:not(.ch-cvi--editor-preview)) {
	/* Vertical page scroll stays native on touch; horizontal moves are ours. */
	touch-action: pan-y pinch-zoom;
}

.ch-cvi--compare {
	--ch-cvi-pos: 50%;
	user-select: none;
	-webkit-user-select: none;
}

.ch-cvi__compare-before,
.ch-cvi__compare-after {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.ch-cvi__compare-after {
	clip-path: inset(0 0 0 var(--ch-cvi-pos));
}

.ch-cvi--compare img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.ch-cvi__compare-divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ch-cvi-pos);
	z-index: 2;
	width: var(--ch-cvi-compare-line-width, 2px);
	transform: translateX(-50%);
	background: var(--ch-cvi-compare-line, #fff);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.ch-cvi--editor-preview .ch-cvi__compare-handle {
	cursor: default;
}

.ch-cvi__compare-handle {
	position: absolute;
	top: 50%;
	left: var(--ch-cvi-pos);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ch-cvi-compare-grip-size, 2.75rem);
	height: var(--ch-cvi-compare-grip-size, 2.75rem);
	transform: translate(-50%, -50%);
	border-radius: 9999px;
	background: var(--ch-cvi-compare-grip-bg, #fff);
	color: var(--ch-cvi-compare-grip-color, #101012);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	cursor: ew-resize;
	touch-action: none;
}

.ch-cvi__compare-handle svg {
	display: block;
	width: 55%;
	height: 55%;
}

.ch-cvi__compare-handle:focus-visible {
	outline: 2px solid var(--ch-cvi-compare-grip-bg, #fff);
	outline-offset: 3px;
}

/* The cover's image area (overlay + compare layer) is draggable too. */
.wp-block-cover:has(> .ch-cvi--compare:not(.ch-cvi--editor-preview)) > .wp-block-cover__background,
.wp-block-cover:has(> .ch-cvi--compare:not(.ch-cvi--editor-preview)) > .wp-block-cover__gradient-background,
.ch-cvi--compare:not(.ch-cvi--editor-preview) {
	cursor: ew-resize;
}

.ch-cvi__compare-label {
	position: absolute;
	bottom: var(--ch-cvi-compare-label-inset, 1rem);
	z-index: 2;
	max-width: calc(50% - 2rem);
	padding: 0.25em 0.75em;
	border-radius: 4px;
	background: var(--ch-cvi-compare-label-bg, rgba(0, 0, 0, 0.55));
	color: var(--ch-cvi-compare-label-color, #fff);
	font-size: 0.875rem;
	line-height: 1.4;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.ch-cvi__compare-label--before {
	left: var(--ch-cvi-compare-label-inset, 1rem);
}

.ch-cvi__compare-label--after {
	right: var(--ch-cvi-compare-label-inset, 1rem);
}

/* Hide a label once its image is fully covered. */
.ch-cvi--compare.is-at-start .ch-cvi__compare-label--before,
.ch-cvi--compare.is-at-end .ch-cvi__compare-label--after {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ch-cvi__slide {
		transition: none;
	}
	.ch-cvi__dot,
	.ch-cvi__compare-label {
		transition: none;
	}
}