/* ============================================================================
   GALLERY — page-specific styles (loaded AFTER menu.css).
   Images reuse the engine's .print-photo mechanism (transparent placeholder ->
   the shader prints the data-src image into the paper). We only lay out tiles.
   The WebGL canvas is an OPAQUE sheet at z-index:4, so anything that must be
   visible ABOVE the paper (arrows, fade overlays) gets z-index >= 5.
   ============================================================================ */

:root{
  /* Gap tracks viewport HEIGHT (not width) — the cluster is height-bound, so there's always side
     room; a vw-based gap shrank too early when narrowing. ~64px at a 900px-tall window (8pt grid). */
  --gal-gap:clamp(48px, 7.1vh, 72px);        /* EQUAL H+V padding between tiles */
  --gal-arrow-gap:clamp(52px, 8.5vh, 104px); /* cluster <-> arrow spacing (also height-based; pushed further out from the cluster) */
  /* Tiles are HEIGHT-bound so the whole 3x2 cluster always fits below the nav (no
     scroll); min() also caps by width so it never overflows a wide/short window.
     (280px ~= both arrows + both of the larger arrow gaps, so the cap still holds.) */
  --gal-tileH:min( calc((74vh - var(--gal-gap)) / 2),
                   calc(((90vw - 2*var(--gal-gap) - 280px) / 3) * 1.4) );   /* 5:7 -> h = w*1.4 (was 2:3 / 1.5) */
}

.gal-mobile{ display:none; }
.galv2{ display:none; }        /* V2 film-strip: web while body.v2, mobile while body.galv2-m (rules below) — never by default */

/* menu.css floats the topbar for body.v1 (a landing/reservations convention) — the gallery's
   layout counts on the IN-FLOW nav in both versions, and the mobile page must render exactly as
   before the toggle existed, so restore the default here (static = the initial value = a no-op
   everywhere the old page already rendered). */
.gallery-page.v1 .topbar{ position:static; }

/* flanking arrows — IDENTICAL to the nav back-arrow: the engine paints them as ink (same texture),
   so the DOM SVG is the invisible, clickable hit-target above the paper canvas. Only difference is a
   slightly shorter leading line (handled in the renderer). Same 26px size as the nav arrow. */
.gal-arrow{ appearance:none; -webkit-appearance:none; background:none; border:0;
            padding:calc(14px * var(--scale)); margin:0; cursor:pointer;
            position:relative; z-index:5; display:flex; align-items:center;
            line-height:0; -webkit-tap-highlight-color:transparent; transition:opacity .18s ease-out; }
.gal-arrow svg{ display:block; width:26px; height:auto; }
.gal-arrow .gal-arw-shaft{ fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.gal-arrow .gal-arw-head{ fill:var(--ink); stroke:none; }
/* once the ink renderer is up it paints the arrow — hide the crisp DOM strokes (like the nav arrow) */
html.ink-ready .gal-arw-shaft{ stroke:transparent; }
html.ink-ready .gal-arw-head{ fill:transparent; }
.gal-arrow:disabled{ cursor:default; }
@media (hover:hover){ .gal-arrow:hover{ opacity:.62; } }

/* transient cross-fade overlays (one per tile) sit ABOVE the paper canvas */
.gal-fade{ position:absolute; z-index:6; pointer-events:none; opacity:0;
           transition:opacity .17s ease-out; will-change:opacity; }

/* ============================================================================
   DESKTOP (>760px): one screen, NO scroll, NO header. Cluster centred; nav floats.
   ============================================================================ */
@media (min-width:761px){
  /* one screen, no scroll; body is a column so the (static, in-flow) nav takes its space at
     the top -> breathing room above -> and .gallery fills the rest with the cluster centred. */
  .gallery-page{ height:100vh; overflow:hidden; display:flex; flex-direction:column; }
  /* pad the bottom by the nav's height so the cluster is optically centred in the FULL viewport,
     minus 48px so it sits ~24px BELOW centre (flex centring shifts by half the padding change). */
  .gallery{ flex:1 1 auto; min-height:0; box-sizing:border-box;
            padding:0 0 calc(32px + var(--fs-nav) * var(--lh) - 48px);
            display:flex; align-items:center; justify-content:center; }

  .gal-head{ display:none; }                    /* no header on web */

  .gal-desktop{ display:flex; align-items:center; justify-content:center; gap:var(--gal-arrow-gap); }
  .gal-grid{ display:grid; grid-template-columns:repeat(3, auto); grid-auto-rows:var(--gal-tileH);
             gap:var(--gal-gap); justify-content:center; }
  .gal-grid .print-photo{ height:var(--gal-tileH); width:auto; aspect-ratio:5 / 7; }   /* 5x7 portrait print — a touch wider than 2:3; override menu.css 1/1 */

  /* ── V2: film-strip — one LONG horizontal row of 24 prints, drag/scroll driven (no arrows), the
     3rd visible print always enlarged. Prints are HARD-CLIPPED at the page edges (the viewport's
     overflow), exactly like the mobile strip — no edge fade. Minimal, mostly paper. Fills the same
     no-scroll viewport as V1 (.gallery-page is height:100vh overflow:hidden; .galv2 stretches
     inside .gallery's flex box).
     TILE BUDGET: the renderer paints at most 16 tiles — computeLayout skips .galv2-strip tiles
     fully outside the viewport (+120px margin), and the max(..vh, ..vw) size floor below caps how
     many can ever fit across ANY window aspect, so the 24-tile strip is safe. ── */
  body.v2 .gal-desktop{ display:none; }                       /* V1 cluster + its arrows gone (renderer skips hidden) */
  body.v2 .galv2{ display:flex; flex-direction:column; flex:1 1 100%; align-self:stretch; min-width:0; }

  /* the viewport is a JS-OWNED scroller: overflow hidden (programmatic scrollLeft still works),
     so no native wheel/momentum can ever co-scroll the forced stop-to-stop glide */
  .galv2-viewport{ flex:1 1 auto; min-height:0; width:100%;
                   overflow-x:hidden; overflow-y:hidden;
                   display:flex; align-items:center; cursor:grab; }
  .galv2-viewport.is-drag{ cursor:grabbing; }
  .galv2-strip{ display:flex; align-items:center; gap:clamp(16px, 1.8vw, 26px);
                width:max-content; padding:0 2vw; }           /* the row runs to ~2vw of the page edges */
  /* size floor (9.6vw / 15.7vw = same 22:36 ratio) so a very wide+short window can't fit more
     tiles across than the renderer's 16-tile budget; on normal aspect ratios the vh term wins.
     NO transition: the page script interpolates the size per frame from the scroll position —
     a transition would lag those writes. */
  .galv2 .print-photo{ flex:0 0 auto; height:max(34vh, 14.7vw); aspect-ratio:5 / 7; width:auto; }
  /* the ENLARGED size — a MEASURING STICK for the script (applied momentarily at measure time,
     never left on). SIZE only, never a transform (the ink renderer reads layout boxes). */
  .galv2 .print-photo.is-big{ height:max(52vh, 22.6vw); }
}

/* ============================================================================
   MOBILE (<=760px): single column, ~15 tiles, MIXED real photo ratios,
   plain native scroll — no arrows, no swap. (Kept as-is.)
   ============================================================================ */
@media (max-width:760px){
  .gal-desktop{ display:none; }                 /* drop the cluster + arrows */
  /* full-bleed tiles need the container edge-to-edge -> 0 horizontal padding */
  .gallery{ box-sizing:border-box; padding:8px 0; }        /* 8px top/bottom — matches the 8px H insets */

  /* tiny header — a serif (NOT the Avenir of the menu titles), not the big grid header */
  .gal-head{ margin:0 0 8px; text-align:center;
             font-family:'Cormorant Garamond',Garamond,serif; font-style:italic; font-weight:500;
             font-size:clamp(13px, 3.6vw, 16px); letter-spacing:.08em; text-indent:.08em; }

  /* moodboard column matching the reference. --gm-gap = the (lowered) vertical rhythm.
     The portrait/spacer cluster is symmetric (extent 13%..87% at --gm-k:1) and every alignment
     is relative, so ONE scale factor --gm-k shrinks the cluster about its centre (50%) while
     keeping ALL relationships: paddings = 50% - 37%*k grow as k shrinks; widths scale by k.
     LEFT portrait right edge = --gm-ml + --gm-wl; SPACER + RIGHT portrait right-aligned via
     --gm-mr; --gm-ws sized so the spacer's CENTRE lands on the left portrait's right edge. */
  .gal-mobile{ --gm-k:0.85;
               --gm-ml:calc(50% - 37% * var(--gm-k)); --gm-mr:calc(50% - 37% * var(--gm-k));
               /* imgs 2 & 4 SAME width (54%); spacer = 2*(74% - 54%) keeps its centre on img2's right edge */
               --gm-wl:calc(54% * var(--gm-k)); --gm-ws:calc(40% * var(--gm-k)); --gm-wr:calc(54% * var(--gm-k));
               display:flex; flex-direction:column; width:100%; gap:8px; }   /* 8px vertical between every tile */

  .gal-mobile .gm-full  { width:calc(100% - 16px); margin-inline:auto; }                 /* full-bleed w/ 8px inset each side */

  /* group 1 (kept): left portrait, edge-spacer, right portrait */
  .gal-mobile .gm-left  { width:var(--gm-wl); margin-left:var(--gm-ml);  margin-right:auto; }  /* hug left */
  .gal-mobile .gm-spacer{ width:var(--gm-ws); margin-right:var(--gm-mr); margin-left:auto; }    /* right-aligned, centre on left portrait's right edge */
  .gal-mobile .gm-right { width:var(--gm-wr); margin-right:var(--gm-mr); margin-left:auto; }    /* right edge aligned with the spacer */

  /* group 2: split pair (share a vertical line at 52%, equal 12% outer pad) + centred landscape */
  .gal-mobile .gm-g2a { width:40%; margin-left:12%;  margin-right:auto; }   /* portrait left  -> right edge 52% */
  .gal-mobile .gm-g2b { width:36%; margin-left:52%;  margin-right:auto; }   /* left edge 52% (=g2a right), right edge 88% */
  .gal-mobile .gm-g2c { width:66%; margin-inline:auto; }                    /* centred landscape (centre 50% = pair centre) */

  /* group 3: left landscape + adjacent portrait (share a line at 60%) + centred portrait + right-aligned wide */
  .gal-mobile .gm-g3a { width:48%; margin-left:12%;  margin-right:auto; }   /* landscape left -> right edge 60% */
  .gal-mobile .gm-g3b { width:28%; margin-left:60%;  margin-right:auto; }   /* left edge 60% (=g3a right), right edge 88% */
  .gal-mobile .gm-g3c { width:46%; margin-inline:auto; }                    /* centred portrait */
  .gal-mobile .gm-g3d { width:68%; margin-right:12%; margin-left:auto; }    /* right edge 88% (=g3b right), left edge 20% */

  /* the V1/V2 pill is visible ON THE GALLERY on phones too — both layouts are built for mobile
     (the moodboard and the side-swipe strip) and the switch belongs where they live. Every other
     page keeps the global mobile rule that hides .ver-toggle. */
  body.gallery-page .ver-toggle{ display:inline-flex; }

  /* ── V2 strip on MOBILE — while body.galv2-m (set by the pill, or restored from gal-ver). EVERY rule here is
     scoped under body.galv2-m, so without the stored v2 the moodboard above renders exactly as
     before. Exactly ~3 tiles visible: the CENTRE one enlarged (.is-big, set per frame by the
     page script), the side two cut off by the screen edges. Native touch scroll; NO edge fade
     (__inkFadeBand stays null on mobile). ── */
  body.galv2-m{ height:var(--loadvh, 100svh); overflow:hidden;       /* one screen, like web V2 — frozen at-load height (svh breathes with the bars in Chrome/DDG) */
                display:flex; flex-direction:column; }
  body.galv2-m .gal-mobile{ display:none; }                         /* moodboard swapped out, not removed */
  body.galv2-m .gal-head{ display:none; }                           /* strip view is header-less, like web V2 */
  body.galv2-m .gallery{ flex:1 1 auto; min-height:0; padding:0; display:flex; align-items:center; }
  body.galv2-m .galv2{ display:flex; width:100%; min-width:0; }
  /* JS-owned scroller: overflow hidden (programmatic scrollLeft still works) + touch-action:none —
     the page script tracks the finger 1:1 and, on release, GLIDES exactly one stop, landing with
     the enlarged print dead-centred. CSS snap is gone: the stop-based glide replaced it. */
  body.galv2-m .galv2-viewport{ width:100%; overflow-x:hidden; overflow-y:hidden;
                                touch-action:none;
                                display:flex; align-items:center; }
  /* end padding = 50vw - half a small print: the FIRST and LAST prints can reach the exact
     centre, so every stop — ends included — is a real, reachable resting point. */
  body.galv2-m .galv2-strip{ display:flex; align-items:center; gap:3vw;
                             width:max-content; padding:0 calc(50vw - 19vw); }
  /* ~2.7 tiles span the width: big 52vw + two 38vw sides + gaps = 134vw, so the side tiles are
     visibly cut by the edges. Width-driven (height:auto via the 5:7 ratio). Sizing is CONTINUOUS
     and scroll-driven: the page script interpolates each print's inline width every frame — the
     incoming print grows while the outgoing shrinks, in lockstep with the finger and through the
     one-stop glide after release. NO transition (it would lag the per-frame writes); never a
     transform. */
  body.galv2-m .galv2 .print-photo{ flex:0 0 auto; width:38vw; height:auto; aspect-ratio:5 / 7; }
  /* the ENLARGED size — a MEASURING STICK for the script (applied momentarily at measure time) */
  body.galv2-m .galv2 .print-photo.is-big{ width:52vw; }

  .gal-mobile .gm-2x1  { aspect-ratio:2 / 1; }
  .gal-mobile .gm-16x10{ aspect-ratio:16 / 10; }
  .gal-mobile .gm-16x9 { aspect-ratio:16 / 9; }
  .gal-mobile .gm-3x2  { aspect-ratio:3 / 2; }
  .gal-mobile .gm-5x4  { aspect-ratio:5 / 4; }
  .gal-mobile .gm-2x3  { aspect-ratio:2 / 3; }
  .gal-mobile .gm-5x7  { aspect-ratio:5 / 7; }
  .gal-mobile .gm-3x4  { aspect-ratio:3 / 4; }
  .gal-mobile .gm-4x5  { aspect-ratio:4 / 5; }
}