/* ===========================================================================
   showcase-editorial-case-study — static single-project editorial spread
   ---------------------------------------------------------------------------
   Scope: .vbs-showcase-editorial-case-study
   Depends on: css/tokens.css, css/base.css

   One broad documentary image and a three-part project note make this read
   like a case-study opening rather than a card grid. There is no hidden state,
   animation or interaction layer; the whole story is present from first paint.
   ======================================================================== */

/* --- case-study opening ------------------------------------------------- */
.vbs-showcase-editorial-case-study__intro {
	display: grid;
	gap: 2rem;
	padding-block: clamp(1rem, 2.5vw, 2.5rem) clamp(2.5rem, 5vw, 4.5rem);
}

.vbs-showcase-editorial-case-study__title {
	max-inline-size: 13ch;
	text-wrap: balance;
}

.vbs-showcase-editorial-case-study__dek {
	display: grid;
	align-content: end;
	justify-items: start;
	gap: 1.5rem;
}

.vbs-showcase-editorial-case-study__dek > .vb-lead {
	max-inline-size: 36ch;
	color: var(--vb-color-ink-soft);
}

@media (min-width: 62rem) {
	.vbs-showcase-editorial-case-study__intro {
		grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
		gap: clamp(3rem, 8vw, 8rem);
		align-items: end;
	}

	.vbs-showcase-editorial-case-study__dek {
		padding-inline-start: clamp(1.5rem, 3vw, 3rem);
		border-inline-start: var(--vb-border-hair) solid var(--vb-color-rule);
	}
}

/* --- documentary plate -------------------------------------------------- */
.vbs-showcase-editorial-case-study__hero { margin: 0; }

.vbs-showcase-editorial-case-study__hero-media {
	--vb-ratio: 16 / 9;
	border-radius: 0;
}

.vbs-showcase-editorial-case-study__caption {
	display: grid;
	gap: 0.35rem 2rem;
	padding-block-start: 0.9rem;
	color: var(--vb-color-mute);
}

@media (min-width: 48rem) {
	.vbs-showcase-editorial-case-study__caption {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* --- project note ------------------------------------------------------- */
.vbs-showcase-editorial-case-study__story {
	display: grid;
	gap: 2.5rem;
	margin-block-start: clamp(3rem, 7vw, 6rem);
	padding-block-start: clamp(2rem, 4vw, 3.5rem);
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-showcase-editorial-case-study__facts {
	display: grid;
	align-content: start;
}

.vbs-showcase-editorial-case-study__fact {
	display: grid;
	gap: 0.6rem;
	padding-block: 1rem;
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-showcase-editorial-case-study__fact:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.vbs-showcase-editorial-case-study__fact dd {
	margin: 0;
	max-inline-size: 34ch;
	color: var(--vb-color-ink-soft);
}

.vbs-showcase-editorial-case-study__note {
	align-self: start;
}

.vbs-showcase-editorial-case-study__quote {
	margin: 1rem 0 0;
	max-inline-size: 27ch;
	text-wrap: pretty;
}

.vbs-showcase-editorial-case-study__body {
	margin-block-start: 1.5rem;
	max-inline-size: var(--vb-max-prose);
	color: var(--vb-color-ink-soft);
}

.vbs-showcase-editorial-case-study__detail { margin: 0; }

.vbs-showcase-editorial-case-study__detail-media {
	--vb-ratio: 4 / 5;
	border-radius: 0;
}

.vbs-showcase-editorial-case-study__detail-caption {
	display: block;
	margin-block-start: 0.8rem;
	color: var(--vb-color-mute);
}

@media (min-width: 54rem) {
	.vbs-showcase-editorial-case-study__story {
		grid-template-columns: minmax(10rem, 0.7fr) minmax(0, 1.35fr) minmax(13rem, 0.75fr);
		gap: clamp(2rem, 5vw, 5rem);
	}
}

/* --- outcomes -----------------------------------------------------------
   A definition list keeps the figures and their qualifications together in
   the source. On wider screens the same three entries become a ruled strip. */
.vbs-showcase-editorial-case-study__outcomes {
	display: grid;
	margin-block-start: clamp(3rem, 6vw, 5rem);
	border-block: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-showcase-editorial-case-study__outcome {
	padding-block: 1.5rem;
}

.vbs-showcase-editorial-case-study__outcome + .vbs-showcase-editorial-case-study__outcome {
	border-block-start: var(--vb-border-hair) solid var(--vb-color-rule);
}

.vbs-showcase-editorial-case-study__outcome-value {
	font-family: var(--vb-font-display);
	font-size: var(--vb-fs-h1);
	font-weight: var(--vb-weight-heading);
	line-height: var(--vb-lh-h1);
	letter-spacing: var(--vb-ls-h1);
	color: var(--vb-color-ink);
}

.vbs-showcase-editorial-case-study__outcome dd {
	margin: 0.5rem 0 0;
	max-inline-size: 28ch;
	color: var(--vb-color-mute);
}

@media (min-width: 48rem) {
	.vbs-showcase-editorial-case-study__outcomes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vbs-showcase-editorial-case-study__outcome {
		padding: clamp(1.5rem, 3vw, 2.5rem);
	}

	.vbs-showcase-editorial-case-study__outcome:first-child { padding-inline-start: 0; }
	.vbs-showcase-editorial-case-study__outcome:last-child { padding-inline-end: 0; }

	.vbs-showcase-editorial-case-study__outcome + .vbs-showcase-editorial-case-study__outcome {
		border-block-start: 0;
		border-inline-start: var(--vb-border-hair) solid var(--vb-color-rule);
	}
}