/* ============================================================
   GALLERY — home photo strip + fullscreen viewer
   char! Store | assets/css/gallery.css
   ------------------------------------------------------------
   There is no /gallery page any more. The strip on the home page
   is the way in; tapping a photo opens the viewer, and the
   viewer's "View full gallery" button reveals the whole grid
   inside it. Captions are gone everywhere by request.
   ============================================================ */

/* ---- Home strip (between the process band and the bespoke band) -----
   Desktop: two photos, the band cropped to their height. Phones: one
   photo, edge to edge, filling the band. carousel-loop.js clones the
   strip both ways so it scrolls forever in either direction. */
.gal-band { background:#000; padding:56px 0; position:relative; z-index:5; }
.gal-band[hidden] { display:none; }
.gal-car { position:relative; max-width:1320px; margin:0 auto; padding:0 56px; }

.gal-track { position:relative; display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.gal-track::-webkit-scrollbar { display:none; }
.gal-slide { flex:0 0 calc((100% - 16px) / 2); scroll-snap-align:start;
  position:relative; margin:0; overflow:hidden; border-radius:4px; cursor:pointer; }
.gal-slide img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .6s ease; }
@media (hover:hover) and (pointer:fine) { .gal-slide:hover img { transform:scale(1.04); } }

@media (max-width:760px) {
  /* Same treatment as desktop — band padding, side gutters, rounded corners,
     4:3 crop — just one photo at a time instead of two. The surround is kept
     tight on phones: the sections above and below are black too, so generous
     padding here doesn't read as a frame around the photo, it just reads as
     the photo being small. */
  .gal-band { padding:24px 0; }
  .gal-car  { padding:0 12px; }
  .gal-slide { flex-basis:100%; }
}

/* ---- Viewer ----------------------------------------------------------
   Body-level markup (snippets/gallery-lightbox.html) so this z-index sits
   above the fixed header, which is hidden outright while open. */
.gal-lb { position:fixed; inset:0; z-index:400; background:rgba(5,5,5,0.96);
  display:flex; align-items:center; justify-content:center;
  padding:calc(64px + env(safe-area-inset-top, 0px)) 16px calc(28px + env(safe-area-inset-bottom, 0px)); }
.gal-lb[hidden] { display:none; }
body.lb-open header.bar { opacity:0; pointer-events:none; }
.gal-lb-x { position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:16px; z-index:6;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:#fff; font-size:36px; line-height:1; cursor:pointer;
  opacity:0.8; transition:opacity .18s; }
.gal-lb-x:hover { opacity:1; }

/* single-photo state: photo, filmstrip, button */
.gal-lb-single { display:flex; flex-direction:column; align-items:center; gap:18px;
  max-width:min(1100px, 94vw); width:100%; }
.gal-lb-single[hidden] { display:none; }
#gal-lb-img { max-width:100%; max-height:58vh; object-fit:contain; display:block; border-radius:4px; }

/* filmstrip under the photo, iPhone Photos style */
.gal-lb-strip { display:flex; gap:8px; overflow-x:auto; max-width:100%;
  padding:2px 2px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.gal-lb-strip::-webkit-scrollbar { display:none; }
.gal-lb-strip button { flex:0 0 auto; padding:0; border:0; background:none; cursor:pointer;
  width:58px; height:58px; border-radius:4px; overflow:hidden; opacity:0.5;
  outline:1px solid transparent; transition:opacity .18s, outline-color .18s; }
.gal-lb-strip button img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-lb-strip button.on { opacity:1; outline-color:rgba(255,255,255,0.85); }

.gal-lb-all { background:none; border:1px solid rgba(255,255,255,0.35); color:#fff;
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  padding:11px 22px; border-radius:3px; cursor:pointer; transition:border-color .18s, background .18s; }
.gal-lb-all:hover { border-color:#fff; background:rgba(255,255,255,0.08); }

/* grid state: every photo, scrolls inside the viewer */
.gal-lb-grid-wrap { width:min(1320px, 94vw); max-height:100%; overflow-y:auto;
  -webkit-overflow-scrolling:touch; }
.gal-lb-grid-wrap[hidden] { display:none; }
.gal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gal-cell { padding:0; border:0; background:none; cursor:pointer; display:block; }
.gal-cell img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:3px;
  transition:transform .5s ease; }
@media (hover:hover) and (pointer:fine) { .gal-cell:hover img { transform:scale(1.04); } }
@media (max-width:900px) { .gal-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

@media (max-width:760px) {
  .gal-lb-single { gap:14px; }
  #gal-lb-img { max-height:52vh; }
  .gal-lb-strip button { width:48px; height:48px; }
}