/**
 * MDS Testimonials Carousel
 */

.mds-testimonials-carousel {
	--mds-testimonials-gold: var(--color-gold, #b88a58);
	--mds-testimonials-gap: 25px;
	--mds-testimonials-radius: 8px;

	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	background: transparent;
	box-sizing: border-box;
}

.mds-testimonials-carousel *,
.mds-testimonials-carousel *::before,
.mds-testimonials-carousel *::after {
	box-sizing: border-box;
}

/**
 * Viewport
 */
.mds-testimonials-carousel__viewport {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

/**
 * Horizontal track
 */
.mds-testimonials-carousel__track {
	display: flex;
	align-items: stretch;
	gap: var(--mds-testimonials-gap);

	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 1px;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 1px;

	scrollbar-width: none;
	overscroll-behavior-x: contain;
	overscroll-behavior-y: auto;
	-webkit-overflow-scrolling: touch;

	/*
	 * Vertical gestures remain available for normal page scrolling.
	 * Horizontal gestures are handled by the carousel.
	 */
	touch-action: pan-y pinch-zoom;

	cursor: grab;
}

.mds-testimonials-carousel__track::-webkit-scrollbar {
	display: none;
}

.mds-testimonials-carousel__track:focus-visible {
	outline: 2px solid var(--mds-testimonials-gold);
	outline-offset: 5px;
}

/**
 * Disable individual-card snap points while JavaScript moves an entire page.
 */
.mds-testimonials-carousel__track--programmatic {
	scroll-snap-type: none;
}

/**
 * Dragging state
 */
.mds-testimonials-carousel__track--dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;

	user-select: none;
	-webkit-user-select: none;
}

.mds-testimonials-carousel__track--dragging * {
	user-select: none;
	-webkit-user-select: none;
}

.mds-testimonials-carousel__slide,
.mds-testimonials-carousel__slide * {
	-webkit-user-drag: none;
}

/**
 * Testimonial cards
 */
.mds-testimonials-carousel__slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;

	min-width: 0;
	min-height: 315px;

	margin: 0;
	padding: 28px 18px 26px;

	border: 1px solid var(--mds-testimonials-gold);
	border-radius: var(--mds-testimonials-radius);

	background: transparent;
	color: inherit;

	scroll-snap-align: start;
	scroll-snap-stop: normal;
}

/**
 * Desktop columns
 */
.mds-testimonials-carousel--columns-1
	.mds-testimonials-carousel__slide {
	flex-basis: 100%;
}

.mds-testimonials-carousel--columns-2
	.mds-testimonials-carousel__slide {
	flex-basis: calc(
		(100% - var(--mds-testimonials-gap)) / 2
	);
}

.mds-testimonials-carousel--columns-3
	.mds-testimonials-carousel__slide {
	flex-basis: calc(
		(100% - (var(--mds-testimonials-gap) * 2)) / 3
	);
}

.mds-testimonials-carousel--columns-4
	.mds-testimonials-carousel__slide {
	flex-basis: calc(
		(100% - (var(--mds-testimonials-gap) * 3)) / 4
	);
}

.mds-testimonials-carousel--columns-5
	.mds-testimonials-carousel__slide {
	flex-basis: calc(
		(100% - (var(--mds-testimonials-gap) * 4)) / 5
	);
}

/**
 * Five stars
 */
.mds-testimonials-carousel__stars {
	margin: 0 0 12px;
	padding: 0;

	color: var(--mds-testimonials-gold);

	font-size: 27px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 2px;
	text-align: center;
	white-space: nowrap;
}

/**
 * Quote
 */
.mds-testimonials-carousel__quote {
	display: flex;
	flex: 1;
	flex-direction: column;

	margin: 0;
	padding: 0;
	border: 0;

	background: transparent;
	color: inherit;
	font-style: normal;
}

.mds-testimonials-carousel__quote::before,
.mds-testimonials-carousel__quote::after {
	display: none;
	content: none;
}

.mds-testimonials-carousel__quote p {
	margin: 0;
	padding: 0;

	color: inherit;

	font: inherit;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.42;
}

/**
 * Testimonial name
 */
.mds-testimonials-carousel__name {
	margin-top: 29px;
	padding: 0;

	color: inherit;

	font: inherit;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.4;
}

.mds-testimonials-carousel__name cite {
	color: inherit;
	font: inherit;
	font-style: normal;
}

/**
 * Pagination dots
 */
.mds-testimonials-carousel__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;

	min-height: 18px;
	margin-top: 27px;
}

.mds-testimonials-carousel__dots[hidden] {
	display: none;
}

.mds-testimonials-carousel__dot {
	display: block;
	flex: 0 0 auto;

	width: 12px;
	height: 12px;

	margin: 0;
	padding: 0;

	border: 1px solid var(--mds-testimonials-gold);
	border-radius: 50%;

	background: transparent;
	box-shadow: none;

	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;

	transition:
		background-color 160ms ease,
		transform 160ms ease;
}

.mds-testimonials-carousel__dot:hover {
	transform: scale(1.12);
}

.mds-testimonials-carousel__dot[aria-current="true"] {
	background: var(--mds-testimonials-gold);
}

.mds-testimonials-carousel__dot:focus-visible {
	outline: 2px solid var(--mds-testimonials-gold);
	outline-offset: 4px;
}

/**
 * Screen-reader-only text
 */
.mds-testimonials-carousel__screen-reader-text {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	margin: -1px !important;
	padding: 0 !important;

	overflow: hidden !important;

	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;
	border: 0 !important;
}

/**
 * Tablet
 *
 * Three-, four-, and five-column carousels become two columns.
 */
@media (max-width: 1023px) {
	.mds-testimonials-carousel--columns-3
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-4
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-5
		.mds-testimonials-carousel__slide {
		flex-basis: calc(
			(100% - var(--mds-testimonials-gap)) / 2
		);
	}
}

/**
 * Mobile
 */
@media (max-width: 639px) {
	.mds-testimonials-carousel {
		--mds-testimonials-gap: 18px;
	}

	.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-1
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-2
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-3
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-4
		.mds-testimonials-carousel__slide,
	.mds-testimonials-carousel--columns-5
		.mds-testimonials-carousel__slide {
		flex-basis: 100%;
		min-height: 300px;
		padding: 25px 18px;
	}

	.mds-testimonials-carousel__quote p {
		font-size: 18px;
	}

	.mds-testimonials-carousel__name {
		font-size: 17px;
	}

	.mds-testimonials-carousel__dots {
		margin-top: 23px;
	}
}

/**
 * Reduced motion
 */
@media (prefers-reduced-motion: reduce) {
	.mds-testimonials-carousel__track {
		scroll-behavior: auto;
	}

	.mds-testimonials-carousel__dot {
		transition: none;
	}
}