/* ════════════════════════════════════════════════════
   LUMid Case Studies — Stylesheet
   Loaded by /work/index.html and every case-study page.
   Extends insights.css with case-study-specific styles.
   ════════════════════════════════════════════════════ */

/* ─── Case list (index page) ─────────────────── */
.case-list{ padding:48px 0 80px }

.case-row{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:48px; align-items:center;
  padding:48px 0;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  transition:padding .35s var(--ease);
}
@media (max-width:880px){
  .case-row{ grid-template-columns:1fr; gap:24px; padding:36px 0 }
}
.case-row[href]{ cursor:pointer }
.case-row[href]:hover{ padding-left:14px }
.case-row[href]::before{
  content:""; position:absolute; left:-30px; top:48px; bottom:48px; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.case-row[href]:hover::before{ transform:scaleY(1) }

.case-row.featured{
  padding:60px 0;
  border-bottom:1px solid var(--line);
}
.case-row.upcoming{ opacity:.6 }

.case-visual{
  border:1px solid var(--line); border-radius:6px;
  overflow:hidden;
  background:var(--paper-2);
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease);
}
.case-row[href]:hover .case-visual{ transform:scale(1.01) }
.case-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.case-visual.placeholder{
  background:linear-gradient(180deg, var(--paper-2), var(--paper-3));
  border:1px dashed var(--line);
}
.case-visual.placeholder .placeholder-inner{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}

.case-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:18px;
}
.case-meta .cat{
  color:var(--brand); border:1px solid var(--brand);
  padding:4px 10px; border-radius:999px; font-size:10px;
}
.case-meta .date{ color:var(--ink-soft) }

.case-row h2{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(28px, 3.6vw, 42px);
  line-height:1.05; letter-spacing:-0.022em;
  margin:0 0 18px; color:var(--ink); max-width:22ch;
}
.case-row h2 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.case-row p{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(16px, 1.55vw, 18px);
  line-height:1.55; color:var(--ink-soft);
  margin:0 0 22px; max-width:64ch;
}
.case-cta{
  font-family:var(--mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand);
}
.case-cta.muted{ color:var(--mute) }
.case-cta .arrow{ display:inline-block; transition:transform .25s var(--ease) }
.case-row[href]:hover .case-cta .arrow{ transform:translateX(4px) }

/* ════════════════════════════════════════════════════
   CASE STUDY PAGE STYLES
   ════════════════════════════════════════════════════ */

.case-hero{
  padding:170px 0 40px;
}
.case-hero .case-meta{ margin-bottom:28px }
.case-hero h1{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(40px, 6.5vw, 84px);
  line-height:1.02; letter-spacing:-0.028em;
  margin:0 0 28px; color:var(--ink);
  max-width:22ch;
}
.case-hero h1 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
.case-hero .standfirst{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(20px, 2.3vw, 26px);
  line-height:1.45; letter-spacing:-0.01em;
  color:var(--ink-soft); max-width:60ch; margin:0 0 48px;
}

/* Engagement summary block (client / scope / role / timeline) */
.engagement-summary{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-top:40px;
}
@media (max-width:760px){
  .engagement-summary{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:480px){
  .engagement-summary{ grid-template-columns:1fr }
}
.engagement-summary .item{
  background:var(--paper); padding:20px 22px;
}
.engagement-summary .item .label{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:8px;
}
.engagement-summary .item .value{
  font-family:var(--serif); font-weight:400;
  font-size:18px; line-height:1.3; color:var(--ink);
  letter-spacing:-0.01em;
}

/* Hero image (right after summary) */
.case-hero-image{
  margin:60px auto 0;
  max-width:var(--max);
  padding:0 28px;
}
.case-hero-image figure{
  margin:0;
  border-radius:8px; overflow:hidden;
  border:1px solid var(--line);
  background:var(--paper-2);
}
.case-hero-image img{
  width:100%; height:auto; display:block;
}
.case-hero-image figcaption{
  margin-top:14px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em;
  color:var(--mute); text-align:center;
}

/* Case study body — reuses article.post styles from insights.css */
article.case-study{
  padding:60px 0 100px;
}
article.case-study .body{
  max-width:var(--max-prose);
  margin:0 auto;
}
article.case-study .body > *{ margin-left:auto; margin-right:auto }

article.case-study p,
article.case-study ul,
article.case-study ol{
  font-size:18px; line-height:1.7;
  color:var(--ink); margin:0 0 28px;
}
article.case-study p:first-of-type::first-letter{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:4.5em; line-height:0.85;
  float:left; padding:8px 12px 0 0;
  color:var(--brand);
}
article.case-study h2{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(28px, 3.5vw, 40px);
  line-height:1.1; letter-spacing:-0.022em;
  margin:64px 0 24px; color:var(--ink);
}
article.case-study h2 em{
  font-style:italic; color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
article.case-study h3{
  font-family:var(--serif); font-weight:500;
  font-size:24px; line-height:1.2;
  letter-spacing:-0.018em; margin:48px 0 16px;
  color:var(--ink);
}

article.case-study a{
  color:var(--brand);
  border-bottom:1px solid rgba(9,103,132,.4);
  transition:border-color .2s var(--ease);
}
article.case-study a:hover{ border-bottom-color:var(--brand) }

article.case-study ul, article.case-study ol{ padding-left:24px }
article.case-study li{ margin-bottom:8px }

article.case-study strong{ font-weight:600; color:var(--ink) }
article.case-study em{ font-style:italic }

/* Pull quote */
article.case-study blockquote.pull{
  margin:48px 0;
  padding:0 0 0 32px;
  border-left:3px solid var(--brand);
}
article.case-study blockquote.pull p{
  font-family:var(--serif); font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  font-size:clamp(22px, 2.6vw, 32px);
  line-height:1.3; letter-spacing:-0.018em;
  color:var(--ink); margin:0;
}
article.case-study blockquote.pull p em{
  color:var(--brand);
  font-variation-settings:"opsz" 144, "SOFT" 100, "WONK" 1;
}
article.case-study blockquote.pull cite{
  display:block; margin-top:16px;
  font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; color:var(--mute);
  font-style:normal;
}

/* Inline callouts and image figures from insights.css apply here too */
article.case-study .callout{
  margin:36px 0; padding:24px 28px;
  border:1px solid var(--line); border-left:3px solid var(--brand);
  background:rgba(9,103,132,.04);
  border-radius:0 4px 4px 0;
}
article.case-study .callout .callout-label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand); margin-bottom:8px;
}
article.case-study .callout p:last-child{ margin-bottom:0 }
article.case-study .callout p:first-of-type::first-letter{
  font-family:inherit; font-size:inherit; line-height:inherit;
  float:none; padding:0; color:inherit; font-weight:inherit;
}

article.case-study figure{
  margin:48px auto;
  width:calc(100% + 80px);
  margin-left:-40px;
  margin-right:-40px;
}
@media (max-width:800px){
  article.case-study figure{ width:100%; margin-left:0; margin-right:0 }
}
article.case-study figure img{
  border-radius:6px; border:1px solid var(--line);
  width:100%; height:auto;
}
article.case-study figcaption{
  margin-top:14px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.06em;
  color:var(--mute); text-align:center;
}

/* Deliverables list */
article.case-study .deliverables{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px 32px;
  margin:32px 0;
  padding:0;
  list-style:none;
}
@media (max-width:600px){
  article.case-study .deliverables{ grid-template-columns:1fr }
}
article.case-study .deliverables li{
  padding-left:28px; position:relative;
  margin:0; font-size:16px;
}
article.case-study .deliverables li::before{
  content:""; position:absolute; left:0; top:11px;
  width:14px; height:1px; background:var(--brand);
}

/* Horizontal section break */
article.case-study hr{
  border:none; height:1px;
  background:var(--line);
  margin:48px auto;
  max-width:80px;
}

/* Case footer */
.case-footer{
  border-top:1px solid var(--line-soft);
  padding:48px 0; margin-top:0;
}
.case-footer-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:start;
}
@media (max-width:760px){
  .case-footer-inner{ grid-template-columns:1fr; gap:32px }
}
.case-footer .label{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); margin-bottom:12px;
}
.case-footer a.next-link{
  font-family:var(--serif); font-size:22px;
  line-height:1.2; color:var(--ink);
  border-bottom:1px solid var(--brand);
  padding-bottom:4px;
}
.case-footer a:hover{ color:var(--brand) }