.case .section__inner {
	container-type: inline-size;
}

.case__layout {
	--case-intro-gap: clamp(2.5rem, 6vw, 5.625rem);
	--case-grid-gap: clamp(1.5rem, 5vw, 4.375rem);
	--case-card-pad-block: 3.125rem;
	--case-card-pad-inline: 2.5rem;
	--case-copy-gap: 0.75rem;
	--case-featured-copy-gap: 1.125rem;

	display: grid;
	gap: var(--case-intro-gap);
}

.case__intro {
	align-items: end;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 3.125rem;
	justify-content: space-between;
}

.case__heading {
	letter-spacing: 0;
	margin: 0;
	text-transform: uppercase;
}

.case__layout .case__heading.heading {
	color: var(--text-heading);
	letter-spacing: 0;
}

.case__aside {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	margin-inline-start: auto;
	text-align: end;
}

.case__more {
	display: grid;
	gap: 0;
}

.case__more--header {
	display: none;
}

.case__more--footer {
	justify-items: center;
	text-align: center;
}

@media (min-width: 64rem) {
	.case__more--header {
		display: grid;
		justify-items: end;
	}

	.case__more--footer {
		display: none;
	}
}

.case__link-caption {
	color: var(--text-body);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	text-transform: uppercase;
}

.case__link-caption p {
	margin: 0;
}

.case__actions {
	justify-content: inherit;
}

.case__actions .button {
	font-size: 1rem;
	font-weight: 400;
	min-block-size: 0;
	opacity: 0.5;
	padding: 0;
}

.case__actions .button:hover,
.case__actions .button:focus-visible {
	opacity: 1;
}

.case__list {
	display: grid;
	gap: var(--case-grid-gap);
}

.case__featured {
	display: grid;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.case__grid {
	display: grid;
	gap: var(--case-grid-gap);
	grid-template-columns: 1fr;
}

@container (min-width: 48rem) {
	.case__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.case__card {
	--text-heading: var(--color-white);
	--text-body: var(--color-white);
	aspect-ratio: 7 / 6;
	background: var(--color-dark);
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	justify-content: flex-end;
	max-inline-size: 100%;
	min-block-size: 18rem;
	min-inline-size: 0;
	overflow: hidden;
	padding: var(--case-card-pad-block) var(--case-card-pad-inline);
	position: relative;
	text-align: center;
	text-decoration: none;
}

.case__card--featured {
	--case-copy-gap: var(--case-featured-copy-gap);
	aspect-ratio: 16 / 9;
	min-block-size: clamp(22rem, 55vw, 46.875rem);
}

@container (max-width: 47.99rem) {
	.case__card {
		--case-card-pad-block: 1.25rem;
		--case-card-pad-inline: 1.25rem;
		aspect-ratio: 5 / 6;
		min-block-size: 0;
	}

	.case__card--featured {
		aspect-ratio: 5 / 6;
		min-block-size: 0;
	}
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
	.case__card,
	.case__card--featured {
		aspect-ratio: 1 / 1;
		min-block-size: 0;
	}
}

@media (min-width: 64rem) and (max-width: 77.5rem) {
	.case__layout {
		--case-grid-gap: 2.5rem;
	}
}

.case__media {
	inset: 0;
	overflow: hidden;
	position: absolute;
	z-index: 0;
}

.case__img {
	block-size: calc(100% + 2px);
	display: block;
	inline-size: calc(100% + 2px);
	inset: -1px;
	max-inline-size: none;
	object-fit: cover;
	position: absolute;
	transform: scale(1);
	transition: transform 0.4s ease-in-out;
}

.case__media-placeholder {
	align-items: center;
	background: color-mix(in srgb, var(--color-dark) 88%, var(--color-white));
	block-size: 100%;
	border: 2px dashed color-mix(in srgb, var(--color-white) 28%, transparent);
	color: color-mix(in srgb, var(--color-white) 72%, transparent);
	display: flex;
	inline-size: 100%;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
}

.case__overlay {
	background: rgba(0, 0, 0, 0.2);
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.case__copy {
	display: grid;
	gap: var(--case-copy-gap);
	pointer-events: none;
	position: relative;
	z-index: 2;
}

.case__title {
	color: var(--color-white);
	letter-spacing: 0;
	margin: 0;
	text-transform: uppercase;
}

.case__layout .case__title.heading {
	color: var(--color-white);
	letter-spacing: 0;
}

.case__client {
	color: var(--color-white);
	margin: 0;
	text-transform: uppercase;
}

.case__card:hover,
.case__card:focus-visible {
	color: var(--color-white);
	text-decoration: none;
}

.case__card:hover .case__img,
.case__card:focus-visible .case__img {
	transform: scale(1.05);
}

.case__card--stack:hover .case__img,
.case__card--stack:focus-visible .case__img {
	transform: scale(1.08);
}

.case__editor-placeholder {
	color: var(--text-muted);
	font-size: var(--font-size-small);
	margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Scrollable — sticky stacked cards                                          */
/* -------------------------------------------------------------------------- */

.case[data-layout="scrollable"] .section__inner {
	/* container-type breaks position: sticky against the viewport. */
	container-type: normal;
	min-inline-size: 0;
}

.case__layout[data-layout="scrollable"] {
	--case-stack-step: 2.5rem; /* 40px peek + 40px per side width growth */
	--case-stack-offset: 2rem; /* 32px space from viewport top when stuck */
	--case-stack-lead-width: var(--width-content-standard); /* 1500px */
	--case-stack-gap: 3.75rem; /* 60px between intro and cases */
	/* Cap to the viewport, leaving the sticky offset on top and bottom. */
	--case-stack-card-size: min(53.125rem, calc(100svh - (2 * var(--case-stack-offset)))); /* 850px */
	--case-copy-gap: 0.625rem;
	gap: var(--case-stack-gap);
	min-inline-size: 0;
}

.case__layout[data-layout="scrollable"] .case__intro {
	background: var(--section-background);
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--case-stack-lead-width);
	padding-block-end: 0.5rem;
	position: relative;
	z-index: 1;
}

.case__layout[data-layout="scrollable"] .case__more--footer {
	margin-block-start: 0;
}

.case__stack {
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	isolation: isolate;
	max-inline-size: 100%;
	min-inline-size: 0;
}

/*
 * Tracks stay 100% wide so growth never overflows the page. Cards grow
 * inside the track (40px per side) but are hard-capped at the track width.
 */
.case__stack-item {
	display: flex;
	inline-size: 100%;
	justify-content: center;
	max-inline-size: 100%;
	min-inline-size: 0;
	position: sticky;
	top: calc(var(--case-stack-offset) + (var(--case-stack-i, 0) * var(--case-stack-step)));
	z-index: calc(2 + var(--case-stack-i, 0));
}

.case__stack-item--lead {
	top: var(--case-stack-offset);
	z-index: 2;
}

/* Last card covers the full stack, then hands off to the next section. */
.case__stack-item--last {
	top: var(--case-stack-offset);
	z-index: 20;
}

.case__card--stack {
	--case-card-pad-block: 4.375rem;
	/* Height is explicit; a ratio would force a min-content width past the viewport. */
	aspect-ratio: auto;
	/* Shrink by the sticky step so bottoms stay aligned as cards peek down. */
	block-size: calc(var(--case-stack-card-size) - (var(--case-stack-i, 0) * var(--case-stack-step)));
	flex: 0 1 auto;
	inline-size: min(
		100%,
		calc(var(--case-stack-lead-width) + (2 * var(--case-stack-i, 0) * var(--case-stack-step)))
	);
	justify-content: flex-start;
	max-block-size: var(--case-stack-card-size);
	max-inline-size: 100%;
	min-block-size: 0;
	min-inline-size: 0;
}

.case__stack-item--last .case__card--stack {
	block-size: var(--case-stack-card-size);
}

@media (max-width: 63.99rem) {
	.case__layout[data-layout="scrollable"] {
		--case-stack-gap: 1.5rem;
	}
}

@media (max-width: 47.99rem) {
	.case__layout[data-layout="scrollable"] {
		--case-stack-step: 1.25rem;
		--case-stack-card-size: min(28rem, calc(100svh - (2 * var(--case-stack-offset)) - 1rem));
	}

	.case__card--stack {
		--case-card-pad-block: 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.case__layout[data-layout="scrollable"] .case__stack {
		display: grid;
		justify-items: center;
	}

	.case__layout[data-layout="scrollable"] .case__stack-item {
		grid-area: 1 / 1;
		padding-block-start: calc(var(--case-stack-i, 0) * var(--case-stack-step));
		position: relative;
		top: auto;
	}
}