/**
 * Frontend styles: gallery carousel.
 *
 * Plain CSS (copied verbatim to build/extensions/gallery-carousel/view.css
 * via CopyWebpackPlugin) so the enqueued filename is deterministic.
 *
 * Scroll engine: native CSS scroll-snap on the viewport; the track is a
 * non-wrapping flex row. Slides are core's own figure.wp-block-image
 * markup, untouched (lightbox, captions and srcset keep working).
 *
 * Slides-per-view comes from the gallery's `columns` attribute, emitted
 * server-side as `--ch-gcar-cols` inline on the gallery figure. The gap
 * reuses core's own gallery-gap custom property so the blockGap control
 * keeps working.
 *
 * Specificity note: core sizes gallery images with
 * `.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)`
 * — the `:not(#…)` bumps it to id-level. The doubled `.ch-gcar.ch-gcar`
 * plus the same `:not()` trick outweighs it regardless of load order.
 */

.wp-block-gallery.ch-gcar {
	display: block;
	--ch-gcar-gap: var( --wp--style--unstable-gallery-gap, 16px );
}

/* Positioning context for arrows + dots — the image area only, so a
   gallery-level figcaption below doesn't push them off the images. */
.ch-gcar__stage {
	position: relative;
}

.ch-gcar__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.ch-gcar__viewport::-webkit-scrollbar {
	display: none;
}

.ch-gcar__track {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --ch-gcar-gap );
}

.wp-block-gallery.ch-gcar.ch-gcar figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: calc(
		( 100% - ( var( --ch-gcar-cols, 1 ) - 1 ) * var( --ch-gcar-gap ) ) /
			var( --ch-gcar-cols, 1 )
	);
	margin: 0;
	scroll-snap-align: start;
}

/* Mirror core's mobile behaviour: one column under 600px. !important beats
   the inline --ch-gcar-cols the server emits on the figure. */
@media ( max-width: 600px ) {
	.wp-block-gallery.ch-gcar {
		--ch-gcar-cols: 1 !important;
	}
}

/* ── Group advance (slide mode, columns > 1) ───────────────────────────
   Swipe moves one page at a time because only every Nth slide is a snap
   point. nth-of-type is safe: the track contains only image figures.
   Scoped to ≥601px — under 600px one slide per view, so per-slide
   snapping applies (view.js collapses arrow steps to 1 there too). */
@media ( min-width: 601px ) {
	.wp-block-gallery.ch-gcar--group.ch-gcar--group
		figure.wp-block-image:not(#individual-image) {
		scroll-snap-align: none;
	}

	.wp-block-gallery.ch-gcar--group-2.ch-gcar--group-2
		figure.wp-block-image:not(#individual-image):nth-of-type(2n + 1),
	.wp-block-gallery.ch-gcar--group-3.ch-gcar--group-3
		figure.wp-block-image:not(#individual-image):nth-of-type(3n + 1),
	.wp-block-gallery.ch-gcar--group-4.ch-gcar--group-4
		figure.wp-block-image:not(#individual-image):nth-of-type(4n + 1),
	.wp-block-gallery.ch-gcar--group-5.ch-gcar--group-5
		figure.wp-block-image:not(#individual-image):nth-of-type(5n + 1),
	.wp-block-gallery.ch-gcar--group-6.ch-gcar--group-6
		figure.wp-block-image:not(#individual-image):nth-of-type(6n + 1),
	.wp-block-gallery.ch-gcar--group-7.ch-gcar--group-7
		figure.wp-block-image:not(#individual-image):nth-of-type(7n + 1),
	.wp-block-gallery.ch-gcar--group-8.ch-gcar--group-8
		figure.wp-block-image:not(#individual-image):nth-of-type(8n + 1) {
		scroll-snap-align: start;
	}
}

/* ── Crossfade (single column only) ─────────────────────────────────────
   All slides share one grid cell; the active one is opaque. The viewport
   carries an inline aspect-ratio (from the first image) so the stack keeps
   a stable frame. Placed after the base slide sizing so the 100% width
   wins at equal specificity. */
.ch-gcar--fade .ch-gcar__viewport {
	overflow: hidden;
	/* Vertical page scroll passes through; horizontal swipe is the lib's. */
	touch-action: pan-y;
}

.ch-gcar--fade .ch-gcar__track {
	display: grid;
	grid-template-areas: "stack";
	grid-template-columns: 1fr;
	gap: 0;
}

.wp-block-gallery.ch-gcar--fade.ch-gcar--fade
	figure.wp-block-image:not(#individual-image) {
	grid-area: stack;
	width: 100%;
	min-width: 0;
	scroll-snap-align: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 400ms ease, visibility 0s linear 400ms;
}

.wp-block-gallery.ch-gcar--fade.ch-gcar--fade
	figure.wp-block-image:not(#individual-image).is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 400ms ease, visibility 0s linear 0s;
	z-index: 1;
}

/* With a resolved aspect-ratio frame, every slide cover-fills it. */
.ch-gcar--fade .ch-gcar__viewport[style*="aspect-ratio"] figure.wp-block-image,
.ch-gcar--fade .ch-gcar__viewport[style*="aspect-ratio"] figure.wp-block-image img {
	width: 100%;
	height: 100%;
}

.ch-gcar--fade .ch-gcar__viewport[style*="aspect-ratio"] figure.wp-block-image img {
	object-fit: cover;
}

/* The gallery-level caption stays below the viewport in normal flow. */
.wp-block-gallery.ch-gcar > .blocks-gallery-caption {
	display: block;
	margin-top: 0.5em;
}

/* ── Arrows ─────────────────────────────────────────────────────────── */
.ch-gcar__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-gcar__arrow:hover {
	background: rgba(0, 0, 0, 0.65);
}

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

.ch-gcar__arrow:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

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

.ch-gcar__arrow--prev {
	left: 0.5rem;
}

.ch-gcar__arrow--next {
	right: 0.5rem;
}

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

.ch-gcar__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-gcar__dot.is-active {
	background: #fff;
	transform: scale(1.15);
}

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

@media ( prefers-reduced-motion: reduce ) {
	.ch-gcar__viewport {
		scroll-behavior: auto;
	}
	.ch-gcar__dot {
		transition: none;
	}
	.wp-block-gallery.ch-gcar--fade.ch-gcar--fade
		figure.wp-block-image:not(#individual-image) {
		transition: none;
	}
}