/* ==========================================================================
   Trimross — progress gallery.

   A horizontal rail of site photography. Scrolls left to right by drag, wheel,
   trackpad swipe, arrow keys or the two buttons; snaps to each frame. Newest
   upload sits first.

   Degrades honestly: with JS off it is still a scrollable overflow list, just
   without the buttons and the drag.
   ========================================================================== */

.gal{position:relative}

.gal__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gut);margin-bottom:clamp(20px,2.4vw,32px)}
.gal__count{font-size:13px;color:var(--ink-45);letter-spacing:.02em;white-space:nowrap}

/* ---------- the rail ------------------------------------------------------
   scroll-padding matches the gutter so a snapped frame doesn't sit flush to
   the screen edge. */
.gal__rail{
  display:flex;align-items:flex-start;gap:clamp(10px,1.1vw,18px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--gut);
  padding:0 var(--gut) 4px;margin:0 calc(var(--gut) * -1);
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.gal__rail::-webkit-scrollbar{display:none}
.gal__rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.gal__rail.is-dragging .gal__fig{pointer-events:none}

/* Small squares. The rail is a browsable strip, not a second hero — it should
   sit under the site plan without competing with it. */
.gal__fig{
  flex:0 0 auto;scroll-snap-align:start;margin:0;position:relative;
  width:clamp(130px,15vw,186px);
  background:var(--paper-2);overflow:hidden;
}
.gal__fig img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  transition:transform .5s var(--ease);
  background:var(--paper-2);
}
.gal__fig:hover img{transform:scale(1.03)}

/* index marker, so a long rail still tells you where you are */
.gal__n{position:absolute;left:0;top:0;z-index:2;
  padding:7px 12px;background:rgba(252,252,250,.92);
  font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--ink-70);
  font-variant-numeric:tabular-nums}

/* ---------- controls ----------------------------------------------------- */
.gal__nav{display:flex;gap:8px}
.gal__btn{
  width:46px;height:46px;display:grid;place-items:center;flex:0 0 auto;
  background:transparent;border:1px solid var(--rule-2);color:var(--ink);
  cursor:pointer;transition:.22s var(--ease);
}
.gal__btn:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gal__btn:disabled{opacity:.3;cursor:default}
.gal__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.gal__btn:focus-visible{outline:2px solid var(--act);outline-offset:2px}

/* ---------- progress ----------------------------------------------------- */
.gal__bar{height:2px;background:var(--rule);margin-top:clamp(18px,2vw,26px);position:relative}
.gal__bar i{position:absolute;left:0;top:0;height:100%;background:var(--ink);
  width:0;transition:width .12s linear}

/* nothing to scroll — no arrows, no progress bar, no grab cursor */
.gal.is-static .gal__nav,
.gal.is-static .gal__bar{display:none}
.gal.is-static .gal__rail{cursor:default}

@media (max-width:760px){
  .gal__head{flex-direction:column;align-items:flex-start;gap:14px}
  .gal__nav{display:none}     /* touch scrolling is the better control here */
  .gal__fig{width:min(38vw,160px)}
  .gal__n{padding:5px 9px;font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .gal__fig:hover img{transform:none}
  .gal__rail{scroll-behavior:auto}
}