/* =====================================================================
   Case Studies — scroll-driven stacking cards
   File: 16-case-studies.css
   Ported 1:1 from the approved reference mock
   (shuhaib-stacking-case-studies.html) — see CaseStudies.jsx for the
   scroll logic. Colors/fonts mapped to the site's own theme variables
   instead of the reference's fixed hex values, so admin theme changes
   (Site Settings → Theme Colors) still apply here.
   ===================================================================== */

.cs-intro p.cs-intro-text{ color:var(--muted); max-width:46ch; margin-top:20px; font-size:15px; line-height:1.6; }

/* ---------------- stack ---------------- */
.cs-stack-outer{ position:relative; }

.cs-stack-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cs-stack-sticky::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(90% 60% at 50% 0%, color-mix(in srgb, var(--card) 60%, var(--bg)) 0%, var(--bg) 70%);
  pointer-events:none;
}

.cs-index-rail{
  position:absolute;
  right:clamp(18px,4vw,44px);
  bottom:clamp(24px,5vh,44px);
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.05em;
  color:var(--muted);
}
.cs-index-rail b{ color:var(--text); font-weight:500; }
.cs-rail-bar{ width:64px; height:2px; background:var(--line); position:relative; overflow:hidden; border-radius:2px; }
.cs-rail-bar i{ position:absolute; left:0; top:0; bottom:0; width:20%; background:var(--orange); display:block; }

.cs-card{
  position:absolute;
  width:min(1280px,92vw);
  max-width:1280px;
  height:min(430px,72svh);
  border-radius:22px;
  background:var(--card);
  border:1px solid var(--line);
  overflow:hidden;
  will-change:transform, opacity, filter;
}
.cs-card-inner{ display:flex; align-items:stretch; gap:clamp(28px,4vw,56px); height:100%; padding:clamp(18px,2.4vw,28px); }

.cs-media{ flex:0 0 50%; position:relative; border-radius:16px; overflow:hidden; background:var(--bg); }
.cs-media img{ width:100%; height:100%; object-fit:cover; display:block; }

.cs-body{ flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; padding-right:clamp(4px,1vw,10px); }
.cs-meta{ display:flex; align-items:baseline; gap:14px; margin-bottom:16px; }
.cs-no{ font-family:var(--serif); font-style:italic; font-size:26px; color:var(--muted); line-height:1; }
.cs-cat{ font-size:12px; font-weight:600; letter-spacing:.12em; color:var(--orange); text-transform:uppercase; }
.cs-body h3{ font-size:clamp(26px,2.6vw,40px); font-weight:500; line-height:1.08; margin:0 0 14px; max-width:15ch; }
.cs-body p{ font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 24px; max-width:42ch; }

.cs-metrics{ display:flex; gap:clamp(24px,3vw,44px); margin-bottom:26px; }
.cs-metrics div strong{ display:block; font-size:clamp(18px,1.8vw,24px); font-weight:600; color:var(--text); }
.cs-metrics div span{ display:block; font-size:12px; color:var(--muted); margin-top:4px; }

.cs-cta{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; width:fit-content; padding-bottom:6px; border-bottom:1px solid var(--line); transition:border-color .3s; }
.cs-cta svg{ width:15px; height:15px; transition:transform .25s ease; }
.cs-card:hover .cs-cta{ border-color:var(--orange); }
.cs-card:hover .cs-cta svg{ transform:translateX(3px); }

@media(max-width:860px){
  .cs-card{ height:min(560px,84svh); }
  .cs-card-inner{ flex-direction:column; }
  .cs-media{ flex:0 0 42%; }
  .cs-body{ justify-content:flex-start; padding-top:16px; padding-right:0; }
  .cs-body h3{ font-size:clamp(22px,5vw,28px); max-width:20ch; }
  .cs-body p{ font-size:13px; -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
  .cs-metrics{ margin-bottom:16px; }
  .cs-index-rail{ display:none; }
}

@media(prefers-reduced-motion: reduce){
  .cs-card{ transition:none; }
}