/**
 * 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: 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;
}

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