/* ============================================================
 * Results Marquee block (mc/results)
 *
 * Two-row infinite marquee — row 1 left, row 2 right.
 * Tracks auto-duplicate via view.js so translateX(-50%) loops
 * seamlessly even when the source gallery has few images.
 *
 * Color variables (--accent, --ink-3) come from the parent
 * theme. This stylesheet only defines block-specific layout.
 * ============================================================ */

.wp-block-mc-results.results {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px 0;
	text-align: center;
}

/* Wall of Wins — full-bleed infinite marquee, two rows.
   Row 1 scrolls left, row 2 scrolls right — twice the throughput, feels alive.
   Each track auto-duplicates client-side so translateX(-50%) loops seamlessly.
   Edges fade via mask-image so cards drift in/out of nothing.
   Pause on hover/focus so people can actually look at a card. */
.wp-block-mc-results .marquee-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 10px;
	padding: 4px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.wp-block-mc-results .marquee {
	overflow: hidden;
	width: 100%;
}

.wp-block-mc-results .marquee-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	width: max-content;
	animation: mc-marquee-scroll var(--marquee-duration, 45s) linear infinite;
	will-change: transform;
}

.wp-block-mc-results .marquee-track--reverse {
	animation-direction: reverse;
}

.wp-block-mc-results .marquee:hover .marquee-track,
.wp-block-mc-results .marquee:focus-within .marquee-track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-mc-results .marquee-track {
		animation: none;
	}
}

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

/* Card sizing — slightly smaller than single-row so two rows breathe. */
.wp-block-mc-results .marquee .result-card.pair {
	flex: 0 0 auto;
	width: clamp(300px, 30vw, 440px);
	margin: 0;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s;
}

.wp-block-mc-results .marquee .result-card.pair:hover {
	transform: translateY(-3px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 24px 50px -24px rgba(26, 25, 21, .5);
}

.wp-block-mc-results .result-card.pair {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #1b1a17;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 40px -24px rgba(26, 25, 21, .35);
	isolation: isolate;
}

.wp-block-mc-results .result-card.pair .pair-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.92) contrast(1.02);
}

/* Subtle dark wash at the bottom — helps if alt text or captions overlay later. */
.wp-block-mc-results .result-card.pair::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, .45) 100%);
	pointer-events: none;
}

@media (max-width: 640px) {
	.wp-block-mc-results .marquee .result-card.pair {
		width: 70vw;
	}
	.wp-block-mc-results .marquee-track {
		gap: 12px;
	}
}