/* Case Studies CTA (SPEC §2/§3/§4, Figma 10416:5705) — light-purple band with rounded
   TOP corners closing /insights/: "CASE STUDIES" eyebrow, a large centered headline,
   a row of client logos (each with a text fallback when no image is uploaded), and a
   primary button. Built to be reused on About / Services / Studios with no code change.

   BB owns the section box (bb-owns-section-spacing convention): this module never sets
   its own outer width or minimum height — those stay recommended BB row settings (see
   the comment on .tbl-cs-cta__inner below). The module DOES legitimately own the
   band's background, its rounded top corners, its 934px-centered internal column, AND
   — as of 10.1 items 10d/10e — its own top/bottom padding-block: the band shipped with
   none at all, so the "CASE STUDIES" eyebrow sat flush against the rounded top corner
   (10.1-MEASUREMENTS.md M-10). This is the band's own internal composition, the same
   category as the column and the corners, not section-level spacing; BB still owns the
   row box, its width and its minimum height.

   Zero raw hex values and no forced-priority overrides (project convention — this
   file is unlayered and already outranks style.css's layered forms.css/reset.css). */

.tbl-cs-cta {
	position: relative;
	background: var(--nav-bolt-color); /* exact-match token per SPEC §4's token map (reused from the nav's own use of the same purple) */
	/* Exact corner radius could not be pixel-extracted from Figma (SPEC §2) — the
	   nearest token per SPEC §4's flag is --Corner-Radius-XXXL (48px), pending
	   confirmation with Chris. TOP corners only: the band runs straight into the
	   footer with a hard, unrounded bottom edge (SPEC §9 item 20). */
	border-radius: var(--Corner-Radius-XXXL) var(--Corner-Radius-XXXL) 0 0;
	/* 10.1 items 10d + 10e: the band shipped with NO vertical padding at all, so the
	   "CASE STUDIES" eyebrow sat hard against the rounded top corner and the whole
	   band read far tighter than the frame. Measured live at 10.1-MEASUREMENTS.md
	   M-10 (all 5 real logos in place, M-11 = 5/5): A_live = 0px, B_live = 0px at
	   1600/800/390 — well under the plan's 200px stop-and-raise gate, and no residual
	   to subtract (both are 0, not merely small) — against the frame's A_figma = 254px
	   and B_figma = 159px (10.1-MEASUREMENTS.md M-5, which CONFIRMS SPEC §2's numbers
	   exactly, no correction needed). M-10 also confirms the .fl-row-content ancestor
	   computes 0px padding at every width, so none of this double-counts existing BB
	   row padding.

	   This is the band's OWN internal composition — the same category as its 934px
	   centered column and its rounded top corners, both of which this module already
	   owns — not outer section spacing. The BB row still owns the row box, its width
	   and its minimum height. This deliberately reverses the "outer top/bottom padding
	   is a recommended BB row setting" note this file previously shipped with, on the
	   same grounds 10-09 reversed 10-07's "BB fully owns feed width" decision after
	   measuring the live page (10-QA-FINDINGS.md section 6, Finding 3): the built page
	   did not deliver what the design promised, and the module is the only place
	   inside the F-1 fence that can deliver it.

	   Fluid rather than a breakpoint step, since no tablet or mobile frame exists for
	   this band (D-17/JUDGMENT). Top solved for a straight line through (390, 72) and
	   (1600, 254); bottom through (390, 48) and (1600, 159).
	   Arithmetic (re-derivable without re-reading the plan):
	   top:    slope (254-72)/(1600-390) = 0.15041 -> 15.04vw;
	           intercept 72 - 0.15041*390 = 13.34px.
	           At 1600: 13.34 + 240.66 = 254. At 390: 13.34 + 58.66 = 72.
	   bottom: slope (159-48)/1210 = 0.09174 -> 9.17vw;
	           intercept 48 - 0.09174*390 = 12.22px.
	           At 1600: 12.22 + 146.72 = 158.9. At 390: 12.22 + 35.78 = 48. */
	padding-block: clamp(48px, 12.22px + 9.17vw, 160px) clamp(48px, 12.22px + 9.17vw, 160px);
}

/* The band's internal 934px-centered column. This measure is the band's own visual
   identity (SPEC §2), not section spacing, so the module legitimately owns it. The
   band's OWN top/bottom padding-block lives on .tbl-cs-cta above (10.1 items 10d/10e)
   — do not add padding-block / padding-top / padding-bottom to THIS rule; the band's
   background and rounded corners are on the parent, and the vertical rhythm belongs
   there with them, not on this inner flex column.

   10.1 item R3-2: as of this round, .tbl-cs-cta__inner is rendered TWICE by
   frontend.php — once wrapping the eyebrow+headline, once wrapping the button —
   with .tbl-cs-cta__logos now a SIBLING <ul> rendered BETWEEN them (a direct child
   of <section class="tbl-cs-cta">, not nested inside either .tbl-cs-cta__inner).
   This is why the logo row below no longer inherits this 934px measure: it never
   sits inside this box at all, R3-2's whole fix. Both .tbl-cs-cta__inner instances
   share this exact rule unchanged — the text/button measure and centering this
   selector provides is still correct for both. */
.tbl-cs-cta__inner {
	max-width: 934px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Eyebrow — Figma "Category - Small": Sequel Sans (--body-font; this design system has
   no distinct "Book Disp" family string, matching the Client Roster label's identical
   treatment), 10px, weight 405, 2px tracking, uppercase, --Black (SPEC §3/§4 exact
   match, distinct from the headline's white). */
.tbl-cs-cta__eyebrow {
	margin: 0 0 20px;
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 1.778;
	font-weight: 405;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--Black);
}

/* Headline — Figma "H2" (50px/54lh). A bare <h2> already inherits the sitewide fluid
   H2 clamp from theme.css (h2, .h2 { font-size: var(--h2-font-size); } plus
   --header-line-height: var(--h2-line-height) = 1.08, i.e. 54/50 — an exact match to
   this SPEC row) and its font-family/weight from the global heading rule, so only the
   color needs overriding here. 10.1-MEASUREMENTS.md M-3 confirms the frame's headline
   font-size is exactly 50px, matching this clamp's own ceiling, so no separate
   font-size declaration is added below.
   JUDGMENT (D-17): this headline has no mobile frame. Rather than hand-rolling a
   second, duplicate clamp for the same 50px/54lh Figma "H2" style already tokenized
   site-wide, this reuses --h2-font-size's own clamp (30px floor -> 50px ceiling,
   viewport 500-1400px) as the narrow-width floor — one source of truth, not two. */
.tbl-cs-cta__headline {
	/* 10.1 item 10b: with no max-width, this <h2> is a flex item under
	   .tbl-cs-cta__inner's align-items:center, which sizes it to its own natural
	   (shrink-to-fit) width rather than the column's 934px measure — harmless for a
	   short line, but this module is built to be reused on About/Services/Studios
	   with editable BB copy, so a longer headline can run past the band's edges as
	   one oversized line with no wrap boundary at all. The frame constrains its own
	   headline text box to 934px and wraps within it (10.1-MEASUREMENTS.md M-3: node
	   10416:5708, w=934). min(934px, 100%) reproduces that measure and keeps it from
	   overflowing the ->600px band, so no extra media-query override is needed.

	   Verified (headless Chromium, real SequelSans-RomanDisp.woff2 @ 50px/-0.01em
	   tracking): the CURRENT corrected copy ("Thinking is just the start.", 27
	   characters, F-5/R-2) is only ~501px wide unwrapped, so at a 934px measure it
	   renders as ONE line — not the frame's 3 lines, which wrap a second, longer
	   sentence this module's headline field does not carry. Per F-5/R-2 this is
	   CORRECT: the corrected copy is shorter than the frame's typo'd string, so fewer
	   lines is the expected outcome, and the measure is deliberately NOT narrowed
	   further to manufacture extra line-breaks — doing so would only resurface as a
	   bug the moment a longer headline is entered in this reusable module. */
	max-width: min(934px, 100%);
	/* margin-bottom: 10.1-MEASUREMENTS.md M-3's headline_bottom -> logos_top gap is
	   40px (5437 - 5397), which differs from the previous guessed 64px by more than
	   the plan's 8px tolerance, so the measured value replaces it. */
	margin: 0 0 40px;
	color: var(--White);
}

/* Logo row — flex, centered, wraps when it must. Figma measures ~89px gaps between
   5 logos at desktop (SPEC §2); no responsive treatment exists in the frame for this
   row (SPEC §8 last row is JUDGMENT), so ≤900px below tightens the gap and lets it
   wrap to 2-3 per line rather than shrinking logos below legibility.
   margin-bottom: the frame's logos_bottom -> button_top gap is 55.35px
   (10.1-MEASUREMENTS.md M-3/M-4: 5542 - 5486.65), which differs from the previous
   guessed 32px by more than the plan's 8px tolerance, so the measured value replaces
   it.

   10.1 item R3-2 (Ben, 2026-07-29 — "the logos are squeezed into the narrow text
   measure"): this row previously rendered inside .tbl-cs-cta__inner (934px,
   frontend.php's old single-wrapper markup), so it was capped to the SAME narrow
   measure meant for the eyebrow/headline/button, forcing an unbalanced wrap at every
   viewport (10.1-MEASUREMENTS.md M-12: a 4+1 orphan split measured at 1600/1440/800,
   BEFORE this fix, even though the row visually reads as "squeezed"). Now that
   frontend.php renders this <ul> as a direct child of <section class="tbl-cs-cta">
   (a sibling of both .tbl-cs-cta__inner instances, not nested in either), it
   naturally spans the band's own real content width instead — the same full-bleed
   pattern already used by .tbl-client-roster__viewport beside its narrower __inner,
   and .tbl-insights__hero staying unconstrained beside .tbl-insights__feed's 974px
   inner. padding-inline keeps the row off the band's own rounded top corners now
   that nothing constrains its outer edge. */
.tbl-cs-cta__logos {
	list-style: none;
	margin: 50px 0;
	padding: 0 clamp(24px, 5vw, 64px);
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 36px 89px;
}

.tbl-cs-cta__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Normalizes mixed logo aspect ratios the way tbl-client-roster.css does: constrain
   the box, let width track naturally, object-fit: contain. Largest measured logo
   height in the frame is Denny's at 49.65px (SPEC §2), so 50px is the ceiling. */
.tbl-cs-cta__logo-img {
	display: block;
	width: auto;
	height: auto;
	max-width: 160px;
	max-height: 50px;
	object-fit: contain;
}

/* Text fallback for a logo row with no image uploaded — this module ships with all
   five rows seeded and zero images, so this is the DEFAULT render, not an edge case.
   Same optical weight a logo would carry: uppercase, letter-spaced, and a dark ink
   distinct from both white (headline) and pure black (eyebrow) so the pre-upload band
   still reads as deliberate (SPEC §9 item 23) rather than a placeholder. */
.tbl-cs-cta__logo-name {
	font-family: var(--body-font);
	font-size: 13px;
	font-weight: 405;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--Primary-90);
	white-space: nowrap;
}

/* Button — inherits btn/btn-primary/btn-sm/arrow (theme.css); no hand-rolled transition
   list (var(--button-easing) already applies from the base .btn rule).

   10.1 item 10c: this shipped on the LARGE (LG) button size class with module-level
   custom-property overrides for button padding and button font-size, which rendered
   ~318 x 100 instead of the frame's 218.29 x 44 (10.1-MEASUREMENTS.md M-4, which
   resolves the SPEC-vs-QA-ROUND-2 conflict in favor of 218.29 x 44 — the "~140 x 28"
   estimate was a scale artifact of reading the 0.64x-downscaled figma/insights-cta.png
   export). Those overrides were DEAD CODE: theme.css:23328-23336's selector list
   contains the ID #wp-submit, so CSS Nesting resolves & through :is(), whose
   specificity is that of its most specific branch — the ID. Every nested rule in that
   block, including the nested LARGE-size rule at theme.css:23624, therefore computes
   (1,1,0), which the module's (0,3,0) selector can never outrank — confirmed live by
   10.1-MEASUREMENTS.md M-9 (computed padding 40px 50px / font-size 18px, i.e. the
   LARGE size's own tokens, not this rule's declared 15px/14px). Same root cause 10-09
   traced for the row button (10-QA-FINDINGS.md section 6, Finding 2).

   Fix is to use the size class whose tokens already match the design rather than to
   override a size class whose tokens do not: the SMALL size's padding token is
   15px 20px and its font-size token is 14px (variables.css:442-443), against the
   frame's pl-20 pr-15 py-15 with a 14px label — within 5px on the right edge, and
   10-09 measured the identical SMALL-size treatment on the row button at 44.57px tall
   against the frame's 44. min-width is deliberately NOT re-declared: theme.css:23345's
   min-width: fit-content is also ID-tier and would win anyway, and the natural box at
   the SMALL size's padding already lands within a few px of 218.29. Predicted post-fix
   live box for plan 03 to check: roughly 218-228 x 44-47 at 1600. */

/* ≤900px: no tablet frame exists for this band (D-17/JUDGMENT). Tighten the internal
   rhythm and let the 5-logo row wrap to 2-3 per line. */
@media (max-width: 900px) {
	.tbl-cs-cta__eyebrow {
		margin-bottom: 16px;
	}

	.tbl-cs-cta__headline {
		margin-bottom: 40px;
	}

	.tbl-cs-cta__logos {
		margin: 36px 0;
		gap: 36px 48px;
	}

	/* R3-2c (10.1-MEASUREMENTS.md M-12, live-remeasured post-full-width-fix): at this
	   width the row's own available space (band width minus the padding-inline above)
	   is narrower than the sum of all 5 logos + 4 gaps, so the natural greedy wrap
	   splits 4+1 — one logo stranded alone on its own line. Forcing the 4th item onto
	   a new line instead produces a balanced 3+2 split, both lines centered by this
	   rule's own justify-content: center. This selector's specificity (0,2,0 class +
	   1 pseudo-class) intentionally matches this file's existing convention of scoping
	   overrides through the parent class rather than reaching for a forced-priority
	   declaration. Fixed to the module's shipped 5-logo repeater (frontend.php seeds
	   exactly 5 rows) — if that count ever changes, re-derive this rule against the
	   new count. */
	.tbl-cs-cta__logos .tbl-cs-cta__logo:nth-child(4) {
		flex-basis: 100%;
	}
}

/* 901px–1130px: a range with NO existing breakpoint in this file, added because
   10.1-MEASUREMENTS.md M-12 (live-remeasured, R3-2 full-width fix applied) showed the
   4+1 orphan split persists past the ≤900px tier too — the >900px tier's own base
   89px logo gap (vs. 48px above) needs MORE available width to fit all 5 on one line
   than the band gains back over this same range. Re-derivable arithmetic: sum of the
   5 logos' own widths (~615px) + 4 x 89px gap = ~971px required; the band's own
   measured width in this range is approximately (viewport - 40px) with padding-inline
   equal to 5vw (clamped 24-64px), so available width = band - 2 x padding = 0.9 x
   viewport - 40.5px. Solving 0.9w - 40.5 = 971 gives w ≈ 1124px — confirmed against
   live samples at 901px/1000px (orphan persists) and 1200px/1300px (fits on one line,
   no rule needed). Bounded to 1130px for a small safety margin past that crossover;
   past this width the row already fits on one line unforced (10.1-MEASUREMENTS.md
   M-12 at 1440/1600 confirms no orphan). Same forcing rule as the ≤900px block
   above — kept as a separate block instead of widening max-width:900px because the
   900px tier's own 48px-gap responsive treatment (smaller gap, tighter rhythm) is a
   real, intentional visual difference from this tier's base 89px gap, not something
   to blur together. */
@media (min-width: 901px) and (max-width: 1130px) {
	.tbl-cs-cta__logos .tbl-cs-cta__logo:nth-child(4) {
		flex-basis: 100%;
	}
}

/* ≤600px: no mobile frame exists for this band (D-17/JUDGMENT). The headline
   continues to scale on its own via --h2-font-size's clamp (no override needed here);
   the corner radius is deliberately kept CONSTANT rather than scaled down — 48px does
   not read as visually heavy at this band's likely widths, and shrinking it would be
   an extra unrequested guess stacked on an already-flagged token gap (SPEC §4). */
@media (max-width: 600px) {
	.tbl-cs-cta__inner {
		padding-inline: 24px;
		box-sizing: border-box;
	}

	.tbl-cs-cta__eyebrow {
		margin-bottom: 12px;
	}

	.tbl-cs-cta__headline {
		margin-bottom: 32px;
	}

	.tbl-cs-cta__logos {
		gap: 24px 32px;
		margin-bottom: 20px;
	}

	/* Reset the <=900 anti-orphan rule, which otherwise cascades down here.
	   The block above already states no forcing rule belongs at this width —
	   that intent was documented but never implemented, so the rule leaked in.

	   Measured at 390 on 2026-07-29:
	     rule leaking in  [2,1,2]  logo 4 stranded ALONE in the MIDDLE
	     natural wrap     [2,2,1]  orphan falls at the end, which reads fine
	   Forcing is strictly worse here: at this width no 3-logo combination fits
	   on one line, so the break the rule inserts can only push a logo into
	   isolation mid-stack. */
	.tbl-cs-cta__logos .tbl-cs-cta__logo:nth-child(4) {
		flex-basis: auto;
	}

	/* R3-2c (10.1-MEASUREMENTS.md M-12, live-remeasured post-full-width-fix): NO
	   forcing rule at this breakpoint, deliberately. At this width the row's own
	   available space (~301px after the padding-inline above) is narrower than ANY
	   3-logo combination's width + 2 gaps (the smallest 3-item combo alone needs
	   ~374px), so a 3-lines-max-2-per-line wrap is physically unavoidable regardless
	   of any CSS forcing — 5 items across lines that can hold at most 2 each forces a
	   2+2+1 split no matter which item is pushed where. M-12 measured this split
	   (2 + 2 + 1, each line centered by justify-content: center) as a natural
	   cascading pattern, not the same "stranded on an otherwise-full row" problem the
	   ≤900px and 901-1130px rules above correct — those cases have a real 4-fits/1-left
	   -over choice CSS can rebalance; this one does not. Left as the file's own
	   justify-content: center already handles it. */
	.tbl-cs-cta__logo-img {
		max-width: 120px;
		max-height: 38px;
	}

	/* 10.1 item 10c: the old LARGE-size button min-width:180px override here was dead
	   for the same reason as the desktop rule above — theme.css's min-width: fit-content
	   is ID-tier and always won. Deleted along with the desktop override; a 14px-label
	   pill at the SMALL size's padding is already compact at this width. */
}

/* This module has no entrance animation. Belt-and-suspenders per the phase-wide
   reduced-motion contract (SPEC §7): if a hover transition is ever added to the
   button or the logos, it is neutralized here without touching the base rule. */
@media (prefers-reduced-motion: reduce) {
	.tbl-cs-cta__button.btn {
		transition: none;
	}
}