/*
 * Carousel — shared horizontal slider used by both galleries:
 * lv_render_gallery_page() (tabbed, with lightbox) and lv_render_gallery_block()
 * (plain). One component, so the two never drift apart visually.
 *
 * Scrolling is NATIVE overflow + scroll-snap, not a JS transform loop. That
 * gives swipe, trackpad, momentum and keyboard scrolling for free, keeps the
 * slides in normal flow for screen readers, and means a JS failure degrades to
 * a plain scrollable row rather than a dead one. lv.js only drives the arrows,
 * dots, autoplay and tab transitions.
 */

.lv-carousel {
	position: relative;
}

/* Track ------------------------------------------------------------------- */

.lv-carousel__track {
	display: flex;
	gap: var(--lv-carousel-gap, 14px);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* Horizontal swipes belong to the carousel; vertical page scroll and the
	 * browser's back-gesture do not get hijacked. */
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* The dots are the scroll affordance; a native bar under the row would
	 * duplicate them and break the band's edge. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.lv-carousel__track::-webkit-scrollbar {
	display: none;
}

/* The track is focusable (tabindex="0" in markup) so the row can be scrolled
 * and stepped by keyboard — it therefore needs a visible focus ring. */
.lv-carousel__track:focus-visible {
	outline: 2px solid var(--lv-burgundy);
	outline-offset: 4px;
	border-radius: var(--lv-radius-sm);
}

/* Slides ------------------------------------------------------------------ */

/* Widths are deliberately short of a whole number of slides so the next image
 * is always part-visible ("peek") — a stronger signal that the row scrolls
 * than arrows alone. ~1.3 / ~2.5 / ~3.6 slides per viewport. */
.lv-carousel__slide {
	flex: 0 0 var(--lv-slide-w, 78%);
	margin: 0;
	scroll-snap-align: start;
}

@media (min-width: 690px) {
	.lv-carousel__slide {
		--lv-slide-w: 40%;
	}
}

@media (min-width: 1000px) {
	.lv-carousel__slide {
		--lv-slide-w: 28%;
	}
}

.lv-carousel__slide[hidden] {
	display: none;
}

/* Uniform 4:3 crop. This replaces the old CSS-column masonry, which preserved
 * each photo's natural aspect ratio — a horizontal row needs even slide
 * heights to read as a row at all. Nothing is actually lost: the lightbox
 * still shows the full uncropped original. */
.lv-carousel__trigger {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--lv-radius-sm);
	overflow: hidden;
}

.lv-carousel__trigger img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .4s ease;
}

.lv-carousel__trigger:hover img,
.lv-carousel__trigger:focus-visible img {
	transform: scale(1.04);
}

/* Non-interactive slides (the plain gallery block has no lightbox). */
.lv-carousel__figure {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--lv-radius-sm);
	overflow: hidden;
}

.lv-carousel__figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.lv-carousel__caption {
	margin-top: 10px;
	font-size: var(--lv-small-size);
	color: rgba(26, 26, 26, .7);
}

/* Controls ---------------------------------------------------------------- */

.lv-carousel__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: clamp(16px, 2.5vw, 24px);
}

/* Hidden wholesale when every slide already fits — a 1-image category must not
 * show arrows, dots or a pause button it cannot use. Set by lv.js. */
.lv-carousel__controls[hidden] {
	display: none;
}

.lv-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	padding: 0;
	cursor: pointer;
	border: 1px solid rgba(26, 26, 26, .18);
	border-radius: var(--lv-radius-full);
	background: var(--lv-white);
	color: var(--lv-ink);
	transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

/* Inverted on blush bands so the control never sits on its own colour. */
.lv-section--blush .lv-carousel__btn {
	background: var(--lv-blush);
}

.lv-carousel__btn:hover:not(:disabled) {
	border-color: var(--lv-burgundy-deep);
	background: var(--lv-burgundy);
	color: var(--lv-white);
}

/* Disabled at the ends of the row rather than hidden: a control that vanishes
 * mid-interaction shifts the others under the pointer. */
.lv-carousel__btn:disabled {
	opacity: .35;
	cursor: default;
}

.lv-carousel__btn svg {
	width: 9px;
	height: 14px;
}

/* Pause/play sits apart from the stepping controls — it governs autoplay, not
 * position. Required by WCAG 2.2.2: hover-pause alone does not serve keyboard
 * or touch users. */
.lv-carousel__toggle {
	margin-left: auto;
	width: auto;
	padding: 0 16px;
	font-family: var(--lv-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: var(--lv-label-tracking);
	text-transform: uppercase;
}

/* Dots -------------------------------------------------------------------- */

.lv-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.lv-carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	cursor: pointer;
	border: 0;
	border-radius: var(--lv-radius-full);
	background: rgba(26, 26, 26, .22);
	transition: background-color .25s ease, transform .25s ease;
}

.lv-carousel__dot:hover {
	background: rgba(26, 26, 26, .45);
}

.lv-carousel__dot.is-active {
	background: var(--lv-burgundy);
	transform: scale(1.4);
}

/* 8px is below the 24px minimum pointer target, so each dot carries an
 * invisible padded hit area rather than being drawn larger. */
.lv-carousel__dot {
	position: relative;
}

.lv-carousel__dot::after {
	content: "";
	position: absolute;
	inset: -8px;
}

@media (prefers-reduced-motion: reduce) {
	.lv-carousel__track {
		scroll-behavior: auto;
	}

	.lv-carousel__trigger img,
	.lv-carousel__dot {
		transition: none;
	}

	.lv-carousel__trigger:hover img,
	.lv-carousel__trigger:focus-visible img {
		transform: none;
	}

	.lv-carousel__dot.is-active {
		transform: none;
	}
}