/* ─── Case page (v.2 — Geist, side-menu rail) ─────────────────
   Self-contained: this page does NOT load home.css / case.css.
   Gallery visuals come from the case-media / case-gallery components. */

body.case-page {
  background: var(--background);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--primary);
  line-height: 1.5;
  --secondary: #7f7e7e;
}

/* Smooth in-page anchor scrolling (side-menu), motion-safe only. */
@media (prefers-reduced-motion: no-preference) {
  html:has(body.case-page) {
    scroll-behavior: smooth;
  }
}

.case-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 40px;
}

/* Component text that defaults to Source Serif (which this page no longer
   loads) → inherit Geist. Scoped so other case pages stay on Source Serif. */
body.case-page .case-gallery-footer .case-gallery-caption,
body.case-page .case-gallery-footer .case-gallery-counter,
body.case-page .case-media-scroll-btn,
body.case-page .platform-toggle-tab,
body.case-page .scroll-to-top {
  font-family: inherit;
}

/* ─── Back link ───────────────────────────────── */

.case-back {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s ease;
}

.case-back:hover { color: var(--primary); }
.case-back svg { flex-shrink: 0; }

/* ─── Layout: centered 720 main + sticky left rail ───────────── */

.case-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(720px, 100%) minmax(0, 1fr);
  /* No align-items:start — the rail must stretch to full row height so its
     sticky menu can travel the whole page instead of releasing early. */
}

.case-main {
  grid-column: 2;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;
}

.case-rail {
  grid-column: 1;
  /* Plain block (stretched to full height by the grid) so the sticky menu has
     room to travel; the menu left-aligns with the page padding / back link. */
}

.case-rail .side-menu {
  position: sticky;
  top: 48px;
}

/* The side-menu only fits the left margin on wide desktops. Below that,
   collapse the grid to a single centered column (avoids the grid track
   resolving wider than the viewport on narrow screens). */
@media (max-width: 1239px) {
  .case-grid { display: block; }
  /* Keep the back link (rail stacks above main); drop only the side-menu. */
  .case-rail .side-menu { display: none; }
  /* Side-menu (sticky) is hidden here, so clipping the gallery arrows'
     -16px outset can't affect sticky. Contains horizontal overflow. */
  .case-wrap { overflow-x: clip; }
}

/* ─── Title + meta ────────────────────────────── */

.case-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.56px;
  margin: 0 0 20px;
}

.case-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.case-meta-label {
  flex: 0 0 120px;
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary);
}

.case-meta-value {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--primary);
}

/* ─── Body sections ───────────────────────────── */

.case-body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

.case-section {
  scroll-margin-top: 24px;
}

.case-section > h2 {
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: var(--primary);
  /* Figma: section heading → prose = 12px (→ subsections is bumped to 24px below). */
  margin: 0 0 12px;
}

.case-section-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-section-text p {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* In-text links — grey dashed underline (matches the home page bio-tips:
   a dashed bottom border, not text-decoration) + opacity fade on hover. */
.case-section-text a,
.case-subsection-text a,
.case-defdesc a,
.case-meta-value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--secondary);
  transition: opacity 0.15s ease;
}

.case-section-text a:hover,
.case-subsection-text a:hover,
.case-defdesc a:hover,
.case-meta-value a:hover {
  opacity: 0.7;
}

/* Arrow links (cross-page / external, e.g. "Product Owner ↗"): no underline at
   rest — it fades in smoothly on hover. */
.case-section-text a:has(.case-link-arrow),
.case-subsection-text a:has(.case-link-arrow),
.case-defdesc a:has(.case-link-arrow),
.case-meta-value a:has(.case-link-arrow) {
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, opacity 0.15s ease;
}

.case-section-text a:has(.case-link-arrow):hover,
.case-subsection-text a:has(.case-link-arrow):hover,
.case-defdesc a:has(.case-link-arrow):hover,
.case-meta-value a:has(.case-link-arrow):hover {
  border-bottom-color: var(--secondary);
  opacity: 1;
}

/* ─── NDA-redacted metric (XXX) — hover tooltip ──────────────── */

.nda {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--secondary);
}

/* Bubble */
.nda::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: var(--primary);
  color: var(--background);
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 60;
}

/* Downward arrow (tail) under the bubble, pointing at the metric */
.nda::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 61;
}

.nda:hover::after,
.nda:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Up-right arrow on cross-page links (e.g. "Product Owner ↗"). */
.case-link-arrow {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 1px;
}

/* ─── Projects subsections ────────────────────── */

.case-subsections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* When a section opens with intro prose before its subsections (e.g. AI
   Assistant, Custom Alerts), space the subsections off the intro. */
.case-section-text + .case-subsections {
  margin-top: 24px;
}

/* Figma: a section heading straight into its subsections sits at 24px
   (vs 12px heading → prose). Collapses with the h2's 12px bottom margin. */
.case-section > h2 + .case-subsections {
  margin-top: 24px;
}

.case-subsection {
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-margin-top: 24px;
}

/* Galleries sit a bit further from the prose above them (~20px). */
.case-subsection > .case-gallery,
.case-subsection > .platform-toggle {
  margin-top: 12px;
}

.case-subsection-header {
  display: flex;
  flex-direction: column;
  /* Label → description sits tight (Figma gap-4). */
  gap: 4px;
}

.case-subsection-header h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--primary);
  margin: 0;
}

.case-subsection-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-subsection-text p {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}

/* ─── Findings / Decisions (label + description list) ─────────── */

.case-deflist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-defitem {
  display: flex;
  flex-direction: column;
  /* Term → description sits tight (Figma gap-4). */
  gap: 4px;
}

.case-defterm {
  font-size: 14px;
  line-height: 20px;
  color: var(--secondary);
  margin: 0;
}

.case-defdesc {
  font-size: 14px;
  line-height: 20px;
  color: var(--primary);
  margin: 0;
}

/* ─── Footer ──────────────────────────────────── */

.case-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
}

.case-footer-divider {
  height: 1px;
  background: var(--primary);
  opacity: 0.1;
}

.case-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  line-height: 20px;
  color: var(--secondary);
}

/* ─── Responsive ──────────────────────────────── */

@media (max-width: 768px) {
  .case-wrap {
    padding: 32px 16px 32px;
  }

  .case-back {
    margin-bottom: 20px;
  }

  .case-meta-label {
    flex-basis: 100px;
  }
}