/* Media card: one photo or muted clip, poster-first */
.media-card {
	position: relative;
	margin: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-border);
	aspect-ratio: 3 / 4;
}
.media-card--4x5 { aspect-ratio: 4 / 5; }
.media-card__video,
.media-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.media-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, .92);
	color: var(--color-heading);
	box-shadow: var(--shadow-card);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--transition);
}
.media-card__play:hover { background: #fff; }
.media-card__play[hidden] { display: none; }
.media-card__play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-left: 3px; }
.media-card__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: var(--space-8) var(--space-4) var(--space-3);
	font-size: var(--text-xs);
	line-height: 1.4;
	color: #fff;
	background: linear-gradient(to top, rgba(31, 45, 42, .65), rgba(31, 45, 42, 0));
	pointer-events: none;
}

/* Media reel: horizontal scroll-snap strip of media cards */
.media-reel { padding-block: var(--section-pad); }
.media-reel__controls { display: flex; align-items: center; gap: var(--space-6); }
.media-reel__arrows { display: none; }
.media-reel__arrow:disabled { opacity: .4; cursor: default; border-color: var(--color-border); }

.media-reel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(72vw, 300px);
	gap: var(--space-3);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-pad);
	padding-inline: var(--container-pad);
	padding-bottom: var(--space-2); /* room for the focus ring */
	margin-inline: calc(-1 * var(--container-pad));
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.media-reel__track::-webkit-scrollbar { display: none; }
.media-reel__track:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.media-reel__track > .media-card { scroll-snap-align: start; }

@media (min-width: 600px) {
	.media-reel__track { grid-auto-columns: 260px; gap: var(--space-4); }
}
@media (min-width: 900px) {
	.media-reel__arrows { display: flex; }
	.media-reel__track {
		grid-auto-columns: calc((100% - 3 * var(--space-6)) / 4);
		gap: var(--space-6);
	}
}

/* Media feature: one card + text block (homepage provenance, product studio clip) */
.media-feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	align-items: center;
}
.media-feature__media { width: 100%; max-width: 420px; margin-inline: auto; }
.media-feature--text-first .media-feature__body { order: -1; }

@media (min-width: 900px) {
	.media-feature { grid-template-columns: 5fr 7fr; gap: var(--space-16); }
	.media-feature--text-first .media-feature__body { order: 0; }
	.media-feature__media { margin-inline: 0; }
	/* Compact variant lives inside a column, not a section */
	.media-feature--compact { grid-template-columns: minmax(0, 320px) 1fr; gap: var(--space-8); }
}

/* Provenance band (homepage) */
.provenance {
	background: var(--color-surface);
	border-block: 1px solid var(--color-border);
	padding-block: var(--section-pad);
}
.provenance__text {
	color: var(--color-ink);
	line-height: var(--leading-body);
	max-width: 52ch;
	margin: var(--space-4) 0 0;
}
.provenance__cta { margin-top: var(--space-6); }