/* ============================================================
   Scoped CSS — Case Studies (archive + singles) — v2.0
   Enqueued conditionally in functions.php (handle: tc-case-studies)
   Singles also load fancybox + gallery.css (shared .tc-gallery-* hover
   classes) + template-parts/js/case-studies.js (lightbox + scrubber).
   ============================================================ */

/* Hero band (shared pattern with pages.css — duplicated here because
   pages.css only loads on page templates, not CPT surfaces) */
#tc-page-hero {
	min-height: 380px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

#tc-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(31deg, #4b5c67, #49596500);
}

#tc-page-hero .container {
	position: relative;
}

#tc-page-hero h1 {
	font-size: 2.6rem;
	line-height: 1.15;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

#tc-page-hero .tc-page-hero-copy {
	max-width: 640px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Designed-masthead modifier, mirroring pages.css (duplicated for the same reason
   the hero band above is: pages.css does not load on CPT surfaces). The v03 crops
   carry their own dark copy panel and white diagonal, so the scrim would grey the
   band and double-darken the panel; and with no scrim the white headline crosses
   the band, where a diffuse shadow hazes out instead of holding an edge. */
#tc-page-hero.tc-hero-plain::before {
	content: none;
}

#tc-page-hero.tc-hero-plain h1,
#tc-page-hero.tc-hero-plain .tc-page-hero-copy {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}

/* Archive headline matches the Project Gallery masthead: 3.2rem / 2.2rem, the
   pages.css #tc-page-hero h1 sizes (operator, 2026-08-26). Scoped to
   .tc-hero-plain so the single-project heroes keep the smaller 2.6rem/1.9rem --
   their titles are full sentences and would overflow the band at this size.
   The mobile step must repeat the .tc-hero-plain selector: it outranks the
   `@media (max-width: 992px) #tc-page-hero h1` rule above, so without it the
   desktop size would leak into mobile. */
#tc-page-hero.tc-hero-plain h1 {
	font-size: 3.2rem;
	line-height: 1.1;
}

@media (max-width: 992px) {
	#tc-page-hero.tc-hero-plain h1 {
		font-size: 2.2rem;
	}
}

@media (max-width: 992px) {
	#tc-page-hero h1 {
		font-size: 1.9rem;
	}
}

/* Single-hero modifier: taller band, flat brand-color wash over the project photo */
#tc-page-hero.tc-cs-hero {
	min-height: 460px;
}

/* Flat, fairly opaque overlay instead of the old 31deg gradient (operator,
   2026-08-26). The gradient faded to clear right where the headline sits, so the
   type fought the photo and the band read muddy. An even wash is deliberate and
   keeps contrast constant across the whole band. Color is --tc-secondary #495965,
   chosen over --tc-primary #527891 (operator, 2026-08-26). Opacity is the one
   dial here -- lower shows more photo, higher pushes it further back. */
#tc-page-hero.tc-cs-hero::before {
	background: rgba(73, 89, 101, 0.82);
}

.tc-cs-hero-meta {
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.08em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* Article measure + editorial type scale */
.tc-cs-article {
	max-width: 760px;
	margin-inline: auto;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--tc-dark);
}

.tc-cs-article p {
	margin-bottom: 1.375rem;
}

/* Chapter headings (inserted h2s in post content + section headings) */
.tc-cs-article h2 {
	font-size: clamp(1.6rem, 2.5vw, 2rem);
	font-weight: 600;
	color: var(--tc-primary);
	margin: 2.5rem 0 1rem;
}

.tc-cs-article h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--tc-accent);
}

.tc-cs-article > h2:first-child,
.tc-cs-article > *:first-child h2:first-child {
	margin-top: 0;
}

/* Designed pull-quote */
.tc-cs-article blockquote {
	position: relative;
	background: var(--tc-light);
	border-left: 0;
	padding: 2rem 2.5rem 2rem 4.5rem;
	margin: 2.5rem 0;
	color: var(--tc-primary);
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.5;
}

.tc-cs-article blockquote::before {
	content: "\201C";
	position: absolute;
	top: 0.5rem;
	left: 1.25rem;
	font-size: 4.5rem;
	line-height: 1;
	font-weight: 800;
	color: var(--tc-accent);
}

.tc-cs-article blockquote p:last-child {
	margin-bottom: 0;
}

@media (max-width: 576px) {
	.tc-cs-article blockquote {
		padding: 1.5rem 1.25rem 1.5rem 3.25rem;
		font-size: 1.15rem;
	}
}

/* "Project at a Glance" facts panel */
.tc-cs-facts dl {
	display: grid;
	gap: 0.875rem;
}

.tc-cs-facts .tc-cs-facts-row {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.75rem;
	align-items: baseline;
	border-bottom: 1px solid rgba(73, 89, 101, 0.15);
	padding-bottom: 0.875rem;
}

.tc-cs-facts .tc-cs-facts-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.tc-cs-facts dt {
	letter-spacing: 0.06em;
}

/* Before/after scrubber (tc-ba family — homepage .ba component is separate) */
.tc-ba {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #111;
	user-select: none;
	touch-action: none;
}

.tc-ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.tc-ba__img--after {
	clip-path: inset(0 calc(100% - var(--pct)) 0 0);
	will-change: clip-path;
}

.tc-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
}

.tc-ba__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pct);
	transform: translateX(-50%);
	width: 3px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

.tc-ba__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 64px;
	transform: translate(-50%, -50%);
	background: #fff;
}

/* Drag affordance on the thumb (matches the homepage .ba handle) */
.tc-ba__handle::before {
	content: "\25C2\00A0\25B8";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	color: var(--tc-primary);
	font-size: 13px;
	letter-spacing: 2px;
	white-space: nowrap;
	line-height: 1;
}

.tc-ba:has(.tc-ba__range:focus-visible) {
	outline: 3px solid var(--tc-accent);
	outline-offset: 3px;
}

/* Case-study cards (archive grid + related) */
.tc-cs-card .tc-cs-card-img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	height: auto;
	transition: transform 0.35s ease;
}

.tc-cs-card:hover .tc-cs-card-img,
.tc-cs-card:focus-visible .tc-cs-card-img {
	transform: scale(1.05);
}

.tc-cs-card:hover h3,
.tc-cs-card:focus-visible h3 {
	color: var(--tc-accent);
}

/* Dealer CTA band */
.tc-cs-dealer-cta-icon {
	font-size: 2.5rem;
	color: var(--tc-accent);
}

@media (prefers-reduced-motion: reduce) {
	.tc-cs-card .tc-cs-card-img {
		transition: none;
	}

	.tc-cs-card:hover .tc-cs-card-img,
	.tc-cs-card:focus-visible .tc-cs-card-img {
		transform: none;
	}
}