/* ============================================================
   TEMPLATES — the page skeleton the sections drop into: body
   shell, rail+stage grid, the scroll-snap stage, and the panel
   (hero / detail) scaffold. Concrete pages (home/hello/work/
   experience/contact) are the markup in index.html.
   ============================================================ */
@layer templates {

  /* page shell */
  body { display: flex; flex-direction: column; padding: 14px; gap: 12px; height: 100vh; overflow: hidden; }
  .stage-wrap { flex: 1; display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: 0; }

  /* stage / scroller / panel */
  .stage { position: relative; border: none; border-radius: var(--r-card); background: var(--paper); min-height: 0; overflow: hidden; }
  .scroller { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; scroll-behavior: smooth; }
  .scroller::-webkit-scrollbar { display: none; }
  .panel { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; padding: var(--pad-y) var(--pad-x); display: flex; flex-direction: column; background: var(--paper); }
  /* full-bleed card panels — cards span the full stage width, flush to the border (keeps vertical pad) */
  .panel.flush { padding-inline: 0; }
  .panel.hero { color: #fff; }
  .panel.hero.fg-dark { color: var(--ink); }

  /* ---- phone (template-level) ---- */
  @media (max-width: 640px) {
    body { display: block; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; }

    /* stage fills the space above the fixed bottom chrome */
    .stage-wrap { display: block; grid-template-columns: 1fr; height: 100vh; height: calc(100dvh - 84px - env(safe-area-inset-bottom)); padding: 10px 10px 0; }
    .stage { height: 100%; }
    /* softer snapping on touch — guides without trapping the finger (no-JS fallback) */
    .scroller { scroll-snap-type: y proximity; scroll-padding-bottom: 12px; }
    /* JS swipe-pager owns paging (strict one slide per swipe) — disable native snap
       so the two don't fight; class is added by script.js on init */
    .scroller.js-paged { scroll-snap-type: none; touch-action: pan-y; overscroll-behavior-y: contain; }
    /* let tall panels (e.g. the "What I do" statement) grow to fit content; short hero
       panels still fill the screen via min-height */
    .panel { height: auto; min-height: 100%; }
    /* last panel clears the fixed bottom nav */
    .scroller > .panel:last-child { padding-bottom: 84px; }
    /* panel gutter on phone */
    .panel { --pad-x: 18px; --pad-y: 20px; }
  }
}