/* ============================================================
   EXHIBITIONS — THE IMAGE VIEWER (gallery round, 2026-10-01)

   Loaded on the Exhibitions pair only, after type.css. The page
   is still the approved gallery: same order, frames, captions and
   films. What this adds:

   1. Every frame enlarges. A quiet mark sits on each frame, always
      (phones included, no hover needed), and the whole frame is the
      button. Enlarging is the page's main action.
   2. The viewer: the photograph whole (contain, never cropped), a
      clear close, and - only when a work has more than one frame -
      a counter and previous / next. Frames are grouped only where
      the photographs themselves show the same build (assets/gallery.js
      reads data-work); every other frame opens alone.
   3. Films keep their own control: a text button with the play
      triangle under the caption. The enlarge mark is a corner icon on
      the picture. One is "watch", the other is "look closer".

   The viewer reuses the film sheet's shell (.lb: black, padded,
   full height, the same Close) so the page has one dialog language.
   ============================================================ */

/* ---------- the mark on each frame ---------- */
.page-exh .e-work figure{ position:relative; }
.page-exh .e-work .zoom{
  -webkit-appearance:none; appearance:none; border:0; border-radius:0; background:none;
  position:absolute; inset:0; inline-size:100%; block-size:100%;
  margin:0; padding:0; cursor:zoom-in; color:var(--ivory);
}
.page-exh .e-work .zoom .zm{
  position:absolute; inset-block-end:12px; inset-inline-end:12px;
  inline-size:38px; block-size:38px; display:grid; place-items:center;
  background:rgba(10,10,9,.58); border:1px solid rgba(242,238,228,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.page-exh .e-work .zoom svg{
  inline-size:16px; block-size:16px;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.page-exh .e-work figure img{ transform:scale(1.001); transition:transform 1.1s var(--ease-slow); }
@media (hover:hover) and (pointer:fine){
  .page-exh .e-work .zoom:hover .zm{ border-color:var(--gold); background:rgba(10,10,9,.72); }
  .page-exh .e-work figure:hover img{ transform:scale(1.015); }
}
/* The frame clips anything outside it, so the keyboard ring is drawn inside. */
.page-exh .e-work .zoom:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.page-exh .e-work .zoom:focus-visible .zm{ border-color:var(--gold); }
@media (max-width:767px){
  .page-exh .e-work .zoom .zm{ inline-size:36px; block-size:36px; inset-block-end:10px; inset-inline-end:10px; }
}

/* ---------- Connecting Europe Days: the separate project link ---------- */
.page-exh .build figcaption:has(.full){
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:10px 24px;
}
.page-exh .build figcaption .full{ text-decoration:none; position:relative; }
/* 44px of target around a 27px label, without moving the type */
.page-exh .build figcaption .full::after{
  content:""; position:absolute; inset-inline:-6px; inset-block:-9px;
}
.page-exh .build figcaption .full:hover,
.page-exh .build figcaption .full:focus-visible{ color:var(--gold); border-block-end-color:var(--gold); }
@media (hover:hover) and (pointer:fine){
  .page-exh .build figcaption .full:hover .arr{ transform:translateX(4px); }
  html[dir="rtl"] .page-exh .build figcaption .full:hover .arr{ transform:scaleX(-1) translateX(4px); }
}

/* ---------- the viewer ---------- */
.page-exh .lbi{ z-index:950; overscroll-behavior:contain; }
.page-exh .lbi .lb-x{ right:auto; inset-inline-end:clamp(14px,3vw,28px); }
.page-exh .lbi-stage{
  flex:1 1 auto; min-block-size:0; inline-size:100%; max-inline-size:1600px; margin-inline:auto;
  margin-block-start:clamp(28px,5vh,44px);
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y pinch-zoom;
}
/* contain, never cover: the whole photograph, at its own ratio */
.page-exh .lbi-stage img{
  display:block; max-inline-size:100%; max-block-size:100%;
  inline-size:auto; block-size:auto; object-fit:contain;
  transition:opacity .25s var(--ease);
}
.page-exh .lbi-stage img.is-loading{ opacity:.35; }

.page-exh .lbi-bar{
  flex:none; inline-size:100%; max-inline-size:1600px; margin:16px auto 0;
  display:flex; align-items:center; gap:16px 24px;
}
.page-exh .lbi-cap{
  flex:1 1 auto; margin:0; min-inline-size:0;
  font-family:var(--mono); font-size:var(--t-cap,13px); letter-spacing:.06em; color:var(--ivory);
}
.page-exh .lbi-count{
  flex:none; margin:0;
  font-family:var(--mono); font-size:var(--t-cap,13px); letter-spacing:.06em; color:var(--ivory-dim);
  font-variant-numeric:tabular-nums;
}
html[lang="he"] .page-exh :is(.lbi-cap,.lbi-count){ font-size:var(--t-cap-he,14.5px); }
.page-exh .lbi-nav{ flex:none; display:flex; gap:10px; }
.page-exh .lbi-nav button{
  -webkit-appearance:none; appearance:none; border-radius:0; cursor:pointer;
  inline-size:52px; block-size:48px; display:grid; place-items:center;
  background:none; border:1px solid var(--hair-strong); color:var(--ivory);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.page-exh .lbi-nav svg{
  inline-size:18px; block-size:10px;
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
/* the arrows point the way the reading goes */
html[dir="rtl"] .page-exh .lbi-nav svg{ transform:scaleX(-1); }
.page-exh .lbi-nav button:hover,
.page-exh .lbi-nav button:focus-visible{ border-color:var(--gold); color:var(--gold); }
.page-exh .lbi-nav button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.page-exh .lbi.single .lbi-count,
.page-exh .lbi.single .lbi-nav{ display:none; }

/* Desktop: Close is drawn as a button, in the same hairline box as the arrows,
   so it reads as the way out at a glance rather than as a caption. */
@media (min-width:768px){
  .page-exh .lbi .lb-x{
    border:1px solid var(--hair-strong); padding-inline:18px; min-block-size:48px;
    color:var(--ivory); transition:border-color .3s var(--ease), color .3s var(--ease);
  }
  .page-exh .lbi .lb-x:hover, .page-exh .lbi .lb-x:focus-visible{ border-color:var(--gold); color:var(--gold); }
}

/* Phone: the film sheet's own pattern - Close is the sheet's header, a full
   width 56px row with a hairline under it (site.css) - then the photograph
   centred in the space left, then the caption, counter and arrows. */
@media (max-width:767px){
  .page-exh .lbi-stage{ margin-block-start:0; padding:16px; box-sizing:border-box; }
  /* caption on its own line, counter and the two arrows under it */
  .page-exh .lbi-bar{
    flex-wrap:wrap; justify-content:space-between; margin:0;
    padding:0 clamp(24px,5vw,84px) max(20px, env(safe-area-inset-bottom));
  }
  .page-exh .lbi-cap{ flex-basis:100%; }
  .page-exh .lbi-nav button{ inline-size:56px; block-size:48px; }
}

@media (prefers-reduced-motion:reduce){
  .page-exh .e-work figure img, .page-exh .e-work .zoom .zm, .page-exh .lbi-stage img{ transition:none; }
}