/* ── IN-PAGE SECTION NAV (shared across case studies) ──
   Rail in the left margin on wide screens (≥1440px), sticky sub-bar below.
   Markup is auto-generated by section-nav.js from [data-section] elements.
   Pages opt in by tagging sections:
     data-section="Label"   → becomes a nav link
     data-section-dark      → rail adapts colour while overlapping it
   Requires .cs-hero as the reveal trigger and the shared design tokens. */

/* Anchor offsets so jumped-to headings clear the fixed nav (+ sub-bar on narrow screens) */
[data-section] { scroll-margin-top: 96px; }

.section-nav { display: none; }
.section-nav-list { list-style: none; }
.section-nav a { text-decoration: none; }

/* — Sub-bar mode (default, below the rail breakpoint) — */
@media (max-width: 1439.98px) {
  [data-section] { scroll-margin-top: 116px; }
  .section-nav {
    display: block;
    position: fixed;
    top: 60px; left: 0; right: 0;
    z-index: 90;
    background: rgb(var(--text-light-rgb) / var(--alpha-overlay));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mid);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-nav.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .section-nav-list {
    display: flex;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--pad);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .section-nav-list::-webkit-scrollbar { display: none; }
  .section-nav a {
    display: block;
    white-space: nowrap;
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid-text);
    padding: 14px 16px;
    border-bottom: 2px solid transparent;
    transition:
      color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-nav-list li:first-child a { padding-left: 0; }
  .section-nav a:hover { color: var(--text); }
  .section-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
}

/* — Vertical rail mode (wide screens; floats in the left margin, no body shift) — */
@media (min-width: 1440px) {
  .section-nav {
    display: block;
    position: fixed;
    top: 50%;
    left: 32px;
    width: min(220px, calc((100vw - var(--max)) / 2 + 24px));
    transform: translateY(-50%);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-nav.is-visible { opacity: 1; visibility: visible; }
  .section-nav-list { display: flex; flex-direction: column; }
  .section-nav a {
    display: block;
    position: relative;
    font-family: var(--font-d);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--mid-text);
    padding: 10px 0 10px 22px;
    border-left: 1px solid var(--mid);
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-nav a::before {
    content: '';
    position: absolute;
    left: -1px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .section-nav a:hover { color: var(--text); }
  .section-nav a.active { color: var(--accent); }
  .section-nav a.active::before { transform: scaleY(1); }

  /* Color adaptation when the rail overlaps a dark section */
  .section-nav.on-dark a { color: rgb(var(--text-light-rgb) / var(--alpha-muted)); border-left-color: rgb(var(--text-light-rgb) / var(--alpha-faint)); }
  .section-nav.on-dark a:hover { color: var(--text-light); }
  .section-nav.on-dark a.active { color: var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
  .section-nav, .section-nav a, .section-nav a::before { transition: none; }
}