/* Single case study page (Figma node 3296:24403, Relish — CMS rebuild) —
   one shared template for every case study. Reuses Our Work's own
   card/grid classes (.work-case-studies__grid, .work-case-study-card) for
   "Similar stories" directly, see work.css, rather than duplicating that
   component here. */

.case-study-header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: clamp(88px, 9vw, 145px);
	padding-bottom: clamp(24px, 3vw, 40px);
}

.case-study-header__title {
	display: flex;
	align-items: center;
	gap: 35px;
	width: 100%;
}

.case-study-header__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.case-study-header__all {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	flex-shrink: 0;
}

.case-study-header__all span:last-child {
	font-family: var(--font-body);
	font-size: 1.5625rem;
	color: var(--color-ink);
	white-space: nowrap;
}

/* Figma sizes this per client rather than to one uniform box (a squarish
   badge for one client, a short wide wordmark for another) — height only,
   width auto, so each keeps its own natural proportions. Default height
   here is a fallback; see $icon_height in header.php for the per-client
   override that matches Figma's actual size for a given client's icon. */
.case-study-header__icon {
	/* max-height/max-width (not a fixed height) so a client's logo_on_light
	   fallback — sized for a completely different context (footer/card
	   badge), sometimes a long wide wordmark rather than a squarish icon —
	   can't blow out this row's width and force "More {client} work." to
	   wrap onto its own line below. Both being max-* (not width:<fixed>)
	   is what keeps the image's own aspect ratio intact while it shrinks
	   to fit, same as object-fit:contain would for a boxed image. */
	max-height: 4.9rem;
	max-width: 14rem;
	width: auto;
	height: auto;
	flex-shrink: 0;
}

.case-study-header__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 1.875rem;
	line-height: 1.33;
	color: var(--color-ink);
	/* Flex item, not a block — needs flex-grow to actually fill the row
	   (not just be allowed to) now that .case-study-header__title spans
	   the full container. min-width:0 is the standard override for a flex
	   text child, whose default min-width:auto would otherwise refuse to
	   shrink below its longest unbroken word and overflow the row instead
	   of wrapping normally. */
	flex: 1;
	min-width: 0;
}

.case-study-header__more {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	flex-shrink: 0;
}

.case-study-header__more span:first-child {
	font-family: var(--font-body);
	font-size: 1.5625rem;
	color: var(--color-ink);
	white-space: nowrap;
}

.case-study-header__arrow {
	display: flex;
	flex-shrink: 0;
	width: 3.686rem;
	height: 3.686rem;
}

.case-study-header__arrow img {
	width: 100%;
	height: 100%;
	display: block;
	transform: rotate(-90deg);
}

.case-study-header__arrow::after {
	transform: rotate(-90deg);
}

/* Same size as .case-study-header__arrow (shared base rule above) —
   pointing the opposite way (back to Our Work, not forward to the
   client) just needs the rotation reversed. */
.case-study-header__arrow--back img,
.case-study-header__arrow--back::after {
	transform: rotate(90deg);
}

/* One flat asset per case study (image or video) — Figma's own layered
   construction (overlapping mockups + rotated brand-coloured splashes)
   varies too much case to case to model generically in CSS, so that
   composition is baked into the exported/screenshotted image instead. */
.case-study-hero__panel {
	background: var(--color-offwhite, #fafafa);
}

.case-study-hero__panel .case-study-hero__image,
.case-study-hero__panel .case-study-hero__video {
	display: block;
	width: 100%;
	height: auto;
}

/* A fixed 50/50 grid rather than flex — a case study with many specific
   sub-categories (e.g. a broad "2025 review" covering most of the service
   list) produced a long .case-study-categories__specific string that, with
   flex + wrap enabled, either dropped the whole right column onto its own
   row or ate into the left column's width. Grid's two equal 1fr tracks
   keep both sides at an even 50/50 regardless of content length, with
   min-width:0 on each (below) letting long text wrap WITHIN its own
   column instead of overflowing it. */
.case-study-categories {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 24px;
	padding-top: 2rem;
	/* .case-study-divider-row already adds 3.125rem margin-top of its own
	   right after this — subtracted here so the total gap to the divider
	   line is 3.5rem, not 3.5rem + 3.125rem. */
	padding-bottom: 0.375rem;
}

/* Multiple top-level categories are joined into one comma-separated
   string (template-parts/case-study/categories.php), same as the specific
   sub-categories below — this used to render each as its own gapped <p>
   instead; display:flex/gap/flex-wrap here are now vestigial (harmless
   with the single resulting <p>, kept in case that ever changes back). */
.case-study-categories__top-level {
	display: flex;
	min-width: 0;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.case-study-categories__top-level .case-study-categories__item {
	font-weight: 600;
}

/* Multiple specific sub-categories are joined into one comma-separated
   line rather than shown as separate gapped items — see Figma node
   3296:24844 (three sub-categories, one string). */
.case-study-categories__specific {
	min-width: 0;
	text-align: right;
}

.case-study-categories__item {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.125rem;
	line-height: 30px;
	color: var(--color-ink);
}

.case-study-categories__item a:hover,
.case-study-categories__item a:focus-visible {
	text-decoration: underline;
}

.case-study-divider-row {
	margin: 3.125rem auto;
}

.case-study-divider {
	margin: 0;
	border: none;
	border-top: 1px solid var(--color-ink);
}

/* .case-study-divider-row right after this already provides its own top
   margin (3.125rem) before the line itself, so this only needs space
   above it, clearing .case-study-categories. Full size here (shares
   .case-study-header__all/__arrow as-is, same as the header's own nav
   row) — matches .client-projects__scroll-arrow (client.css, 59px) and
   Insights' own back-link/arrow (blog.css, .blog-back), so this reads as
   the same weight of link wherever it shows up. Sized down on mobile
   only, see the (max-width: 900px) block below. */
.case-study-all-link {
	margin-top: 1.5rem;
}

.case-study-content {
	display: flex;
	flex-direction: column;
	gap: 3.125rem;
	padding-bottom: clamp(64px, 8vw, 120px);
}

/* Without a gallery, this padding-bottom plus .case-study-divider-row's
   own margin-top (3.125rem, template-parts/case-study/cta.php) stacked
   into a noticeably bigger gap below the last section than the 3.125rem
   + 3.125rem (this container's own flex gap, both sides of the <hr>)
   between sections above it. Matching that same value here instead
   keeps the total gap to the next divider line the same either way. */
.case-study-content--no-gallery {
	padding-bottom: 3.125rem;
}

/* Extra images (e.g. spreads from a designed asset) — Figma sizes these
   asymmetrically per case study, but that's too bespoke to model
   generically, so this is just an even 2-column grid instead. */
.case-study-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

/* A gallery with just one image (e.g. a single composited photo standing
   in for what was originally a multi-photo Figma collage) should fill the
   whole row rather than sit at half-width in the first grid cell. */
.case-study-gallery img:only-child {
	grid-column: 1 / -1;
}

.case-study-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 700px) {
	.case-study-gallery {
		grid-template-columns: 1fr;
	}
}

.case-study-content__section {
	display: grid;
	grid-template-columns: 223px 1fr;
	column-gap: 50px;
}

.case-study-content__label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 30px;
	color: var(--color-ink);
	text-align: left;
}

.case-study-content__copy p {
	margin: 0 0 1em;
	font-family: var(--font-body);
	/* Light (300) — base.css's site-wide default for running/prose copy;
	   Figma's dev-mode export labels this text "Roboto:Regular" (400), but
	   that reads inconsistently bold against every other page's body copy,
	   which is all set at this same 300 weight. */
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 2rem;
	color: var(--color-ink);
}

.case-study-content__copy p:last-child {
	margin-bottom: 0;
}

.case-study-content__copy p:empty {
	display: none;
}

.case-study-content__copy strong {
	font-weight: 600;
}

/* Matches .blog-prose a (blog.css) — same treatment for any link inside
   running body copy, wherever it appears. */
.case-study-content__copy a {
	color: #b89c02;
	text-decoration: none;
}

.case-study-content__copy a:hover,
.case-study-content__copy a:focus-visible {
	text-decoration: underline;
}

.case-study-content__copy ul {
	margin: 0 0 1em;
	padding-left: 1.875rem;
	/* base.css resets every ul to list-style:none site-wide — restored
	   here since this is real bulleted copy, not a nav/card list. */
	list-style: disc;
}

.case-study-content__copy ul:last-child {
	margin-bottom: 0;
}

.case-study-content__copy li {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 2.375rem;
	color: var(--color-ink);
}

.case-study-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-block: clamp(24px, 3vw, 40px);
}

.case-study-cta__heading {
	/* Plain text, not a link — only the "Let's talk" button below should
	   go through to Contact; this used to be a duplicate <a> wrapping the
	   whole heading (both pointing at the same URL), which read as two
	   competing CTAs doing the same thing. Font styling matches the home
	   page's .intro__statement ("We help ambitious brands...") — see that
	   rule's own comment for the Figma ratio reasoning behind the
	   unitless line-height/em letter-spacing. */
	margin: 0;
	max-width: 51rem;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(1.75rem, 4vw, 3.125rem);
	line-height: 1.34;
	letter-spacing: -0.02em;
}

.case-study-cta__heading em {
	font-style: italic;
}

/* Same scroll-in underline reveal as .intro__highlight (home.css) — see
   its own comment for why unitless em is used and #b89c02 chosen.
   .is-visible is added to the shared .case-study-cta wrapper (not this
   <em> itself) by site.js's IntersectionObserver, once, the first time
   the CTA scrolls into view. */
.case-study-cta__highlight {
	position: relative;
	display: inline-block;
}

.case-study-cta__highlight::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.05em;
	height: 1px;
	background: #b89c02;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s ease;
}

.case-study-cta.is-visible .case-study-cta__highlight::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.case-study-cta__highlight::after {
		transition: none;
	}
}

.case-study-similar {
	padding-bottom: clamp(64px, 8vw, 120px);
}

.case-study-similar__heading {
	margin: 0 0 clamp(24px, 3vw, 40px);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 2.6rem;
	color: var(--color-ink);
}

@media (max-width: 900px) {
	.case-study-content__section {
		grid-template-columns: 1fr;
		row-gap: 12px;
	}

	/* Figma's own mobile frame (node 4014:27567) stacks the client icon
	   above the title, both centred — not side by side, left-aligned, the
	   way the desktop row reads. Neither "More {client} work." nor "All
	   case studies." (both desktop-only additions, see header.php) appear
	   in that frame at all (checked the actual screenshot, not just the
	   layer list) — the whole nav row is dropped entirely rather than
	   left stranded once the row it shared with the title no longer
	   exists. Hiding the row itself, not just its two links, also avoids
	   leaving behind an empty gap where it sat (.case-study-header's own
	   column gap still applies to a present-but-childless-looking box). */
	.case-study-header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.case-study-header__title {
		flex-direction: column;
		gap: 16px;
		width: auto;
	}

	.case-study-header__heading {
		/* A bit smaller than the desktop size (1.875rem) — matches Figma's
		   own mobile value directly (23px) rather than just scaling the
		   desktop one down. */
		font-size: 1.4375rem;
		max-width: none;
	}

	.case-study-header__nav {
		display: none;
	}

	/* Smaller here than the shared .case-study-header__all/__arrow default
	   (desktop, above) — the "All case studies." link right after the
	   category tags reads as a lighter secondary link on a narrow screen
	   at that full size, competing with the category text right above it. */
	.case-study-all-link .case-study-header__all {
		gap: 14px;
	}

	.case-study-all-link .case-study-header__all span:last-child {
		font-size: 1.125rem;
	}

	.case-study-all-link .case-study-header__arrow {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* Full width, edge to edge — .case-study-hero carries the .container
	   class directly (not a nested element within one), so simply zeroing
	   its own padding-inline is enough to reach the viewport edges; no
	   negative-margin break-out needed the way a padded PARENT's child
	   would (e.g. Our Work's case-study card images, work.css). */
	.case-study-hero {
		padding-inline: 0;
	}

	/* height:auto (base rule) leaves this entirely at the mercy of
	   whichever source image/video a given case study happens to use —
	   fine on desktop, where it's boxed into its own column regardless,
	   but at full viewport width on mobile a naturally wide/landscape
	   source (like this one) read as too thin. A fixed aspect-ratio +
	   object-fit:cover crops every case study's hero to the same
	   proportions instead, consistently, regardless of source image
	   shape — 2:1 here (phones; first tried 4:3, which came out too tall);
	   the wider @media below (700–900px) flattens it further to 16:9,
	   since the same 2:1 ratio at that width would already be pushing
	   450px tall, not just "taller" but genuinely oversized for what's
	   meant to be a supporting visual, not the page's main hero. */
	.case-study-hero__panel .case-study-hero__image,
	.case-study-hero__panel .case-study-hero__video {
		aspect-ratio: 2 / 1;
		height: auto;
		object-fit: cover;
	}

	/* Stacked, not side by side — the specific sub-categories on the right
	   were right-aligned specifically to sit opposite the bold top-level
	   label in that 2-column row; once they're just the next line down
	   instead, that reads as an odd, isolated right-aligned line rather
	   than matching the plain left-aligned stack Figma actually shows. */
	.case-study-categories {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.case-study-categories__specific {
		text-align: left;
	}

	/* Figma stacks the heading above the "Let's talk" button, both
	   centred, instead of the desktop row's side-by-side split. Font size
	   itself already matches Figma's own mobile value (30px) as-is — only
	   the layout changes here. */
	.case-study-cta {
		flex-direction: column;
		text-align: center;
		gap: 32px;
	}

	/* Figma's own mobile value (35px) — smaller than the desktop size
	   (2.6rem/41.6px) — centred above the grid rather than left-aligned. */
	.case-study-similar__heading {
		font-size: 2.1875rem;
		text-align: center;
	}
}

/* A middle ground between the phone-width 4:3 above and desktop's
   unconstrained natural height — the SAME 4:3 ratio at this width would
   already be pushing 700px tall, not just "taller" but genuinely oversized
   for what's meant to be a supporting visual, not the page's main hero. */
@media (min-width: 701px) and (max-width: 900px) {
	.case-study-hero__panel .case-study-hero__image,
	.case-study-hero__panel .case-study-hero__video {
		aspect-ratio: 16 / 9;
	}
}