/* Carousel. One scroll snap track shared by the quote and gallery
carousel layouts; loads on every page via the launchpad-carousel handle
in functions.php, with js/carousel.js for the buttons and dots. Slide
widths are the block's business and live in its own file. */

/* Track
--------------------------------------------- */
.lp-carousel {
	position: relative;
	width: 100%;
}

.lp-carousel__track {
	position: relative;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-block: 4px;
}

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

.lp-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	list-style: none;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* The script never runs in the editor canvas, so the track keeps a thin
scrollbar there and the author can still reach every slide. */
.editor-styles-wrapper .lp-carousel__track {
	scrollbar-width: thin;
}

/* Buttons and dots
--------------------------------------------- */
.lp-carousel__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.lp-carousel__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border-default, #6b717e);
	border-radius: 50%;
	background: var(--surface-card, #fff);
	color: var(--text-primary, #242527);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lp-carousel__button:hover {
	border-color: var(--text-accent, #615ff8);
	color: var(--text-accent, #615ff8);
}

.lp-carousel__button:focus-visible {
	outline: 2px solid var(--border-focus, #615ff8);
	outline-offset: 2px;
}

.lp-carousel__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.lp-carousel__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A dot past the last reachable position (two cards in view, four
slides) would never light up; carousel.js hides it. */
.lp-carousel__dot[hidden] {
	display: none;
}

.lp-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--border-default, #6b717e);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.lp-carousel__dot:hover {
	transform: scale(1.2);
}

.lp-carousel__dot:focus-visible {
	outline: 2px solid var(--border-focus, #615ff8);
	outline-offset: 2px;
}

.lp-carousel__dot.is-active {
	background: var(--text-accent, #615ff8);
}

/* The progress style (2026-10-14, launchpad_carousel_nav()'s 'progress'):
a bar for the share of the track in view, between the two buttons, in
place of the dots. Before the script, and in the editor canvas, its width
comes from the block's --lp-carousel-in-view and --lp-carousel-count;
js/carousel.js then follows the scroll. */
.lp-carousel__nav--progress {
	justify-content: space-between;
	gap: 18px;
}

.lp-carousel__progress {
	flex: 1;
	height: 4px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--border-default, #6b717e) 30%, transparent);
	overflow: hidden;
}

.lp-carousel__progress-bar {
	display: block;
	width: min(100%, calc(100% * var(--lp-carousel-in-view, 1) / var(--lp-carousel-count, 1)));
	height: 100%;
	border-radius: inherit;
	background: var(--brand-default, #2f5387);
	transition: margin-left 0.2s ease, width 0.2s ease;
}

.is-dark .lp-carousel__progress {
	background: rgb(255 255 255 / 0.2);
}

.is-dark .lp-carousel__progress-bar {
	background: #fff;
}

/* A single slide has nothing to navigate. */
.lp-carousel.is-static .lp-carousel__nav {
	display: none;
}

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

	.lp-carousel__button,
	.lp-carousel__dot,
	.lp-carousel__progress-bar {
		transition: none;
	}
}