/* ==========================================================================
   Horizontal snap slider
   ========================================================================== */

.slider {
	position: relative;
	margin-right: calc(var(--gutter) * -1);
}

.slider__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max(300px, calc((100% - var(--gutter)) / 2.35));
	gap: clamp(1rem, 1.6vw, 1.5rem);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 0;
	padding-right: var(--gutter);
	scrollbar-width: none;
	cursor: grab;
}

.slider__track::-webkit-scrollbar {
	display: none;
}

.slider__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.slider__track.is-dragging a {
	pointer-events: none;
}

.slider__track:focus-visible {
	outline-offset: 6px;
}

.slider__slide {
	scroll-snap-align: start;
}

.slider__controls {
	gap: var(--space-2);
}

.slider__footer {
	display: flex;
	align-items: center;
	margin-top: var(--space-5);
}

.slider__progress {
	position: relative;
	flex: 1;
	max-width: 320px;
	height: 1px;
	background: var(--border-strong);
	overflow: hidden;
}

.slider__progress > span {
	position: absolute;
	inset: 0;
	background: var(--ace-navy);
	transform-origin: left center;
	transform: scaleX(var(--progress, 0.33));
	transition: transform var(--dur-fast) var(--ease-standard);
}

/* No scrolling needed: hide controls */
[data-slider].is-static .slider__controls,
[data-slider].is-static .slider__footer {
	visibility: hidden;
}