/*
 * Work dossier case-content primitives. Mobile-first, with the same tokens
 * and breakpoint as the rest of the site. Accent (olive/blue) is carried by
 * the dossier's own [data-accent] attribute.
 */

.kts-case__masthead {
	margin-bottom: var(--kts-space-32);
}

.kts-case__title {
	margin: 0;
}

.kts-case__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kts-space-16);
	margin-top: var(--kts-space-16);
	font-size: 0.85rem;
	color: var(--kts-text-secondary);
}

/* Urgent RC fix: real project URL (kaitago_work_url meta, or the
   fallback's own url for kim-tran) -- was registered/collected since
   Batch 1 but never actually rendered anywhere. */
.kts-case__meta-link {
	color: var(--kts-deep-olive);
	text-decoration: none;
	border-bottom: 1px solid var(--kts-deep-olive);
	padding-bottom: 1px;
}

.kts-case__meta-link:hover,
.kts-case__meta-link:focus-visible {
	color: var(--kts-ink-black);
	border-bottom-color: var(--kts-ink-black);
}

.kts-case__status {
	margin-top: var(--kts-space-16);
	padding: var(--kts-space-12) var(--kts-space-16);
	border-left: 2px solid var(--kts-border-strong);
	background: var(--kts-surface-sunken);
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--kts-text-secondary);
	max-width: 60ch;
}

.kts-case[data-accent="olive"] .kts-case__status {
	border-left-color: var(--kts-deep-olive);
}

.kts-case[data-accent="blue"] .kts-case__status {
	border-left-color: var(--kts-mineral-blue);
}

.kts-case__opening {
	margin: var(--kts-space-32) 0;
}

.kts-case__opening img {
	width: 100%;
	height: auto;
	display: block;
	background: var(--kts-surface-sunken);
}

.kts-case__narrative {
	display: flex;
	flex-direction: column;
	gap: var(--kts-space-32);
	max-width: 68ch;
}

.kts-case__block .kts-register__label {
	margin-bottom: var(--kts-space-12);
}

.kts-case__gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kts-space-16);
	margin: var(--kts-space-48) 0;
}

.kts-case__gallery-item {
	margin: 0;
	border: 1px solid var(--kts-border-default);
}

.kts-case__gallery-item img {
	display: block;
	width: 100%;
	height: auto;
}

.kts-case__gallery-item figcaption {
	padding: var(--kts-space-8) var(--kts-space-12);
	border-top: 1px solid var(--kts-hairline);
	font-size: 0.75rem;
	color: var(--kts-text-muted);
}

.kts-case__related {
	margin: var(--kts-space-32) 0;
	font-size: 0.9rem;
	color: var(--kts-text-secondary);
}

.kts-case__next {
	margin-top: var(--kts-space-64);
	padding-top: var(--kts-space-24);
	border-top: 1px solid var(--kts-border-default);
}

.kts-case__next-link {
	display: flex;
	align-items: baseline;
	gap: var(--kts-space-12);
	font-family: var(--kts-font-serif);
	font-size: 1.3rem;
	color: var(--kts-ink-black);
	text-decoration: none;
}

.kts-case__next-link[data-accent="olive"] .kts-work-row-mobile__number {
	color: var(--kts-deep-olive);
}

.kts-case__next-link[data-accent="blue"] .kts-work-row-mobile__number {
	color: var(--kts-mineral-blue);
}

.kts-case__next-link:hover,
.kts-case__next-link:focus-visible {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.kts-case__gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =====================================================================
 * Batch 4.1 — Case desktop composition correction.
 *
 * header.php now gives Work Case pages kts-main--wide (was previously
 * capped at .kts-main's blanket 72ch, ~700px, for the whole article
 * including the image gallery — the reported over-narrowing). The
 * article itself gets a governed ceiling here instead of stretching
 * uncapped to the rail edge; .kts-case__narrative keeps its existing
 * 68ch (~680px) reading measure unchanged, and media is allowed to
 * break out wider than that measure, up to source-resolution limits.
 * ===================================================================== */

@media (min-width: 1200px) {
	.kts-case {
		max-width: 1000px;
	}

	.kts-case__opening,
	.kts-case__gallery {
		/* Kim Trần's real production assets are >=1055px native width
		   (see Batch 4.1 report §C), so 900px here is a real enlargement,
		   not an upscale. */
		max-width: 900px;
	}
}

/*
 * Vạn Nếp asset-resolution constraint (Batch 4.1, report §C): its opening
 * image (vn-lacquer-a.png) is a portrait 530x600 source and its gallery
 * images are similarly narrow — letting it stretch to the same 900px
 * ceiling as Kim Trần would upscale a real photograph well past its
 * source resolution. inc/work-data.php doesn't emit a per-case width
 * hint, so this targets the one place that's stable and unambiguous: the
 * known slug, via [data-slug] on the inline dossier.
 * Capped near its native width instead — deliberately narrower than Kim
 * Trần's, which is the accurate outcome of a real constraint, not an
 * inconsistency.
 */
@media (min-width: 1200px) {
	[data-slug="van-nep"] .kts-case__opening,
	[data-slug="van-nep"] .kts-case__gallery {
		max-width: 560px;
	}
}