/* ============================================================
   Testimonials — pure CSS auto-scroll strip, pauses on hover
   5 cards duplicated for seamless infinite loop
   ============================================================ */

.testimonials {
	padding-left: 0;
	padding-right: 0;
}

/* Break strip out of section padding to full viewport width */
.testimonials-strip-wrapper {
	overflow: hidden;
}

/* ---- Scrolling track ---- */
.testimonials-track {
	display: flex;
	width: max-content;
	animation: scroll-testimonials 48s linear infinite;
}

.testimonials-track:hover {
	animation-play-state: paused;
}

/* 5 cards × (420px + 32px gap) = 2260px */
@keyframes scroll-testimonials {
	to { transform: translateX(-2260px); }
}

/* ---- Card ---- */
.testimonial-card {
	width: 420px;
	flex-shrink: 0;
	margin-right: 32px;
	background-color: var(--color-near-white);
	border-radius: 12px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
}

.testimonial-card blockquote {
	font-size: 15px;
	line-height: var(--lh-body);
	font-style: italic;
	color: var(--color-gunmetal);
}

.testimonial-card blockquote p + p {
	margin-top: 0.75em;
}

.testimonial-attribution {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.testimonial-name {
	font-size: var(--fs-ui);
	font-weight: 600;
	color: var(--color-gunmetal);
	font-style: normal;
}

.testimonial-role {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-sage);
	font-style: normal;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.testimonials-track {
		animation: none;
		flex-wrap: wrap;
		gap: 20px;
	}
}