/* testimonials — Figma 258:317. Columns 396px, gap 48, radius 40; centred, bleeding off both edges. */

.testimonials {
	--col: clamp(15rem, 12.515rem + 10.196vw, 24.75rem); /* 240px @390 → 396px @1920 */
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-block: calc(var(--space-section) / 2);
	scroll-margin-block-start: var(--space-8);
}

.testimonials__rows {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	overflow-x: clip;
}

/* One row = one horizontal scroll container; script.js drifts it (marquee) and
   clones the tiles on both sides so the loop never runs out. */
.testimonials__track {
	position: relative;
	display: grid;
	grid-auto-columns: var(--col);
	grid-auto-flow: column;
	gap: var(--space-12);
	margin: 0;
	padding: var(--space-2) calc(50% - var(--col) / 2); /* any tile can reach the centre */
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

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

.testimonials__track:focus-visible {
	outline-offset: -3px;
}

.testimonials__item {
	margin: 0;
	list-style: none;
	aspect-ratio: 1;
	overflow: hidden; /* radius mask */
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	transition: transform var(--duration-base) var(--ease-out);
}

.testimonials__item:hover {
	transform: translateY(-4px);
}

.testimonials__item img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-8);
	padding: var(--space-2);
}

.testimonials__arrow {
	display: grid;
	place-items: center;
	padding: var(--space-2);
	border: 0;
	background: none;
	cursor: pointer;
	transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.testimonials__chevron {
	inline-size: 1.3rem; /* 21px chevron */
}

/* The SVG points left; "previous" (visual right in RTL) is the mirrored one. */
.testimonials__arrow--prev .testimonials__chevron {
	transform: scaleX(-1);
}

.testimonials__arrow--next:hover { transform: translateX(-4px); } /* physical: nudges toward its arrow */
.testimonials__arrow--prev:hover { transform: translateX(4px); } /* physical: nudges toward its arrow */

.testimonials__dots {
	display: flex;
	gap: var(--space-4);
}

.testimonials__dot {
	inline-size: 0.9375rem; /* 15px dot */
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-tint-strong);
	cursor: pointer;
	transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.testimonials__dot:hover {
	transform: scale(1.2);
}

.testimonials__dot[aria-current="true"] {
	background: var(--color-primary);
}

@media (max-width: 767px) { /* bp: --bp-md */
	.testimonials__rows,
	.testimonials__track {
		gap: var(--space-6);
	}

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