/* =========================================================================
   GALERÍA (Miguel, 2026-10-15; js/gallery.js): a Bauhaus band. The photos are cropped by shapes
   that suit them and sit with flat color shapes on one grid, every piece touching the next, so
   the band reads as one connected strip. The band is --rows units tall (two; the two-row B went
   2026-11-02; js/gallery-bands.js); js/gallery.js places each piece in those units and crops it with one of
   the shapes (clip paths in their own box, so a shape fits any piece). It drifts left on its own;
   under the pointer a sideways scroll or a drag moves it. A photo opens out of its shape into its
   rounded rectangle, with an × at its top right (js/gallery-view.js).
   ========================================================================= */
.gallery { position: relative; padding-top: var(--section-pad); }
.gallery__band {
  --band: clamp(300px, 56vh, 560px); --u: calc(var(--band) / var(--rows, 2));
  position: relative; height: var(--band); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;   /* a sideways drag moves the band, an up-down one the page */
}
.gallery__band.is-dragging .gp--p { cursor: grabbing; }
.gallery__track { display: flex; height: 100%; will-change: transform; }
.gb { position: relative; flex: none; width: calc(var(--bw) * var(--u)); height: 100%; }

.gp {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
}
.gp--c { background: var(--c); }
.gp--p { padding: 0; overflow: hidden; background: var(--page-2); cursor: pointer; }
.gp--p picture { display: contents; }   /* the AVIF and its WebP fallback (js/gallery.js); the img is still the piece's child for layout */
.gp--p img {
  display: block; -webkit-user-drag: none; width: 100%; height: 100%; object-fit: cover; object-position: var(--crop);
  scale: var(--z); transform-origin: var(--crop);
  transition: scale 1.2s var(--ease-out), filter .6s var(--ease-out);
}
.gp--p:hover img, .gp--p:focus-visible img { scale: calc(var(--z) * 1.05); }
.gp--p:focus-visible { outline: none; }
.gp--p:focus-visible img { filter: brightness(.6); }   /* the shape clips any outline, so focus darkens the photo and shows the + */

/* The beers' round +: says the photo opens. It shows on hover, inside the shape (--a) */
.gp__plus {
  position: absolute; left: var(--ax, 50%); top: var(--ay, 50%);
  width: var(--s-5); height: var(--s-5); margin: calc(var(--s-5) / -2) 0 0 calc(var(--s-5) / -2);
  border-radius: 50%; background: var(--cream); color: var(--ink);
  opacity: 0; scale: .6; transition: opacity .5s var(--ease-out), scale .7s var(--ease-spring);
}
.gp__plus i::before, .gp__plus i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px;
  background: currentColor; translate: -50% -50%;
}
.gp__plus i::after { rotate: 90deg; }
.gp--p:hover .gp__plus, .gp--p:focus-visible .gp__plus { opacity: 1; scale: 1; }

@media (max-width: 1023px) {
  .gallery__band { --band: clamp(280px, 46vh, 420px); }
  .gp__plus { display: none; }   /* touch: no hover; a tap opens it */
}

/* No motion: the band doesn't drift; it scrolls sideways under your own hand instead */
@media (prefers-reduced-motion: reduce) {
  .gallery__band { overflow-x: auto; }
}
/* The light profile (touch screens, html.lite): the band is the phone's own sideways scroller, which
   scrolls itself slowly (js/gallery.js swipeDrift; 2026-10-19: the desktop's moving layer made the
   phone "worse than ever"), and an open photo fades in at its full size instead of morphing out of
   its shape */
.lite .gallery__band { overflow-x: auto; overscroll-behavior-x: contain; touch-action: auto; scrollbar-width: none; }
.lite .gallery__band::-webkit-scrollbar { display: none; }
.lite .gview__fig { clip-path: inset(0 round var(--r-5)); opacity: 0; scale: .97; transition: opacity .3s var(--ease-out), scale .4s var(--ease-out); }
.lite .gview.is-on .gview__fig { opacity: 1; scale: 1; }

/* ---- The open photo: its box, outline and crop are set every frame by js/gallery-view.js, from
   the piece's shape and place to the whole photo in a rounded rectangle, over a dimmed page ---- */
.gview { position: fixed; inset: 0; z-index: 110; }   /* over the nav too: the page underneath is out of play */
.gview[hidden] { display: none; }
.gview__scrim { position: absolute; inset: 0; background: var(--page); opacity: 0; transition: opacity .6s var(--ease-out); }
.gview.is-on .gview__scrim { opacity: .86; }
.gview__fig { position: fixed; margin: 0; overflow: hidden; clip-path: url(#gs-morph); background: var(--page-2); }
.gview__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gview__x {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: var(--s-5); height: var(--s-5); border-radius: 50%; background: var(--ink); color: var(--cream);
  opacity: 0; scale: .6;
  transition: opacity .3s var(--ease-out), scale .5s var(--ease-spring), background-color var(--t-btn-color) var(--ease-btn), color var(--t-btn-color) var(--ease-btn);
}
.gview.is-open .gview__x { opacity: 1; scale: 1; }
.gview__x i { position: absolute; inset: 0; rotate: 45deg; }
.gview__x i::before, .gview__x i::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px;
  background: currentColor; translate: -50% -50%;
}
.gview__x i::after { rotate: 90deg; }
.gview__x:hover { background: var(--cream); color: var(--ink); }