/* HireUA Case Study System v4 (v0.3.0).
   Visual source: hireua-case-study-elayne-{dark,yellow,white}.html.
   Layout + type only. Hero colours come from the shared hero styles
   (assets/css/heroes.css: .case-hero--dark|--yellow|--white -> --hero-* vars);
   brand colours from assets/css/tokens.css. No header CSS lives here. */
.hu-tpl-case * {box-sizing:border-box}
.hu-tpl-case a {text-decoration:none}
.hu-tpl-case .cs-wrap {width:min(1180px,calc(100% - 44px));margin:auto}

/* ---------- Hero (one wrapper, three colour styles) ---------- */
.hu-tpl-case .case-hero {padding:48px 0 44px} /* v0.3.38: was 72px 0 58px */
.hu-tpl-case .hero-grid {display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
.hu-tpl-case .hero-grid.no-video {grid-template-columns:1fr;max-width:900px}
.hu-tpl-case .hero-copy {min-width:0}
.hu-tpl-case .hero-kicker {font-size:10px;font-weight:900;letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px;color:var(--hero-kicker)}
.hu-tpl-case .case-hero h1 {font-size:clamp(30px,3vw,42px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0 0 16px;max-width:620px;color:var(--hero-heading);text-wrap:balance} /* v0.3.38: was clamp(52px,5.5vw,78px)/.95 */
.hu-tpl-case .case-hero h1 .hu-accent {display:inline;color:var(--hero-accent)}
.hu-tpl-case .hero-dek {font-size:16px;line-height:1.6;max-width:620px;margin:0 0 18px;color:var(--hero-soft)}
.hu-tpl-case .hero-proof-row {display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hu-tpl-case .hire-pill {display:inline-flex;align-items:center;min-height:29px;padding:0 10px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.08em;background:var(--hero-pill-bg);color:var(--hero-pill-fg)}
.hu-tpl-case .role-line {font-size:11px;line-height:1.5;color:var(--hero-soft)}
.hu-tpl-case .hero-actions {display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px}
.hu-tpl-case .btn-primary,
.hu-tpl-case .btn-dark {display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;padding:0 18px;border-radius:5px;font-size:12px;font-weight:850;line-height:1.2;transition:background-color .16s ease,color .16s ease,transform .16s ease,border-color .16s ease}
.hu-tpl-case .btn-primary:hover,
.hu-tpl-case .btn-dark:hover {transform:translateY(-1px)}
.hu-tpl-case .case-hero .btn-primary {background:var(--hero-cta-bg);color:var(--hero-cta-fg);border:1px solid var(--hero-cta-border)}
.hu-tpl-case .case-hero .btn-primary:hover,
.hu-tpl-case .case-hero .btn-primary:focus-visible,
.hu-tpl-case .case-hero .btn-primary:active {background:var(--hero-cta-hover-bg);border-color:var(--hero-cta-hover-bg);color:var(--hero-cta-hover-fg)}
.hu-tpl-case .text-link {font-size:12px;font-weight:750;color:inherit;transition:color .16s ease}
.hu-tpl-case .case-hero .text-link:hover {color:var(--hero-link-hover)}
.hu-tpl-case .hero-video-shell {position:relative;border-radius:10px;overflow:hidden;box-shadow:0 26px 65px rgba(4,12,30,.28);background:var(--hu-navy-deep)}
.hu-tpl-case .hero-video-shell wistia-player {display:block;width:100%;--wistia-player-color:var(--hu-yellow)}
.hu-tpl-case .hero-video-shell.is-youtube {aspect-ratio:16/9}
.hu-tpl-case .hero-video-shell.is-youtube iframe {position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.hu-tpl-case .hero-video-shell.is-image img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* ---------- Proof strip (2 columns) ---------- */
.hu-tpl-case .proof-strip {background:var(--hu-white);border-bottom:1px solid var(--hu-line)}
.hu-tpl-case .proof-strip-grid {display:grid;grid-template-columns:1fr 1fr}
.hu-tpl-case .proof-strip-grid > :only-child {grid-column:1 / -1}
.hu-tpl-case .proof-stat {padding:30px 28px}
.hu-tpl-case .proof-stat + .proof-stat {border-left:1px solid var(--hu-line)}
.hu-tpl-case .proof-stat b {display:block;color:var(--hu-navy);font-size:31px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.hu-tpl-case .proof-stat span {display:block;margin-top:8px;color:var(--hu-muted);font-size:11px;line-height:1.45}

/* ---------- Body + sidebar ---------- */
.hu-tpl-case .case-main {width:min(980px,calc(100% - 44px));margin:0 auto;padding:70px 0 90px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:54px;align-items:start}
.hu-tpl-case .case-article {min-width:0}
.hu-tpl-case .case-article > :first-child {margin-top:0}

/* Gutenberg body: plain blocks look right even without the starter pattern */
.hu-tpl-case .case-article h2 {font-size:40px;line-height:1.08;letter-spacing:-.04em;font-weight:700;color:var(--hu-navy);margin:64px 0 20px} /* v0.3.38 = blog .article-content h2 */
.hu-tpl-case .case-article h3 {font-size:27px;line-height:1.15;letter-spacing:-.025em;font-weight:700;color:var(--hu-navy);margin:38px 0 14px}
.hu-tpl-case .case-article {font-family:var(--hu-font,Inter,"Inter Fallback",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif)}
.hu-tpl-case .case-article p {font-size:17px;line-height:1.75;color:var(--hu-text-body);margin:0 0 21px}
.hu-tpl-case .case-article li {font-size:16px;line-height:1.65;color:var(--hu-text-body);margin:8px 0}
.hu-tpl-case .case-article ul,
.hu-tpl-case .case-article ol {margin:0 0 22px;padding-left:22px}
/* v0.3.38: dividers = blog (.article-content hr): 1px hairline in --hu-line, 52px above/below */
.hu-tpl-case .case-article hr,
.hu-tpl-case .case-article .wp-block-separator {height:0;border:0;border-top:1px solid var(--hu-line);background:none;opacity:1;color:var(--hu-line);margin:52px 0;width:auto;max-width:none}
.hu-tpl-case .case-article > hr:first-child,
.hu-tpl-case .case-article > .wp-block-separator:first-child {display:none}
.hu-tpl-case .case-article strong {color:var(--hu-navy)}
.hu-tpl-case .case-article a:not(.btn-primary):not(.btn-dark):not(.wp-block-button__link) {color:var(--hu-link);text-decoration:underline;text-underline-offset:2px}
.hu-tpl-case .case-article a:not(.btn-primary):not(.btn-dark):not(.wp-block-button__link):hover {color:var(--hu-link-hover)}
.hu-tpl-case .case-article figure {margin:28px 0}
.hu-tpl-case .case-article img {max-width:100%;height:auto;border-radius:8px}

/* Starter-pattern sections */
.hu-tpl-case .story-section {padding:0 0 48px;margin:0 0 48px;border-bottom:1px solid var(--hu-line)}
.hu-tpl-case .story-section:last-child {border-bottom:0;margin-bottom:0;padding-bottom:0}
.hu-tpl-case .story-section > h2,
.hu-tpl-case .story-section h2 {margin-top:0}
.hu-tpl-case .case-article .section-label {font-size:9px;font-weight:900;letter-spacing:.13em;line-height:1.4;color:var(--hu-blue);text-transform:uppercase;margin:0 0 12px}

/* Pull quote: core/quote with .case-quote (HireUA Pull Quote pattern) + legacy .quote */
.hu-tpl-case .case-article .case-quote,
.hu-tpl-case .case-article .wp-block-quote,
.hu-tpl-case .case-article .quote {margin:0 0 54px;padding:30px;background:var(--hu-navy);color:var(--hu-white);border:0;border-left:5px solid var(--hu-yellow);border-radius:7px}
.hu-tpl-case .case-article .quote,
.hu-tpl-case .case-article .case-quote p,
.hu-tpl-case .case-article .wp-block-quote p {margin:0;font-size:25px;line-height:1.36;font-weight:750;letter-spacing:-.02em;color:var(--hu-white)}
.hu-tpl-case .case-article .case-quote cite,
.hu-tpl-case .case-article .wp-block-quote cite,
.hu-tpl-case .case-article .case-quote footer {display:block;margin-top:14px;color:var(--hu-on-dark);font-size:11px;font-weight:650;font-style:normal}

/* Roles card (+ legacy .roles-box from the v0.2 Elayne body) */
.hu-tpl-case .case-article .roles-card,
.hu-tpl-case .case-article .roles-box {margin:28px 0 0;padding:22px 24px;background:var(--hu-surface);border:1px solid var(--hu-line);border-radius:8px}
.hu-tpl-case .case-article .roles-pill,
.hu-tpl-case .case-article .roles-box .pill {display:inline-flex;align-items:center;min-height:27px;padding:0 9px;border-radius:999px;background:var(--hu-yellow);color:var(--hu-navy);font-size:9px;font-weight:900;letter-spacing:.08em}
.hu-tpl-case .case-article .roles-card p,
.hu-tpl-case .case-article .roles-box p {margin:10px 0 0;font-size:13px;color:var(--hu-muted)}

/* Sticky compact sidebar (desktop) */
.hu-tpl-case .case-sidebar {position:sticky;top:96px;display:grid;gap:14px}
.admin-bar .hu-tpl-case .case-sidebar {top:128px}
.hu-tpl-case .sidebar-card {padding:22px;background:var(--hu-surface);border:1px solid var(--hu-line);border-radius:8px;display:grid;grid-template-columns:1fr;gap:5px}
.hu-tpl-case .sidebar-card span {margin-top:10px;color:var(--hu-muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}
.hu-tpl-case .sidebar-card span:first-child {margin-top:0}
.hu-tpl-case .sidebar-card b {font-size:13px;line-height:1.4;color:var(--hu-navy)}
.hu-tpl-case .sidebar-cta {padding:23px;background:var(--hu-navy);color:var(--hu-white);border-radius:8px}
.hu-tpl-case .eyebrow {font-size:9px;letter-spacing:.13em;font-weight:900;text-transform:uppercase;color:var(--hu-yellow)}
.hu-tpl-case .sidebar-cta h3 {font-size:24px;line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:10px 0 18px;color:var(--hu-white)}
.hu-tpl-case .sidebar-cta .btn-primary {width:100%;background:var(--hu-cta-bg);color:var(--hu-cta-fg);border:1px solid var(--hu-cta-border)}
.hu-tpl-case .sidebar-cta .btn-primary:hover,
.hu-tpl-case .sidebar-cta .btn-primary:focus-visible,
.hu-tpl-case .sidebar-cta .btn-primary:active {background:var(--hu-cta-hover-bg);border-color:var(--hu-cta-hover-bg);color:var(--hu-cta-hover-fg)}

/* ---------- Template-level final CTA ---------- */
.hu-tpl-case .final-cta-wrap {padding:0 0 84px}
.hu-tpl-case .final-cta {padding:38px 40px;background:var(--hu-yellow);color:var(--hu-navy);border-radius:10px;display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.hu-tpl-case .final-cta .eyebrow {color:var(--hu-navy)}
.hu-tpl-case .final-cta h2 {font-size:clamp(38px,4.8vw,60px);line-height:.98;letter-spacing:-.05em;font-weight:800;margin:8px 0 10px;color:var(--hu-navy)}
.hu-tpl-case .final-cta p {margin:0;max-width:680px;font-size:15px;line-height:1.55}
.hu-tpl-case .final-cta .btn-dark {background:var(--hu-btn-dark-bg);color:var(--hu-btn-dark-fg)}
.hu-tpl-case .final-cta .btn-dark:hover,
.hu-tpl-case .final-cta .btn-dark:focus-visible,
.hu-tpl-case .final-cta .btn-dark:active {background:var(--hu-btn-dark-hover-bg)} /* navy -> darker navy, text unchanged */

/* ---------- Mobile: copy above video, 1-col proof, sidebar in flow ---------- */
@media (max-width:900px) {
	.hu-tpl-case .hero-grid {grid-template-columns:1fr;gap:26px}
	.hu-tpl-case .case-hero h1 {max-width:none}
	.hu-tpl-case .case-main {grid-template-columns:1fr;gap:38px}
	.hu-tpl-case .case-sidebar {position:static}
	.hu-tpl-case .proof-strip-grid {grid-template-columns:1fr}
	.hu-tpl-case .proof-stat + .proof-stat {border-left:0;border-top:1px solid var(--hu-line)}
	.hu-tpl-case .final-cta {grid-template-columns:1fr}
}
@media (max-width:600px) {
	.hu-tpl-case .case-hero {padding:32px 0 36px} /* v0.3.38: was 52px 0 44px */
	.hu-tpl-case .case-hero h1 {font-size:clamp(27px,7.4vw,32px);line-height:1.1} /* was clamp(40px,11vw,52px) */
	.hu-tpl-case .final-cta {padding:30px 24px}
	.hu-tpl-case .btn-dark {white-space:normal;text-align:center}
}

/* v0.3.21: "update" callout on the older of two stories about the same client */
.hu-tpl-case .case-article .hu-cs-update-callout {margin:0 0 28px;padding:16px 20px;border-left:4px solid var(--hu-blue,#155EEF);border-radius:0 8px 8px 0;background:#EEF4FF;color:var(--hu-navy,#07152A);font-size:17px;font-weight:650;line-height:1.55}
.hu-tpl-case .case-article .hu-cs-update-callout a {color:var(--hu-blue,#155EEF);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.hu-tpl-case .case-article .hu-cs-update-callout a:hover,.hu-tpl-case .case-article .hu-cs-update-callout a:focus-visible {color:#104BC4}

/* v0.3.38: small screens follow the blog body (guide.css @560px) */
@media (max-width:560px) {
	.hu-tpl-case .case-article h2 {font-size:34px}
	.hu-tpl-case .case-article h3 {font-size:24px}
}

/* v0.3.39: in-body "Start Hiring" CTA that replaced the legacy red/dark core buttons */
.hu-tpl-case .case-article .hu-cs-cta {margin:32px 0}
.hu-tpl-case .case-article .hu-cs-cta .btn-primary {background:var(--hu-cta-bg);color:var(--hu-cta-fg);border:1px solid var(--hu-cta-border);text-decoration:none;font-size:14px;padding:0 24px}
.hu-tpl-case .case-article .hu-cs-cta .btn-primary:hover,
.hu-tpl-case .case-article .hu-cs-cta .btn-primary:focus-visible,
.hu-tpl-case .case-article .hu-cs-cta .btn-primary:active {background:var(--hu-cta-hover-bg);border-color:var(--hu-cta-hover-bg);color:var(--hu-cta-hover-fg)}