/* Reviews marquee — single horizontally-scrolling row of mini review cards.
   Each card: avatar (or initial-letter fallback) + title + body + @handle.
   Soft edge fade on left and right via mask-image. Pause on hover. */

.dt-reviews-marquee {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(
		to right,
		transparent 0,
		black 8%,
		black 92%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		black 8%,
		black 92%,
		transparent 100%
	);
}

.dt-reviews-marquee__track {
	display: inline-flex;
	flex-shrink: 0;
	gap: var(--space-5);
	padding-inline: var(--space-3);
	animation: dt-marquee-x 80s linear infinite;
	will-change: transform;
}

.dt-reviews-marquee:hover .dt-reviews-marquee__track {
	animation-play-state: paused;
}

@keyframes dt-marquee-x {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.dt-reviews-marquee__track { animation: none; }
}

/* ---------- Card ---------- */

.dt-reviews-marquee__card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	flex-shrink: 0;
	width: min(380px, 84vw);
	padding: var(--space-6);
	background: var(--dt-surface);
	border: 1px solid var(--dt-border);
	border-radius: var(--radius-lg);
	color: var(--dt-ink);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* ---------- Avatar (image or initial-letter fallback) ---------- */

.dt-reviews-marquee__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	background: var(--dt-bg-alt);
	object-fit: cover;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.dt-reviews-marquee__avatar--initial {
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-snug);
	color: var(--dt-on-primary);
}

/* Distinct deterministic color per handle (a–f) — uses tokens that already
   exist so we stay inside the design system. */
.dt-reviews-marquee__avatar--a { background: var(--dt-ink); }
.dt-reviews-marquee__avatar--b { background: var(--dt-ink-soft); }
.dt-reviews-marquee__avatar--c { background: var(--dt-ink-faint); }
.dt-reviews-marquee__avatar--d { background: var(--dt-primary); }
.dt-reviews-marquee__avatar--e { background: var(--dt-ink-soft); }
.dt-reviews-marquee__avatar--f { background: var(--dt-ink); }

/* ---------- Copy column ---------- */

.dt-reviews-marquee__copy {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	min-width: 0;
	flex: 1;
}

.dt-reviews-marquee__title {
	margin: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-bold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--dt-ink);
}

.dt-reviews-marquee__body {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-normal);
	color: var(--dt-ink-soft);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.dt-reviews-marquee__handle {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	color: var(--dt-ink-faint);
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
	.dt-reviews-marquee__card {
		width: 300px;
		padding: var(--space-5);
		gap: var(--space-3);
	}

	.dt-reviews-marquee__avatar { width: 38px; height: 38px; }
}