/**
 * Carousel: .mk-carousel (templates/components/carousel.php).
 *
 * Native horizontal scroll with snap; the browser scrollbar is hidden and a
 * 200×3 bar shows the position instead (track `surface.highlight`, thumb
 * accent). Item width = (100% − visible gaps × gap) / items per view, from
 * theme.json `custom.carousel.{mobile,tablet,desktop}` (48rem / 64rem):
 * mobile 1.5 items (one full + half), tablet and desktop 4.
 * The store (assets/js/components/carousel.js) sets --mk-carousel-ratio and
 * --mk-carousel-progress.
 */

.mk-carousel {
	--mk-carousel-gap: var(--wp--custom--carousel--mobile--gap);
	--mk-carousel-per-view: var(--wp--custom--carousel--mobile--per-view);
	--mk-carousel-visible-gaps: var(
		--wp--custom--carousel--mobile--visible-gaps
	);
	--mk-carousel-bar-gap: var(--wp--custom--carousel--mobile--scrollbar-gap);
	--mk-carousel-ratio: 0.5;
	--mk-carousel-progress: 0;
}

@media (min-width: 48rem) {
	.mk-carousel {
		--mk-carousel-gap: var(--wp--custom--carousel--tablet--gap);
		--mk-carousel-per-view: var(--wp--custom--carousel--tablet--per-view);
		--mk-carousel-visible-gaps: var(
			--wp--custom--carousel--tablet--visible-gaps
		);
		--mk-carousel-bar-gap: var(
			--wp--custom--carousel--tablet--scrollbar-gap
		);
	}
}

@media (min-width: 64rem) {
	.mk-carousel {
		--mk-carousel-gap: var(--wp--custom--carousel--desktop--gap);
		--mk-carousel-per-view: var(--wp--custom--carousel--desktop--per-view);
		--mk-carousel-visible-gaps: var(
			--wp--custom--carousel--desktop--visible-gaps
		);
		--mk-carousel-bar-gap: var(
			--wp--custom--carousel--desktop--scrollbar-gap
		);
	}
}

/* Compact: the mobile layout at every width (narrow containers). */
.mk-carousel.mk-carousel--compact {
	--mk-carousel-gap: var(--wp--custom--carousel--mobile--gap);
	--mk-carousel-per-view: var(--wp--custom--carousel--mobile--per-view);
	--mk-carousel-visible-gaps: var(
		--wp--custom--carousel--mobile--visible-gaps
	);
	--mk-carousel-bar-gap: var(--wp--custom--carousel--mobile--scrollbar-gap);
}

/* Positioned so it also clips absolute children (screen reader texts in the
   cards), which would otherwise widen the page. */
.mk-carousel__viewport {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mk-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.mk-carousel__viewport:focus-visible {
	border-radius: var(--wp--preset--border-radius--10);
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: var(--wp--custom--focus--ring-offset);
}

.mk-carousel__track {
	display: flex;
	gap: var(--mk-carousel-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-carousel__item {
	flex: none;
	--mk-carousel-track: calc(
		100% - var(--mk-carousel-visible-gaps) * var(--mk-carousel-gap)
	);

	inline-size: calc(var(--mk-carousel-track) / var(--mk-carousel-per-view));
	scroll-snap-align: start;
}

/* Cards in one row share the tallest height. */
.mk-carousel__item > * {
	block-size: 100%;
}

.mk-carousel__scrollbar {
	inline-size: var(--wp--custom--carousel--scrollbar-width);
	max-inline-size: 100%;
	block-size: var(--wp--custom--carousel--scrollbar-height);
	margin-block-start: var(--mk-carousel-bar-gap);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--wp--custom--carousel--scrollbar-radius);
	background-color: var(--wp--custom--color--surface--highlight);
}

.mk-carousel__thumb {
	display: block;
	inline-size: calc(var(--mk-carousel-ratio) * 100%);
	block-size: 100%;
	margin-inline-start: calc(
		var(--mk-carousel-progress) * (1 - var(--mk-carousel-ratio)) * 100%
	);
	border-radius: inherit;
	background-color: var(--wp--custom--color--text--accent);
}

/* Everything fits: no bar. */
.mk-carousel.is-static .mk-carousel__scrollbar {
	visibility: hidden;
}