/**
 * Shared scroll-snap carousel strip (video gallery thumbs, post slider, timeline).
 *
 * Root: .ekfa-carousel
 * Track: .ekfa-carousel__track
 * Items: .ekfa-carousel__item
 * Arrows: .ekfa-carousel__prev / .ekfa-carousel__next
 *
 * Set --ekfa-per-view on an ancestor (e.g. the element root), NOT on
 * .ekfa-carousel itself — a local definition would shadow responsive
 * media-query overrides. Fallback is 5.
 */

.ekfa-carousel {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.ekfa-carousel__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.ekfa-carousel__track {
	display: flex;
	gap: var(--ekfa-carousel-gap, 0.5rem);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

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

.ekfa-carousel__item {
	flex: 0 0 calc((100% - (var(--ekfa-per-view, 5) - 1) * var(--ekfa-carousel-gap, 0.5rem)) / var(--ekfa-per-view, 5));
	scroll-snap-align: start;
	min-width: 0;
}

.ekfa-carousel__btn {
	flex: 0 0 auto;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	/* Longhands + shared arrow vars so load order cannot wipe border controls. */
	border-width: var(--ekfa-arrow-border-width, 1px);
	border-style: var(--ekfa-arrow-border-style, solid);
	border-color: var(--ekfa-arrow-border-color, currentColor);
	border-radius: var(--ekfa-arrow-border-radius, 50%);
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	opacity: 0.85;
}

.ekfa-carousel__btn:hover,
.ekfa-carousel__btn:focus-visible {
	opacity: 1;
}

.ekfa-carousel__btn:disabled,
.ekfa-carousel__btn[aria-disabled="true"] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.ekfa-carousel__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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