/**
 * Slider (assets/js/slider.js): a scroll-snap list with previous/next
 * buttons; swipes on touch and scrolls without JS. One card and a peek on
 * phones, two on tablets, three on wide screens. Used by the testimonials and
 * Google reviews sections.
 */

.slider__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: var(--space-5);
}

.slider__heading {
	margin: 0;
}

.slider__controls {
	display: flex;
	gap: var(--space-2);
	margin-left: auto;
}

.slider__controls[hidden] {
	display: none;
}

.slider__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	color: var(--color-navy);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}

.slider__button:hover {
	border-color: var(--color-navy);
}

.slider__button[aria-disabled="true"] {
	opacity: 0.4;
	cursor: default;
}

.slider__track {
	display: grid;
	grid-auto-columns: 85%;
	grid-auto-flow: column;
	gap: var(--space-4);
	margin: 0;
	padding: var(--space-1) var(--space-1) var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scroll-padding-inline: var(--space-1);
}

@media (min-width: 40rem) {

	.slider__track {
		grid-auto-columns: calc((100% - var(--space-4)) / 2);
	}
}

@media (min-width: 64rem) {

	.slider__track {
		grid-auto-columns: calc((100% - 2 * var(--space-5)) / 3);
		gap: var(--space-5);
	}
}

.slider__slide {
	min-width: 0;
	scroll-snap-align: start;
}