/*
 * TorchBrand Case Studies — styles.
 *
 * Same dark design system as the rest of the TorchBrand site tooling.
 * Everything here is scoped under .torchbrand-case-studies so it never
 * leaks into (or gets overridden by) Divi's global styles — no
 * !important except where a single Divi reset rule genuinely needs
 * overriding on hover/focus states, or where a Divi heading/paragraph
 * style is more specific than the inherited colour below and would
 * otherwise render text grey instead of white.
 *
 * There's no search box on this page by design — see class-render.php —
 * but it does carry its own hero (eyebrow badge, heading, lead
 * paragraph), plus the filter/sort row, the case study grid and the
 * single case study page.
 */

.torchbrand-case-studies {
	--tbcs-bg: #0a0a0b;
	--tbcs-bg-glow: #371017;
	--tbcs-fg: #ffffff;
	--tbcs-muted: #a9a9b0;
	--tbcs-muted-2: #6f6f76;
	--tbcs-muted-3: #9a9aa2;
	--tbcs-chip-fg: #c9c9d0;
	--tbcs-border: #26262b;
	--tbcs-border-2: #2a2a2f;
	--tbcs-border-3: #24242a;
	--tbcs-border-4: #2f2f36;
	--tbcs-border-5: #3a3a42;
	--tbcs-panel: #141417;
	--tbcs-card: #121215;
	--tbcs-card-hover: #14161f;
	--tbcs-accent: #E96E4B;
	--tbcs-accent-hover: #f08b6c;
	--tbcs-blue: #ED3D5B;
	--tbcs-blue-panel: #371017;
	--tbcs-blue-border: #b62b42;
	--tbcs-blue-border-2: #c63951;
	--tbcs-blue-text: #f9d2d9;
	--tbcs-divider: #371b1f;
	--tbcs-rule: #1e1e21;
	--tbcs-radius-pill: 999px;
	--tbcs-radius-lg: 20px;
	--tbcs-radius-md: 12px;

	font-family: 'Archivo', system-ui, sans-serif;
	background: radial-gradient(1100px 620px at 12% -8%, var(--tbcs-bg-glow) 0%, rgba(55, 16, 23, 0) 62%), var(--tbcs-bg);
	color: var(--tbcs-fg);
	display: flex;
	flex-direction: column;
	/*
	 * Full-bleed: whatever Divi container/section this block sits inside
	 * (boxed or fullwidth) constrains this div to that container's content
	 * width by default, which leaves the dark background boxed in with
	 * plain white/theme-background gutters on either side instead of
	 * spanning the browser viewport. Breaking out to 100vw here — the
	 * inner .tbcs-hero / .tbcs-results-section / .tbcs-single wrappers
	 * still cap their own content at max-width:1180px and re-centre it —
	 * means the background always fills the full page width, on any Divi
	 * layout, with no Theme Builder row/section setting to configure.
	 *
	 * !important on the box-model properties because Divi (5 especially)
	 * frequently writes a row/column's configured width as page-specific
	 * CSS keyed to that module's unique ID — an ID selector beats a plain
	 * class regardless of source order, so without !important a Divi
	 * width/padding setting can silently win even after this rule loads.
	 * flex:0 0 auto guards the same box against a *different* failure
	 * mode: Divi 5's row/column layout is flex/grid-based, and a flex
	 * child is shrunk to fit its container by the flex algorithm itself —
	 * not by any competing CSS rule — unless it opts out of shrinking, so
	 * an explicit width alone isn't always enough insurance on its own.
	 */
	width: 100vw !important;
	max-width: 100vw !important;
	flex: 0 0 auto;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	/*
	 * "clip" only — deliberately not "hidden". Per the CSS overflow spec,
	 * pairing overflow-x:hidden with an overflow-y left at its default
	 * "visible" forces that visible axis to compute as "auto" instead,
	 * which turns this element into a scroll container and breaks the
	 * sidebar's position:sticky further down the page (sticky positions
	 * against the nearest scroll container, so it would start tracking
	 * this box instead of the real page). "clip" is exempt from that
	 * axis-pairing rule, so it blocks horizontal overflow without ever
	 * creating a scroll container. Supported in all current browsers; the
	 * rare one that doesn't understand "clip" just ignores the line and
	 * falls back to ordinary "visible" — the safe direction to fail in,
	 * since the sticky sidebar matters more than this specific guard.
	 */
	overflow-x: clip;
}

.torchbrand-case-studies,
.torchbrand-case-studies *,
.torchbrand-case-studies *::before,
.torchbrand-case-studies *::after {
	box-sizing: border-box;
}
/* Guards against a long unbroken string (a client name, a headline result,
   an un-wrapped title) forcing horizontal scroll on narrow phone widths. */
.torchbrand-case-studies {
	overflow-wrap: break-word;
	word-break: break-word;
}

.torchbrand-case-studies a {
	color: var(--tbcs-fg);
	text-decoration: none;
}
.torchbrand-case-studies a:hover {
	color: #b9b9bd;
}
.torchbrand-case-studies *:focus-visible {
	outline: 2px solid var(--tbcs-fg);
	outline-offset: 3px;
}
/*
 * The custom dropdown trigger/options draw their own focus treatment (a
 * soft blue glow that matches the rest of the design) instead of the
 * generic white focus-visible outline above — the default outline-offset
 * pokes out past the rounded shapes and reads as a stray white line.
 */
.torchbrand-case-studies .tbcs-custom-select-trigger:focus-visible,
.torchbrand-case-studies .tbcs-custom-select-option:focus-visible {
	outline: none;
}
.torchbrand-case-studies select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6f76' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 38px !important;
}
.torchbrand-case-studies .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.tbcs-hero {
	/*
	 * !important here for the same reason the outer .torchbrand-case-studies
	 * full-bleed rule needs it: now that that outer block spans the full
	 * viewport, this is the layer that re-centres readable content inside
	 * it at a sane width — if a Divi-generated width/padding rule (or the
	 * flex-stretch behaviour of the column-direction parent) overrides an
	 * un-guarded version of this, the text runs edge-to-edge instead.
	 */
	padding: 72px clamp(20px, 3.5vw, 48px) 56px !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	width: 100% !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.tbcs-hero-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--tbcs-blue-border);
	background: var(--tbcs-blue-panel);
	border-radius: var(--tbcs-radius-pill);
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tbcs-blue-text);
}
.tbcs-hero h1 {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 800;
	font-size: 56px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 24px 0 0;
	max-width: 780px;
	/* Parent theme heading styles (e.g. Divi's global H1 colour) are more
	   specific than the inherited colour from .torchbrand-case-studies, so
	   the headline can render grey instead of white without this. */
	color: var(--tbcs-fg) !important;
}
.tbcs-lead {
	font-size: 18px;
	line-height: 1.55;
	color: var(--tbcs-muted) !important;
	margin: 18px 0 0;
	max-width: 620px;
}

/* ── Filters + results section ─────────────────────────────────────── */

.tbcs-results-section {
	border-top: 1px solid var(--tbcs-divider);
	/* !important — see .tbcs-hero above: re-centres content inside the
	   now-full-bleed outer block, and needs to win over the same class of
	   Divi override. */
	padding: 40px clamp(20px, 3.5vw, 48px) 96px !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/*
 * Sectors (left) / Case Studies-Campaigns toggle (centre) / Clear filters
 * (right). A 3-column grid keeps the toggle visually centred on the row
 * regardless of how wide the Sectors field or Clear button are — the two
 * flanking auto-sized tracks stay equal width, so the middle column (and
 * whatever sits in it) is always the true centre of the row, not just the
 * midpoint between the other two items. Hidden/no-JS-only children
 * (the type hidden input, the <noscript> submit button) never receive an
 * explicit grid-column below, so they fall out of the visible layout
 * entirely while display:none (the input) or hidden by the noscript
 * UA rule (JS enabled) without disturbing the three visible columns; with
 * JavaScript disabled the <noscript> button becomes a fourth item and
 * simply wraps below on its own row.
 */
.tbcs-filter-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: flex-end;
	column-gap: 16px;
	row-gap: 12px;
}
.tbcs-filter-row .tbcs-field {
	grid-column: 1;
	justify-self: start;
}
.tbcs-filter-row .tbcs-type-toggle {
	grid-column: 2;
	justify-self: center;
}
.tbcs-filter-row .tbcs-clear {
	grid-column: 3;
	justify-self: end;
}

/*
 * The Case Studies/Campaigns toggle — a two-way segmented control, exactly
 * one side always active. Rendered as real links (see
 * TBCS_Render::render_type_toggle()) so it still works with JavaScript
 * disabled.
 */
.tbcs-type-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--tbcs-panel);
	border: 1px solid var(--tbcs-border);
	border-radius: var(--tbcs-radius-pill);
}
.tbcs-type-btn {
	border: 0;
	background: transparent;
	color: var(--tbcs-chip-fg);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	border-radius: var(--tbcs-radius-pill);
	cursor: pointer;
	white-space: nowrap;
}
.tbcs-type-btn:hover {
	color: var(--tbcs-fg);
}
.tbcs-type-btn.is-active {
	background: var(--tbcs-blue);
	color: #ffffff;
}
.tbcs-type-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(198, 57, 81, 0.4);
}
.tbcs-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	/* Flex items default to min-width:auto, so an unbreakable long term
	   name (white-space:nowrap in the custom dropdown's trigger label)
	   would otherwise refuse to shrink and inflate this field — and the
	   whole filter row — past its container instead of the trigger's own
	   ellipsis ever getting a chance to run. */
	min-width: 0;
}
.tbcs-field label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tbcs-muted-2);
	font-weight: 600;
}
.tbcs-field select {
	background-color: var(--tbcs-panel);
	color: var(--tbcs-fg);
	border: 1px solid var(--tbcs-border);
	border-radius: var(--tbcs-radius-md);
	font-family: inherit;
	font-size: 15px;
	padding: 12px 16px;
	min-width: 190px;
	max-width: 280px;
	cursor: pointer;
}
.tbcs-field select:has(option[value=""]:checked) {
	color: var(--tbcs-muted-2);
}
.tbcs-field select:focus-visible {
	outline: none;
	border-color: var(--tbcs-blue-border);
	box-shadow: 0 0 0 3px rgba(198, 57, 81, 0.3);
}

/*
 * Custom dropdown — JavaScript progressively enhances each
 * select[data-tbcs-facet] into this widget so the open list matches the
 * rest of the design instead of the browser's native (unstyleable) menu.
 * The original <select> is kept in the DOM (visually hidden, not
 * removed) so the filters still work exactly as before if JS fails to
 * load or run.
 */
.tbcs-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.tbcs-custom-select {
	position: relative;
}
.tbcs-custom-select-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: 190px;
	max-width: 280px;
	background-color: var(--tbcs-panel);
	color: var(--tbcs-fg);
	border: 1px solid var(--tbcs-border);
	border-radius: var(--tbcs-radius-md);
	font-family: inherit;
	font-size: 15px;
	padding: 12px 16px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tbcs-custom-select-value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tbcs-custom-select-value.is-placeholder {
	color: var(--tbcs-muted-2);
}
.tbcs-custom-select-trigger::after {
	content: "";
	flex-shrink: 0;
	width: 12px;
	height: 8px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236f6f76' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.15s ease;
}
.tbcs-custom-select.is-open .tbcs-custom-select-trigger::after {
	transform: rotate(180deg);
}
.tbcs-custom-select-trigger:hover {
	border-color: var(--tbcs-border-5);
}
.tbcs-custom-select.is-open .tbcs-custom-select-trigger,
.tbcs-custom-select-trigger:focus-visible {
	outline: none;
	border-color: var(--tbcs-blue-border);
	box-shadow: 0 0 0 3px rgba(198, 57, 81, 0.3);
}
.tbcs-custom-select-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 30;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--tbcs-panel);
	border: 1px solid var(--tbcs-border-4);
	border-radius: var(--tbcs-radius-md);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
	max-height: 260px;
	overflow-y: auto;
}
.tbcs-custom-select-option {
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.3;
	color: var(--tbcs-chip-fg);
	cursor: pointer;
}
.tbcs-custom-select-option:hover,
.tbcs-custom-select-option.is-focused {
	background: var(--tbcs-blue-panel);
	color: var(--tbcs-fg);
}
.tbcs-custom-select-option.is-selected {
	color: var(--tbcs-blue);
	font-weight: 600;
}
.tbcs-custom-select-option.is-selected:hover,
.tbcs-custom-select-option.is-selected.is-focused {
	color: var(--tbcs-fg);
	background: var(--tbcs-blue-panel);
}

.tbcs-clear {
	border: 1px solid var(--tbcs-border-2);
	background: transparent;
	color: var(--tbcs-chip-fg);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 12px 18px;
	border-radius: var(--tbcs-radius-md);
	cursor: pointer;
	white-space: nowrap;
}
.tbcs-clear:hover,
.tbcs-clear:focus-visible {
	border-color: var(--tbcs-blue-border);
	background: var(--tbcs-blue-panel);
	color: var(--tbcs-fg);
	outline: none;
}

.tbcs-results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 40px 0 20px;
	border-bottom: 1px solid var(--tbcs-rule);
	padding-bottom: 16px;
	flex-wrap: wrap;
	gap: 8px;
}
.tbcs-result-count {
	margin: 0;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: -0.02em;
	color: var(--tbcs-fg) !important;
}
.tbcs-sorted {
	font-size: 14px;
	color: var(--tbcs-muted-2);
}

.tbcs-results[aria-busy="true"] {
	opacity: 0.6;
	transition: opacity 0.15s ease;
}

.tbcs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 20px;
}

.tbcs-card {
	background: var(--tbcs-card);
	border: 1px solid var(--tbcs-border-3);
	border-radius: var(--tbcs-radius-lg);
	padding: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}
.tbcs-card:hover {
	border-color: var(--tbcs-blue-border);
	background: var(--tbcs-card-hover);
	box-shadow: 0 16px 40px rgba(237, 61, 91, 0.28);
}
.tbcs-card-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 21px;
	line-height: 1.22;
	letter-spacing: -0.015em;
	margin: 0;
	color: var(--tbcs-fg) !important;
}
.tbcs-card-blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--tbcs-muted-3);
}
.tbcs-card-rule {
	height: 1px;
	background: var(--tbcs-border-3);
}
/* On the archive card specifically, this divider fades out at both ends
   instead of running edge-to-edge, reading as a soft break below the
   description rather than a hard rule. */
.tbcs-card .tbcs-card-rule {
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0) 100%);
}
.tbcs-card-meta {
	margin: 0;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 16px;
	font-size: 13px;
}
.tbcs-card-meta > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
}
.tbcs-card-meta dt {
	color: var(--tbcs-fg) !important;
}
.tbcs-card-meta dd {
	margin: 0;
	color: var(--tbcs-muted-3);
	font-weight: 500;
}
.tbcs-card-cta {
	margin-top: auto;
	align-self: center;
	background: transparent;
	border: 1px solid var(--tbcs-border-5);
	color: var(--tbcs-fg);
	font-size: 14px;
	font-weight: 600;
	padding: 11px 20px;
	border-radius: var(--tbcs-radius-pill);
	white-space: nowrap;
}
.tbcs-card-cta:hover {
	background: var(--tbcs-blue);
	color: var(--tbcs-fg);
	border-color: var(--tbcs-blue);
}

.tbcs-empty {
	border: 1px dashed var(--tbcs-border-4);
	border-radius: var(--tbcs-radius-lg);
	padding: 56px;
	text-align: center;
	color: var(--tbcs-muted-3);
}
.tbcs-empty-title {
	margin: 0 0 8px;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: var(--tbcs-fg) !important;
}
.tbcs-empty p:last-child {
	margin: 0;
	font-size: 15px;
}

.tbcs-pagination {
	margin-top: 32px;
	display: flex;
	justify-content: center;
}
.tbcs-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.tbcs-pagination li {
	display: flex;
}
.tbcs-pagination a,
.tbcs-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--tbcs-radius-md);
	border: 1px solid var(--tbcs-border-2);
	color: var(--tbcs-chip-fg);
	font-size: 14px;
}
.tbcs-pagination .current {
	background: var(--tbcs-blue);
	border-color: var(--tbcs-blue);
	color: #ffffff;
}
.tbcs-pagination a:hover {
	border-color: var(--tbcs-blue);
	color: var(--tbcs-blue);
}

/* ── Single case study page ────────────────────────────────────────── */

/*
 * This is now a plain child of the .torchbrand-case-studies.tbcs-single-wrap
 * element below, not the same element — see class-render.php. Previously
 * both class names landed on one single <div>, which meant this rule and
 * the full-bleed .torchbrand-case-studies rule were two equal-specificity
 * !important declarations competing for the same width/margin properties
 * on the same element; whichever happened to sit later in this file won
 * outright, which is exactly the kind of fragile, order-dependent result
 * that kept flipping between "full width but uncentred" and "centred but
 * boxed". Splitting them onto parent/child elements — full-bleed
 * background on the parent, capped-and-centred content on the child —
 * removes the conflict entirely: each rule only ever governs its own
 * element, the same pattern the archive page's .tbcs-hero already used
 * successfully. The !important here is *not* fighting that other rule
 * any more; it's kept only as insurance against Divi ever generating
 * page-specific CSS for this element by chance.
 */
.tbcs-single {
	padding: 56px clamp(20px, 3.5vw, 48px) 96px !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/*
 * Edge fade: on some Divi setups this block's own edge still doesn't
 * land exactly at the browser edge (a boxed ancestor further up the page
 * clips a few pixels of the full-bleed breakout), which shows up as a
 * thin seam against a manually-set black page background. These two
 * overlays fade this block's own background to solid black right at its
 * left/right edges, so any such seam blends away instead of reading as a
 * hard line — harmless if the block is already landing exactly at the
 * true edge, since black-fading-to-transparent over black is invisible.
 * Positioned/z-indexed so they sit only in the empty gutter outside the
 * centred 1180px content column on any normal desktop width, and
 * pointer-events:none so they never intercept clicks on real content.
 * Lives on .tbcs-single-wrap (the outer, full-bleed element — see
 * class-render.php) so it isn't nested inside the recentred .tbcs-single
 * child and doesn't get clipped by that child's own width.
 */
.torchbrand-case-studies.tbcs-single-wrap {
	position: relative;
}
.torchbrand-case-studies.tbcs-single-wrap::before,
.torchbrand-case-studies.tbcs-single-wrap::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: clamp(24px, 4vw, 64px);
	pointer-events: none;
	z-index: 1;
}
.torchbrand-case-studies.tbcs-single-wrap::before {
	left: 0;
	background: linear-gradient(to right, #000000 0%, rgba(0, 0, 0, 0) 100%);
}
.torchbrand-case-studies.tbcs-single-wrap::after {
	right: 0;
	background: linear-gradient(to left, #000000 0%, rgba(0, 0, 0, 0) 100%);
}

/* Hero: badges, title, subtitle, intro blurb, CTA row, quick-nav — full
   width above the two-column split below. */
.tbcs-single-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding-bottom: 4px;
}
.tbcs-single-badges {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.tbcs-badge-type {
	display: inline-flex;
	align-items: center;
	letter-spacing: 0.02em;
	border-radius: var(--tbcs-radius-pill);
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--tbcs-blue-border);
	color: var(--tbcs-fg) !important;
	font-size: 15px;
	font-weight: 600;
	padding: 6px 16px;
	text-transform: uppercase;
}
.tbcs-single-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 800;
	font-size: 44px;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	max-width: 900px;
	color: var(--tbcs-fg) !important;
}
.tbcs-single-blurb {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--tbcs-chip-fg) !important;
	max-width: 720px;
}

.tbcs-single-cta-row {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.tbcs-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: var(--tbcs-radius-pill);
	white-space: nowrap;
	border: 1px solid transparent;
}
.tbcs-cta-solid-accent {
	background: var(--tbcs-accent);
	border-color: var(--tbcs-accent);
	color: #ffffff;
}
.tbcs-cta-solid-accent:hover {
	background: var(--tbcs-accent-hover);
	border-color: var(--tbcs-accent-hover);
	color: #ffffff;
}
.tbcs-cta-outline {
	background: transparent;
	border-color: var(--tbcs-border-5);
	color: var(--tbcs-fg);
}
.tbcs-cta-outline:hover {
	background: var(--tbcs-blue-panel);
	border-color: var(--tbcs-blue-border);
	color: var(--tbcs-fg);
}

.tbcs-single-quicknav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 16px;
	margin-top: 8px;
	font-size: 14px;
}
.tbcs-single-quicknav a {
	color: var(--tbcs-chip-fg);
	font-weight: 600;
}
.tbcs-single-quicknav a:hover {
	color: var(--tbcs-fg);
}
.tbcs-single-quicknav a:not(:last-child)::after {
	content: "·";
	margin-left: 16px;
	color: var(--tbcs-muted-2);
	font-weight: 400;
}

/* The case study's featured image, shown below the hero (title/blurb/
   CTA/quick-nav) and above the divider that starts the two-column body.
   Sized to 75% of the content column and centred, rather than running
   the full width, so it reads as a supporting visual, not a full banner. */
.tbcs-single-thumbnail {
	/* No top margin: .tbcs-single-hero already has its own bottom padding,
	   so adding one here would double that gap above the image. */
	margin: 0 auto 4px;
	max-width: 67%;
	border-radius: 25px;
	overflow: hidden;
}
.tbcs-single-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 25px;
}

/* Two-column body: main content sections (left) + sticky sidebar (right). */
.tbcs-single-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
	padding-top: 32px;
}
.tbcs-single-main {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
}
.tbcs-single-section-title {
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--tbcs-fg) !important;
}
.tbcs-single-content {
	font-size: 15px;
	line-height: 1.7;
	color: #d3d3d8;
}
.tbcs-single-content p {
	margin: 0 0 14px;
	text-align: justify !important;
}
.tbcs-single-content p:last-child {
	margin-bottom: 0;
}
.tbcs-single-content :is(h2, h3, h4) {
	color: var(--tbcs-fg) !important;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 600 !important;
}
.tbcs-single-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbcs-video-embed {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--tbcs-radius-lg);
	overflow: hidden;
	background: var(--tbcs-card);
	border: 1px solid var(--tbcs-border-3);
}
.tbcs-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Sidebar: Key Information card + CTAs, and the callout below it. Sticky
   on desktop so it travels with the reader down the main column. */
.tbcs-single-sidebar {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 24px;
}
.tbcs-key-info {
	background: var(--tbcs-card);
	border: 1px solid var(--tbcs-border-3);
	border-radius: var(--tbcs-radius-lg);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.tbcs-key-info-title {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tbcs-fg) !important;
}
.tbcs-key-info-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.tbcs-key-info-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--tbcs-fg) !important;
}
.tbcs-key-info-label {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.2;
	color: var(--tbcs-fg) !important;
}
.tbcs-key-info-value {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--tbcs-fg) !important;
}
.tbcs-sidebar-cta {
	width: 100%;
}
.tbcs-callout {
	background: var(--tbcs-blue-panel);
	border: 1px solid var(--tbcs-blue-border);
	border-radius: var(--tbcs-radius-lg);
	padding: 22px;
}
.tbcs-callout-title {
	margin: 0 0 8px;
	font-family: 'Archivo', system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--tbcs-fg) !important;
}
.tbcs-callout p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--tbcs-blue-text);
}
.tbcs-callout a {
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.tbcs-hero h1 {
		font-size: 42px;
	}
	.tbcs-single-title {
		font-size: 36px;
	}
	/*
	 * Below tablet width the 320px sidebar track gets too tight alongside
	 * a fluid main column, so the two-column layout collapses to one and
	 * the sidebar's sticky positioning is dropped — sticky only makes
	 * sense while it sits beside a taller column of content, not stacked
	 * above/below it.
	 */
	.tbcs-single-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.tbcs-single-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	/* !important: the base .tbcs-hero rule's padding shorthand is itself
	   !important (needed to survive Divi overrides — see that rule), and
	   only an !important declaration can win against another one. */
	.tbcs-hero {
		padding-top: 48px !important;
		padding-bottom: 40px !important;
	}
	.tbcs-hero h1 {
		font-size: 34px;
	}
	.tbcs-lead {
		font-size: 16px;
	}
	.tbcs-grid {
		grid-template-columns: 1fr;
	}
	/*
	 * Below the tablet breakpoint the 3-column left/centre/right grid
	 * collapses to a single stacked column, in DOM order: Sectors, then
	 * the Case Studies/Campaigns toggle, then Clear filters. Each item's
	 * explicit grid-column/justify-self from the desktop layout is reset
	 * so it spans the full row width instead of sitting in a now-collapsed
	 * track.
	 */
	.tbcs-filter-row {
		grid-template-columns: 1fr;
	}
	.tbcs-filter-row .tbcs-field,
	.tbcs-filter-row .tbcs-type-toggle,
	.tbcs-filter-row .tbcs-clear {
		grid-column: 1;
		justify-self: stretch;
	}
	.tbcs-type-toggle {
		justify-content: center;
	}
	.tbcs-type-btn {
		flex: 1;
	}
	.tbcs-field {
		/* justify-self:stretch alone doesn't stop this field's own
		   nested-flex content (long term names in particular) from
		   dictating its width, so pin it explicitly for the ellipsis
		   truncation below to have a real width to truncate against. */
		width: 100%;
	}
	.tbcs-field select {
		min-width: 0;
		width: 100%;
		max-width: none;
	}
	.tbcs-custom-select-trigger {
		min-width: 0;
		width: 100%;
		max-width: none;
	}
	.tbcs-custom-select-list {
		max-height: 45vh;
	}
	.tbcs-clear {
		text-align: center;
	}
	.tbcs-single-title {
		font-size: 28px;
	}
	.tbcs-badge-type {
		font-size: 12px;
		padding: 5px 13px;
	}
	.tbcs-single-cta-row {
		flex-direction: column;
		align-items: stretch;
	}
	.tbcs-key-info {
		padding: 18px;
	}
	.tbcs-callout {
		padding: 18px;
	}
}

/*
 * The card meta row (Sector / Timeline / Result) fits three equal columns
 * comfortably on a normal card width, but .tbcs-grid collapses to one
 * card per row below 640px, and on the narrowest phones (~375px and
 * under) that still leaves each of the three columns too tight — a
 * longer value like "3x Donations" wraps awkwardly. Stack them instead
 * on those widths only; 400px keeps the compact single-row layout on
 * every wider phone.
 */
@media (max-width: 400px) {
	.tbcs-card-meta {
		grid-template-columns: 1fr;
	}
}