/* ==========================================================================
   Case study block — everything is scoped to .tfp-cs, the <article> a case
   study post carries in one Custom HTML block (tools/seed-case-study-*.php).
   Loaded only on posts that contain it: functions/function-case-study.php.

   Tokens per the TFP web design system: 4px radius, no shadows, no gradients,
   yellow never as text on a light ground.

   Typography: the site's current fonts by default; the 2026 rebrand set
   (Work Sans / Archivo) is behind the body class .tfp-rebrand, the same switch
   the header uses (TFP_REBRAND_TYPE, functions/function-header-nav.php).

   The post template puts this in a ~690px column beside the sidebar, so the
   narrow layout is keyed on the block's own width as well as the viewport.
   ========================================================================== */

.tfp-cs {
	--ink: #0B1E32; --steel: #204368;
	--yellow: #FAC410; --yellow-deep: #E0AC00; --blue: #005B97; --blue-deep: #004A7C;
	--n50: #F5F6F7; --n200: #D3D8DE; --n500: #667380; --n600: #47535E; --n700: #2C333A;
	--sans: var(--renoun-global-font-body, "pt-sans", helvetica-neue, helvetica, sans-serif);
	--head: var(--renoun-global-font-header, var(--sans));
	--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	container: tfpcs / inline-size;
	max-width: 920px;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 26px;
	color: var(--n700);
}
.tfp-rebrand .tfp-cs {
	--sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--head: Archivo, "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

.tfp-cs *, .tfp-cs *::before, .tfp-cs *::after { box-sizing: border-box; }
.tfp-cs p { margin: 0 0 16px; font-size: inherit; line-height: inherit; color: var(--n700); }
.tfp-cs p:last-child { margin-bottom: 0; }
.tfp-cs strong { font-weight: 600; color: var(--ink); }
.tfp-cs a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.tfp-cs a:hover { color: var(--blue-deep); }
.tfp-cs h2, .tfp-cs h3, .tfp-cs h4 { text-transform: none; letter-spacing: normal; }
.tfp-cs dl, .tfp-cs dt, .tfp-cs dd { padding: 0; }
.tfp-cs dt, .tfp-cs dd { margin: 0; }
.tfp-cs dl.tfp-cs__meta { margin: 0 0 56px; }
.tfp-cs dl.tfp-cs__chips { margin: 24px 0 0; }

/* --- caption under the featured image the template prints ----------------- */
.tfp-cs p.tfp-cs__caption { font-family: var(--mono); font-size: 13px; line-height: 20px; letter-spacing: .02em; color: var(--n500); margin: 0 0 32px; }

/* --- ink title card ------------------------------------------------------- */
.tfp-cs__card { background: var(--ink); border-radius: 4px 4px 0 0; padding: 40px; color: #fff; }
.tfp-cs p.tfp-cs__eyebrow { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); margin: 0 0 12px; }
.tfp-cs__card h2 { font-family: var(--head); font-weight: 700; font-size: 30px; line-height: 38px; margin: 0 0 12px; color: #fff; }
.tfp-cs__card p.tfp-cs__lead { font-size: 18px; line-height: 30px; color: var(--n200); margin: 0; }

/* --- meta strip ----------------------------------------------------------- */
.tfp-cs__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--n200); border: 1px solid var(--n200); border-top: 0; border-radius: 0 0 4px 4px; overflow: hidden; }
.tfp-cs__meta > div { background: #fff; padding: 20px; }
.tfp-cs__meta dt { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--n500); margin: 0 0 6px; }
.tfp-cs__meta dd { font-family: var(--mono); font-size: 14px; line-height: 22px; letter-spacing: .02em; color: var(--ink); }

/* --- numbered sections ---------------------------------------------------- */
.tfp-cs__section { margin-bottom: 56px; }
.tfp-cs__head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.tfp-cs__num { flex: none; width: 32px; height: 32px; border-radius: 4px; background: var(--blue); color: #fff; font-family: var(--mono); font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; }
.tfp-cs__head h3 { font-family: var(--head); font-weight: 700; font-size: 24px; line-height: 30px; color: var(--ink); margin: 0; }
.tfp-cs__rule { height: 1px; background: var(--n200); margin: 0 0 24px; }

/* --- scope of work -------------------------------------------------------- */
.tfp-cs__scope { background: var(--n50); border-left: 3px solid var(--yellow); border-radius: 0 4px 4px 0; padding: 24px 28px; margin: 24px 0; }
.tfp-cs__scope h4 { font-family: var(--sans); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.tfp-cs__scope p { font-size: 15px; line-height: 25px; margin: 0; }

/* --- spec chips ----------------------------------------------------------- */
.tfp-cs__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tfp-cs__chip { border: 1px solid var(--n200); border-radius: 4px; padding: 18px 20px; }
.tfp-cs__chip dt { font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--n500); margin: 0 0 8px; }
.tfp-cs__chip dd { font-family: var(--mono); font-size: 13px; line-height: 21px; letter-spacing: .02em; color: var(--steel); font-weight: 500; }

/* --- gallery (the anchors carry .glightbox; the lightbox itself is the
       site-wide "Case Study Lightbox" snippet) ------------------------------ */
.tfp-cs__gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 12px; }
.tfp-cs a.tfp-cs__shot { text-decoration: none; }
.tfp-cs__shot { position: relative; display: block; border-radius: 4px; overflow: hidden; grid-column: span 2; line-height: 0; }
.tfp-cs__shot:nth-child(1), .tfp-cs__shot:nth-child(2) { grid-column: span 3; }
.tfp-cs__shot img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; border-radius: 0; }
.tfp-cs__view { position: absolute; right: 8px; bottom: 8px; background: var(--ink); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; }
.tfp-cs__shot:hover .tfp-cs__view, .tfp-cs__shot:focus-visible .tfp-cs__view { background: var(--yellow); color: var(--ink); }
.tfp-cs__shot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tfp-cs p.tfp-cs__hint { font-family: var(--mono); font-size: 13px; line-height: 20px; letter-spacing: .02em; color: var(--n500); margin: 0 0 24px; }

/* --- outcome table -------------------------------------------------------- */
.tfp-cs__table { width: 100%; border-collapse: collapse; border: 1px solid var(--n200); margin: 24px 0 0; font-size: 15px; line-height: 24px; table-layout: auto; }
.tfp-cs__table thead, .tfp-cs__table tbody { border: 0; background: none; }
.tfp-cs__table th { background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 12px 20px; }
.tfp-cs__table td { padding: 16px 20px; border: 0; border-top: 1px solid var(--n200); vertical-align: top; background: #fff; }
.tfp-cs__table tbody tr:nth-child(odd) td { background: var(--n50); }
.tfp-cs__table tbody tr td:first-child { font-weight: 600; color: var(--steel); white-space: nowrap; width: 1%; }

/* --- advantage ------------------------------------------------------------ */
.tfp-cs__advantage { background: var(--n50); border-left: 3px solid var(--blue); border-radius: 0 4px 4px 0; padding: 24px 28px; }
.tfp-cs__advantage p { font-size: 17px; line-height: 28px; margin: 0; }
.tfp-cs p.tfp-cs__more { font-size: 15px; line-height: 25px; color: var(--n600); margin: 32px 0 0; }

/* --- CTA band ------------------------------------------------------------- */
.tfp-cs__cta { background: var(--ink); border-radius: 4px; padding: 40px; margin-top: 56px; }
.tfp-cs__cta h3 { font-family: var(--head); font-weight: 700; font-size: 24px; line-height: 30px; color: #fff; margin: 0 0 8px; }
.tfp-cs__cta p { color: var(--n200); margin: 0 0 24px; max-width: 56ch; }
.tfp-cs a.tfp-cs__btn { display: inline-block; min-height: 44px; background: var(--yellow); color: var(--ink); font-size: 17px; line-height: 24px; font-weight: 600; padding: 14px 28px; border-radius: 4px; text-decoration: none; transition: background-color .15s ease-out; }
.tfp-cs a.tfp-cs__btn:hover { background: var(--yellow-deep); color: var(--ink); }
.tfp-cs a.tfp-cs__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- narrow: by viewport, and by the block's own width -------------------- */
@media (max-width: 768px) {
	.tfp-cs__card, .tfp-cs__cta { padding: 28px 24px; }
	.tfp-cs__card h2 { font-size: 26px; line-height: 32px; }
	.tfp-cs__card p.tfp-cs__lead { font-size: 17px; line-height: 28px; }
	.tfp-cs__meta { grid-template-columns: 1fr 1fr; }
	.tfp-cs__head h3 { font-size: 21px; line-height: 28px; }
	.tfp-cs__chips { grid-template-columns: 1fr; }
	.tfp-cs__gallery { grid-template-columns: 1fr 1fr; }
	.tfp-cs__shot, .tfp-cs__shot:nth-child(1), .tfp-cs__shot:nth-child(2) { grid-column: span 1; }
	.tfp-cs__table tbody tr td:first-child { white-space: normal; width: auto; }
	.tfp-cs__table th, .tfp-cs__table td { padding-left: 14px; padding-right: 14px; }
	.tfp-cs__scope, .tfp-cs__advantage { padding: 20px 22px; }
}
@container tfpcs (max-width: 560px) {
	.tfp-cs__card, .tfp-cs__cta { padding: 28px 24px; }
	.tfp-cs__card h2 { font-size: 26px; line-height: 32px; }
	.tfp-cs__card p.tfp-cs__lead { font-size: 17px; line-height: 28px; }
	.tfp-cs__meta { grid-template-columns: 1fr 1fr; }
	.tfp-cs__head h3 { font-size: 21px; line-height: 28px; }
	.tfp-cs__chips { grid-template-columns: 1fr; }
	.tfp-cs__gallery { grid-template-columns: 1fr 1fr; }
	.tfp-cs__shot, .tfp-cs__shot:nth-child(1), .tfp-cs__shot:nth-child(2) { grid-column: span 1; }
	.tfp-cs__table tbody tr td:first-child { white-space: normal; width: auto; }
	.tfp-cs__table th, .tfp-cs__table td { padding-left: 14px; padding-right: 14px; }
	.tfp-cs__scope, .tfp-cs__advantage { padding: 20px 22px; }
}

@media (prefers-reduced-motion: reduce) { .tfp-cs * { transition: none !important; } }