/* ════════════════════════════════════════════════════════════════
   case-study.css — shared by the 5 case-study pages.
   Two-column layout (TOC sidebar + content column), reading progress
   bar, top fade, hero + meta grid, overview rows, results, section
   labels/headings, and the "More projects" cards.
   ════════════════════════════════════════════════════════════════ */

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--ink);
  width: 0%;
  z-index: 999;
  transition: width 0.1s linear;
}

/* ── Top fade — content softly fades out under the top edge as it
   scrolls. Fixed over the content column (and the sidebar's divider
   line), stops short of the chat panel while it's open. Hidden at
   the very top of the page (case-study.js adds .is-scrolled). ── */
.viewport-top-fade {
  position: fixed;
  top: 0;
  /* -1px so the sidebar's divider line fades out at the top too */
  left: calc(var(--sidebar-left) + var(--sidebar-width) + var(--divider-gap) - 1px);
  right: 0;
  height: 64px;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 200ms ease, right var(--panel-duration) var(--panel-ease);
}
.viewport-top-fade.is-scrolled { opacity: 1; }
body.chat-open .viewport-top-fade { right: 420px; }
@media (max-width: 900px) {
  .viewport-top-fade { left: 0; height: 48px; }
  body.chat-open .viewport-top-fade { right: 0; }
}

/* ── Layout — persistent left sidebar, identical position/sizing
   to the home page's .sidebar, so it never moves between pages. ── */
.case-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms;
  margin-bottom: 8px;
}
.sidebar-back:hover { color: var(--text-primary); }
.sidebar-divider { margin: 20px 0 20px; }
.toc-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.toc-link {
  font-size: 14px;
  color: var(--stone);
  text-decoration: none;
  transition: color 150ms;
  font-weight: 400;
}
.toc-link.active {
  color: var(--text-primary);
  font-weight: 500;
}
.toc-link:hover { color: var(--text-primary); }

/* ── Content column — text and media both fill the full width
   between a consistent 120px side padding, no narrower cap. ── */
.content-col {
  flex: 1;
  min-width: 0;
  /* Side padding max 100px left / 250px right; it shrinks first on
     narrower screens (same ratio) so the ~936px content column keeps its
     size, down to 48px a side. */
  padding: 60px clamp(48px, calc((100vw - var(--sidebar-total) - 936px) * 0.714), 250px)
           120px clamp(48px, calc((100vw - var(--sidebar-total) - 936px) * 0.286), 100px);
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* Content-col's gap is 100px between every section by default;
   pull Overview up so just this one pair sits 20px apart. */
#overview { margin-top: -80px; }

/* ── Section label ── */
.sec-label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: block;
}
.sec-heading {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.32;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.sec-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.hero-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px 40px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-meta-value {
  font-size: 15.5px;
  color: var(--text-primary);
}

/* ── Overview — label/body rows (Overview, Problem, Business
   Objectives), matching the reference the user provided. ── */
.overview-rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.overview-row {
  display: flex;
  gap: 40px;
}
.overview-row-label {
  flex-shrink: 0;
  width: 220px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.overview-row-body {
  flex: 1;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
}
.overview-row-body strong {
  color: var(--text-primary);
  font-weight: 600;
}
.results-label {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 16px;
  margin-top: 32px;
}
.results-row {
  display: flex;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.result-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.result-number {
  font-size: 22px;
  font-weight: 600;
  color: #16A34A;
}
.result-desc {
  font-size: 13px;
  color: var(--text-secondary);
}
@media (max-width: 1100px) {
  /* ── Responsive ── */
  .content-col { padding: 48px 48px 100px; }
}

@media (max-width: 900px) {
  .case-layout { flex-direction: column; }
  .content-col { padding: 40px 20px 80px; }
  .hero-meta {
    flex-direction: column;
    gap: 16px;
  }
  .overview-row {
    flex-direction: column;
    gap: 8px;
  }
  .overview-row-label { width: auto; }
  .results-row {
    flex-direction: column;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════
   MORE PROJECTS
   Case-study "you might also like" grid, capped at 2 cards per
   page. Figma-verbatim: no radius, no border, no card background —
   the thumb is 5:3 contain-fit so both 1:1 video sources and wider
   screenshots sit un-cropped.
   Markup:
   <div class="ds-more-section">
     <div class="ds-more-title">More projects</div>
     <div class="ds-more-grid">
       <a class="ds-more-card" href="...">
         <div class="ds-more-card-thumb"><img|video .../></div>
         <div class="ds-more-card-body">
           <div class="ds-more-card-meta">Product Designer · 2024</div>
           <div class="ds-more-card-title">...</div>
         </div>
       </a>
       <!-- exactly one more -->
     </div>
   </div>
   ═══════════════════════════════════════ */
.ds-more-section { margin-top: 0; }
.ds-more-title {
  font-family: "Geist Sans", "Inter", sans-serif;
  font-size: 18px; font-weight: 600;
  margin-bottom: 24px; color: #0d0d0d;
}
.ds-more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ds-more-card {
  display: block; text-decoration: none; border-radius: 0; overflow: hidden;
  background: transparent; border: none;
}
.ds-more-card-thumb { aspect-ratio: 5/3; overflow: hidden; background: #f0f0f0; }
.ds-more-card-thumb.thumb-tamara-smart { background: #D2D2FF; }
.ds-more-card-thumb.thumb-contact-rates { background: #F7F7F7; }
.ds-more-card-thumb img, .ds-more-card-thumb video { width: 100%; height: 100%; object-fit: contain; }
/* Tamara Web App thumb: the source image is narrower than the 5:3
   box, so contain-fit letterboxes on the sides — cover-fit fills the
   frame instead (crops top/bottom slightly, no visible background). */
.ds-more-card-thumb.thumb-tamara-webapp img { object-fit: cover; }
.ds-more-card-body { padding: 14px 14px 14px 0; }
.ds-more-card-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; color: #a6a6a6; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 4px;
}
.ds-more-card-title {
  font-family: "Geist Sans", "Inter", sans-serif;
  font-size: 14px; font-weight: 600; color: #0d0d0d;
}
@media (max-width: 900px) {
  .ds-more-grid { grid-template-columns: 1fr; }
}

/* Chat open (desktop): the 420px chat column takes its space from the
   side padding first, so the content only narrows slightly instead of
   shrinking to half. Animates in step with the panel (same --panel-* tokens). */
.content-col { transition: padding var(--panel-duration) var(--panel-ease); }
@media (min-width: 901px) {
  body.chat-open .content-col { padding-left: 60px; padding-right: 60px; }
}

/* ── Solution list (media card left, text bottom-aligned beside it) and
   Reflection (two takeaway columns). Each page sizes its own
   .solution-phone-wrap media card. ── */
.solution-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 24px;
}
.solution-item {
  display: flex;
  gap: 24px;
  align-items: flex-end;
}
.solution-text { flex: 1; }
.solution-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.solution-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.reflection-cols {
  display: flex;
  gap: 40px;
  margin-top: 16px;
}
.reflection-col { flex: 1; }
.reflection-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.reflection-body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .solution-item { flex-direction: column; }
  .reflection-cols { flex-direction: column; }
}

/* ── Media frame — a full-width coloured band (inside the content
   padding) holding a centred video or image. --frame-bg sets the colour. ── */
.media-frame {
  background: var(--frame-bg, #f7f7f7);
  padding: 48px 0;
  margin-top: 24px;
  overflow: hidden;
}
.media-frame > video,
.media-frame > img {
  width: 60%;
  display: block;
  margin: 0 auto;
}
.media-frame--wide { padding: 40px; }
/* No background band: just the centred media. */
.media-frame--plain { --frame-bg: transparent; padding: 0; }
.media-frame--plain > video,
.media-frame--plain > img { width: 100%; }
/* Smaller centred media (60% of the column). */
.media-frame--narrow > video,
.media-frame--narrow > img { width: 60%; }
.media-frame--wide > video,
.media-frame--wide > img { width: 100%; }

/* Mobile: the credit appears only inside the burger menu, not under the
   top bar. */
@media (max-width: 900px) {
  .sidebar-footer .sidebar-credit { display: none; }
  .sidebar-credit--menu { display: block; margin-top: 24px; }
}