/* ==========================================================================
   Gallery (vv-r-gallery) — a property's photographs in a masonry grid
   (user, 2026-10-17; design-principles.md §6). Each photograph keeps its
   own ratio, 30 apart, on a 1440 container (user, 2026-10-17), three columns from 1201, two from 810, one below.
   Without the script: CSS columns, which read down each column. With it,
   js/sections/r-gallery.js places each photograph in the shortest column
   (.is-masonry), so the grid reads left to right.
   ========================================================================== */

.vv-band--r-gallery > .vv-band__inner { max-width: var(--vv-container-wide); }

.vv-r-gallery__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 3;
  column-gap: var(--vv-gap-30);
}
.vv-r-gallery__item {
  margin: 0 0 var(--vv-gap-30);
  aspect-ratio: var(--vv-ratio);
  break-inside: avoid;
}
.vv-r-gallery__grid.is-masonry { position: relative; columns: auto; }
.vv-r-gallery__grid.is-masonry > .vv-r-gallery__item { position: absolute; margin: 0; }
.vv-r-gallery__item[hidden] { display: none; }

.vv-r-gallery__open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: zoom-in;
  transition: opacity var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-gallery__open:hover { opacity: .85; }
.vv-r-gallery__open:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }
.vv-r-gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vv-r-gallery__more { display: flex; justify-content: center; margin-top: var(--vv-gap-50); }   /* Load More: a text link, centred (user, 2026-10-17) */
.vv-r-gallery__more[hidden] { display: none; }

@media (max-width: 1200.98px) {
  .vv-r-gallery__grid { columns: 2; }
}
@media (max-width: 809.98px) {
  .vv-r-gallery__grid { columns: 1; }
}

/* --------------------------------------------------------------------------
   The strip (Home; user, 2026-10-17, after aman.com): one row across the
   screen, edge to edge, on the shared rail. Every photograph the same width
   (380 / 320 / 240) at its own height, centred on one middle line, 40 apart
   (20 on a phone). The row starts on the container's left edge and runs off
   the right; it scrolls sideways (drag, swipe, arrows, keys). Centred while
   it fits (auto margins, which never clip the start once it scrolls). The
   text link 50 under it, centred.
   -------------------------------------------------------------------------- */
.vv-band--r-gallery.vv-r-gallery--strip { overflow-x: clip; }   /* the bleed's 100vw never makes the page scroll sideways */
.vv-r-gallery__strip {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}
.vv-r-gallery__track {
  align-items: center;
  gap: var(--vv-gap-40);
  padding-inline: max(var(--vv-gutter), calc((100vw - var(--vv-container)) / 2));
  scroll-padding-inline: max(var(--vv-gutter), calc((100vw - var(--vv-container)) / 2));
}
.vv-r-gallery__slide { width: 380px; }   /* the fourth peeks in at 1440 */
.vv-r-gallery__slide:first-child { margin-inline-start: auto; }
.vv-r-gallery__slide:last-child { margin-inline-end: auto; }
.vv-r-gallery__frame {
  position: relative;
  aspect-ratio: var(--vv-ratio);
}
.vv-r-gallery__action {
  display: flex;
  justify-content: center;
  margin-top: var(--vv-gap-50);
}

@media (max-width: 1200.98px) {
  .vv-r-gallery__slide { width: 320px; }
}
@media (max-width: 809.98px) {
  .vv-r-gallery__slide { width: 240px; }
  .vv-r-gallery__track { gap: var(--vv-gap-20); }
  .vv-r-gallery__strip .vv-rail__arrow { display: none; }   /* the next photograph peeks in: no arrows on a phone (user, 2026-11-11) */
}

/* --------------------------------------------------------------------------
   The viewer: one photograph whole (contain) over the overlay, the close at
   the top right, the rail's arrows either side of "2 of 24" under it.
   -------------------------------------------------------------------------- */
.vv-r-gallery__viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--vv-gap-100);
  border: 0;
  background-color: transparent;
  color: var(--vv-color-text-on-image);
  overflow: hidden;
}
.vv-r-gallery__viewer[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--vv-gap-20);
  place-items: center;
}
.vv-r-gallery__viewer::backdrop { background-color: var(--vv-color-overlay); }
html:has(.vv-r-gallery__viewer[open]) { overflow: hidden; }

.vv-r-gallery__stage {
  position: relative;
  justify-self: stretch;
  align-self: stretch;
  width: 100%;
  max-width: var(--vv-container);
  min-height: 0;
  margin: 0 auto;
  touch-action: pan-y;
}
/* The photograph fills the stage and is fitted inside it whole, so it never
   runs past the stage, whatever its ratio or the screen's. */
.vv-r-gallery__full {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--vv-motion-fade-duration) var(--vv-motion-fade-easing);
}
.vv-r-gallery__full.is-loading { opacity: 0; }

.vv-r-gallery__nav {
  display: flex;
  align-items: center;
  gap: var(--vv-gap-20);
}
.vv-r-gallery__count { margin: 0; color: var(--vv-color-text-on-image); }

.vv-r-gallery__close {
  position: absolute;
  top: var(--vv-gap-20);
  right: var(--vv-gap-20);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--vv-color-text-on-image);
  cursor: pointer;
  transition: opacity var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-gallery__close:hover { opacity: .7; }
.vv-r-gallery__close svg { width: 100%; height: 100%; }
.vv-r-gallery__close:focus-visible { outline: 2px solid var(--vv-color-focus); outline-offset: 2px; }

@media (max-width: 1200.98px) {
  .vv-r-gallery__viewer { padding: var(--vv-gap-100) var(--vv-gap-50) var(--vv-gap-50); }
}
@media (max-width: 809.98px) {
  .vv-r-gallery__viewer { padding: var(--vv-gap-50) var(--vv-gap-10) var(--vv-gap-25); }
}