/* ==========================================================================
   Success stories — template-parts/home/stories.php, template-parts/story/card.php,
   archive-dli_story.php (grid variant)
   ========================================================================== */

.stories__rail {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.stories__track {
	display: flex;
	flex: none;
	gap: var(--s-5);
	margin: 0;
	padding: 8px 12px 24px;
	list-style: none;
	animation: dli-marquee 60s linear infinite;
}

.stories__rail:hover .stories__track,
.stories__rail:focus-within .stories__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.stories__track { animation: none; }
	.stories__rail { overflow-x: auto; }
}

.story-card {
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	width: min(380px, 82vw);
	padding: var(--s-6);
	border: 1px solid var(--color-border);
	border-radius: var(--r-xl);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.story-card__stars {
	display: flex;
	gap: 2px;
	color: var(--dli-amber-500);
}

.story-card__quote {
	flex: 1;
	margin: 0;
	color: var(--color-text-2);
	font-size: var(--fs-lg);
	font-weight: 500;
	line-height: 1.55;
}

.story-card__quote::before {
	content: "“";
	display: block;
	height: 28px;
	color: var(--dli-green-500);
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
}

.story-card__who {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.story-card__who strong {
	display: block;
	color: var(--color-heading);
}

.story-card__who small {
	color: var(--color-text-muted);
	font-size: var(--fs-sm);
}

.story-card__who .badge {
	margin-left: auto;
}

.stories__more {
	margin-top: var(--s-5);
}

/* Archive grid variant */
.stories-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: var(--s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.stories-grid .story-card {
	width: auto;
}