/* Fixed layout slots; focus changes use live transforms, never layout sizes. */
.gallery-window { --gallery-min-scale: .78; }
.gallery-window .gallery-track { gap: 2cqw; min-height: 42cqw; }
.gallery-window .gallery-card,
.gallery-window .gallery-card.is-active {
  width: 34cqw;
  height: 40cqw;
  max-width: none;
  max-height: none;
  flex: 0 0 auto;
  transform-origin: center;
  transform: translate3d(var(--gallery-focus-shift, 0px), 0, 0) scale(var(--gallery-focus-scale, .78));
  transition: none;
}
.gallery-window .gallery-card img,
.gallery-window .gallery-card:hover img {
  transform: none;
  transition: none;
}
@media (max-width: 600px) {
  .gallery-window .gallery-track { gap: 4cqw; min-height: 114cqw; }
  .gallery-window .gallery-card,
  .gallery-window .gallery-card.is-active { width: 76cqw; height: 108cqw; }
}

/* Arrow-led browsing: one photo per step, a click opens the browse viewer. The photos beside the one in
   focus are at half opacity (infinite-gallery.js sets --gallery-focus-opacity from the same focus curve). */
.gallery-window { cursor: default; overflow-x: hidden; }
.gallery-window .gallery-card { cursor: zoom-in; opacity: var(--gallery-focus-opacity, .5); }
.gallery-window .gallery-card.is-active { opacity: var(--gallery-focus-opacity, 1); }

/* The arrows sit either side of the photo in focus, vertically centred on it. The stage is the same width as the
   gallery window, so its cqw units match the cards' (the focused card is 34cqw wide, 76cqw on phones). */
.gallery-stage { position: relative; container-type: inline-size; }
.gallery-stage .gallery-arrows { position: absolute; inset: 50% 0 auto; height: 0; margin: 0; padding: 0; pointer-events: none; }
.gallery-stage .gallery-arrows .arrow-button { position: absolute; top: 0; transform: translateY(-50%); pointer-events: auto; touch-action: pan-y; }
.gallery-stage .gallery-arrows .arrow-button.previous { right: calc(50% + 17cqw + 16px); }
.gallery-stage .gallery-arrows .arrow-button:not(.previous) { left: calc(50% + 17cqw + 16px); }
.gallery-stage .gallery-arrows .arrow-button:hover { transform: translateY(-50%); }
@media (max-width: 600px) {
  /* On phones the neighbours only peek in; the arrows sit over them at the screen edges. */
  .gallery-stage .gallery-arrows .arrow-button { width: 40px; height: 48px; padding: 6px; }
  .gallery-stage .gallery-arrows .arrow-button .icon { width: 26px; }
  .gallery-stage .gallery-arrows .arrow-button.previous { right: auto; left: 2px; }
  .gallery-stage .gallery-arrows .arrow-button:not(.previous) { left: auto; right: 2px; }
}