/* Case Study Individual Pages — Shared Styles
   Requires: global.css loaded before this file
   Used by: /case-studies/*.html
*/

/* ── HERO ─────────────────────────────────────────────── */
.cs-hero{padding:56px 0 0;background:linear-gradient(180deg,var(--bg-warm) 0%,var(--bg) 100%);border-bottom:1px solid var(--border)}
.cs-hero-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.cs-tag{display:inline-flex;align-items:center;gap:5px;background:var(--bg-alt);border:1px solid var(--border-s);color:var(--orange);font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:99px;white-space:nowrap}
.cs-tag-time{background:rgba(255,248,244,1);color:var(--muted);border-color:var(--border)}
.cs-h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.75rem,3.4vw,2.8rem);font-weight:800;line-height:1.08;letter-spacing:-.025em;color:var(--text);margin-bottom:18px}
.cs-h1 mark{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-color:transparent}
.cs-hero-sub{font-size:.98rem;color:var(--muted);line-height:1.7;max-width:640px;margin-bottom:0}

/* ── RESULTS BAR ──────────────────────────────────────── */
.cs-results-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border-radius:var(--rl) var(--rl) 0 0;overflow:hidden;margin-top:44px}
.csrb-item{background:var(--bg);padding:22px 20px;text-align:center}
.csrb-val{font-family:'Space Grotesk',sans-serif;font-size:1.85rem;font-weight:800;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:4px}
.csrb-lbl{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;line-height:1.4}

/* ── TWO-COLUMN LAYOUT ────────────────────────────────── */
.cs-body-wrap{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start;padding:72px 0 0}
.cs-content{min-width:0}
.cs-sidebar-wrap{position:sticky;top:90px}

/* ── STICKY SIDEBAR ───────────────────────────────────── */
.cs-sidebar{background:var(--surface);border:1px solid var(--border-s);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-md)}
.cs-sidebar-head{background:var(--grad);padding:20px 22px}
.cs-sidebar-head p{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.cs-sidebar-head h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:800;color:#fff;line-height:1.25}
.cs-sidebar-metrics{padding:18px 22px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--border)}
.csm-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.csm-label{font-size:.75rem;color:var(--muted);font-weight:500}
.csm-val{font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:800;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cs-sidebar-cta{padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.cs-sidebar-cta .btn-p{width:100%;justify-content:center;font-size:.88rem;padding:13px 20px}
.cs-sidebar-trust{display:flex;flex-direction:column;gap:6px}
.cst-item{display:flex;align-items:center;gap:7px;font-size:.7rem;color:var(--muted-2)}
.cst-item::before{content:'✓';color:#16a34a;font-weight:700;font-size:.75rem;flex-shrink:0}

/* ── CONTENT SECTIONS ─────────────────────────────────── */
.cs-section{margin-bottom:64px}
.cs-section-tag{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:10px;display:block}
.cs-section h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(1.3rem,2vw,1.75rem);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--text);margin-bottom:14px}
.cs-section h2 mark{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-color:transparent}
.cs-section p{font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:14px}
.cs-section p:last-child{margin-bottom:0}
.cs-divbar{width:36px;height:3px;background:var(--grad);border-radius:2px;margin-bottom:22px}

/* ── BEFORE / AFTER ───────────────────────────────────── */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);border-radius:var(--rl);overflow:hidden;margin-top:28px}
.ba-col{background:var(--surface);padding:24px 20px}
.ba-col-head{font-size:.64rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;padding:5px 10px;border-radius:99px;display:inline-block}
.ba-before .ba-col-head{background:rgba(220,38,38,.07);color:#dc2626;border:1px solid rgba(220,38,38,.18)}
.ba-after .ba-col-head{background:rgba(22,163,74,.07);color:#16a34a;border:1px solid rgba(22,163,74,.18)}
.ba-stat{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.ba-stat:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.ba-stat-val{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:800;line-height:1;margin-bottom:3px}
.ba-before .ba-stat-val{color:var(--text-2)}
.ba-after .ba-stat-val{background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ba-stat-lbl{font-size:.69rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* ── PROBLEMS ─────────────────────────────────────────── */
.problem-list{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.prob-item{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:rgba(220,38,38,.04);border:1px solid rgba(220,38,38,.12);border-left:3px solid #dc2626;border-radius:0 var(--r) var(--r) 0;font-size:.84rem;color:var(--text-2);line-height:1.55}
.prob-item::before{content:'✗';color:#dc2626;font-weight:700;flex-shrink:0;margin-top:1px}

/* ── METHODOLOGY STEPS ────────────────────────────────── */
.method-steps{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.method-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:24px 24px 24px 20px;display:grid;grid-template-columns:52px 1fr;gap:0;transition:border-color var(--t),box-shadow var(--t)}
.method-step:hover{border-color:var(--border-s);box-shadow:var(--shadow)}
.ms-num{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:800;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;opacity:.35;padding-top:4px;text-align:center}
.ms-body{border-left:1px solid var(--border);padding-left:20px}
.ms-body h3{font-family:'Space Grotesk',sans-serif;font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:7px}
.ms-body p{font-size:.82rem;color:var(--muted);line-height:1.65;margin-bottom:0}
.ms-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.ms-pill{font-size:.63rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--bg-alt);border:1px solid var(--border);color:var(--muted-2)}

/* ── RESULTS TABLE ────────────────────────────────────── */
.result-table-wrap{overflow-x:auto;border-radius:var(--rl);border:1px solid var(--border);margin-top:28px}
.result-table{width:100%;border-collapse:collapse;min-width:460px}
.result-table thead th{background:var(--bg-warm);font-family:'Space Grotesk',sans-serif;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:13px 18px;text-align:left;color:var(--muted);border-bottom:1px solid var(--border)}
.result-table thead th:nth-child(3){color:#16a34a}
.result-table td{padding:12px 18px;font-size:.84rem;border-bottom:1px solid var(--border);vertical-align:middle}
.result-table tr:last-child td{border-bottom:none}
.result-table td:first-child{color:var(--text-2);font-weight:500;background:rgba(255,248,244,.5)}
.rt-before{color:var(--muted)}
.rt-after{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--text)}
.rt-delta{font-family:'Space Grotesk',sans-serif;font-size:.8rem;font-weight:700}
.rt-up{color:#16a34a}.rt-neutral{color:var(--muted)}

/* ── CHANNEL / CAMPAIGN BREAKDOWN ─────────────────────── */
.camp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:28px}
.camp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;transition:border-color var(--t),box-shadow var(--t)}
.camp-card:hover{border-color:var(--border-s);box-shadow:var(--shadow)}
.camp-name{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.camp-roas{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;font-weight:800;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:3px}
.camp-roas-lbl{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.camp-stats{display:flex;gap:12px;flex-wrap:wrap}
.camp-stat{font-size:.75rem;color:var(--text-2)}
.camp-stat strong{font-weight:700;color:var(--text)}
.camp-growth{display:inline-flex;align-items:center;gap:4px;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18);color:#16a34a;font-size:.67rem;font-weight:700;padding:3px 8px;border-radius:99px;margin-top:10px}

/* ── INSIGHT BOX ──────────────────────────────────────── */
.insight-box{background:linear-gradient(135deg,rgba(240,165,0,.07),rgba(192,57,43,.05));border:1px solid rgba(232,132,32,.25);border-left:4px solid var(--orange);border-radius:0 var(--rl) var(--rl) 0;padding:24px 28px;margin:32px 0}
.insight-label{font-size:.63rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.insight-box p{font-size:.88rem;color:var(--text-2);line-height:1.7;margin-bottom:0}
.insight-box strong{color:var(--text)}

/* ── IDENTIFICATION BOX ───────────────────────────────── */
.ident-box{background:var(--bg-warm);border:1px solid var(--border);border-radius:var(--rl);padding:32px;margin:32px 0}
.ident-box h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:16px}
.ident-list{display:flex;flex-direction:column;gap:9px}
.ident-item{display:flex;gap:10px;font-size:.84rem;color:var(--text-2);line-height:1.5;align-items:flex-start}
.ident-item::before{content:'→';color:var(--orange);font-weight:700;flex-shrink:0}
.ident-cta{margin-top:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ident-note{font-size:.74rem;color:var(--muted-2)}

/* ── INLINE CTA STRIP ─────────────────────────────────── */
.inline-cta{background:var(--grad);border-radius:var(--rl);padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:48px 0;flex-wrap:wrap}
.inline-cta p{font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:#fff;line-height:1.3;margin:0;max-width:320px}
.inline-cta span{font-size:.78rem;color:rgba(255,255,255,.72);font-family:'Inter',sans-serif;font-weight:400}

/* ── RELATED CASE STUDIES ─────────────────────────────── */
.related-cs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.rcs-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--t),box-shadow var(--t),transform var(--t);text-decoration:none}
.rcs-card:hover{border-color:var(--border-s);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.rcs-badge{font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);background:rgba(232,132,32,.09);border:1px solid rgba(232,132,32,.2);padding:3px 8px;border-radius:99px;display:inline-block}
.rcs-card h3{font-family:'Space Grotesk',sans-serif;font-size:.82rem;font-weight:700;color:var(--text);line-height:1.35;margin:0}
.rcs-result{font-size:.75rem;font-weight:700;background:var(--grad2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media(max-width:1050px){
  .cs-body-wrap{grid-template-columns:1fr;gap:0}
  .cs-sidebar-wrap{position:static;display:none}
  .cs-results-bar{grid-template-columns:repeat(2,1fr)}
  .camp-grid{grid-template-columns:1fr}
  .related-cs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ba-grid{grid-template-columns:1fr}
  .cs-results-bar{grid-template-columns:repeat(2,1fr)}
  .related-cs{grid-template-columns:1fr}
  .inline-cta{flex-direction:column;align-items:flex-start}
  .csrb-val{font-size:1.5rem}
}