/* Photo gallery of an apartment or a building (templates/web/partials/_photo_gallery.html, js/gallery.js).
   Phone: one photo per screen, swipe through all of them, "1 / N" in the corner.
   768px and up: the first five as a mosaic (one large, four small) with "Show all N photos".
   Viewer: full screen on an opaque black ground, every photo, arrows, swipe, keys, thumbnails. */

.pg { position: relative; background: var(--lg-fill-ink, #111); }
.pg-track {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pg-track::-webkit-scrollbar { display: none; }
.pg-slide {
  position: relative; flex: 0 0 100%; margin: 0;
  aspect-ratio: 4 / 3; max-height: 72vh; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
  background: var(--lg-fill-ink, #111);
}
.pg-slide img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.pg-open {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0 !important; padding: 0; border: 0; background: transparent; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.pg-open:focus-visible { outline: 3px solid var(--lg-focus-ring, #fff); outline-offset: -3px; }

/* The corner buttons sit on the photo: solid dark pills, never see-through glass. */
.pg-count, .pg-all {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  margin: 0 !important; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 13px/1 var(--lg-font, system-ui, sans-serif); letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
}
.pg-count { right: 12px; bottom: 12px; min-height: 36px; padding: 0 14px; background: rgba(10, 12, 18, .78); color: #fff; }
.pg-all { display: none; right: 20px; bottom: 20px; min-height: 40px; padding: 0 16px; background: #fff; color: #10131a; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.pg-all:hover { background: #f1f2f5; }
.pg-count:focus-visible, .pg-all:focus-visible { outline: 3px solid var(--lg-focus-ring, #fff); outline-offset: 2px; }

@media (min-width: 768px) {
  .pg { background: transparent; }
  .pg-track {
    display: grid; overflow: visible; gap: 4px; scroll-snap-type: none;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
    height: clamp(320px, 52vh, 620px);
  }
  .pg-slide { aspect-ratio: auto; max-height: none; }
  .pg-slide:first-child { grid-column: span 2; grid-row: span 2; }
  .pg-slide:nth-child(n + 6) { display: none; }
  .pg--1 .pg-track { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .pg--1 .pg-slide:first-child, .pg--2 .pg-slide:first-child { grid-column: auto; grid-row: auto; }
  .pg--2 .pg-track { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .pg--3 .pg-slide:not(:first-child) { grid-column: span 2; }
  .pg--4 .pg-slide:nth-child(2) { grid-column: span 2; }
  .pg-slide img { transition: transform .5s cubic-bezier(.3, .8, .3, 1), filter .3s; }
  .pg-slide:hover img { transform: scale(1.025); filter: brightness(.92); }
  .pg-count { display: none; }
  .pg-all { display: inline-flex; }
}

/* ── Viewer ── */
html.pg-lock, html.pg-lock body { overflow: hidden; }
.pgv {
  position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #07080b; color: #fff;
  font-family: var(--lg-font, system-ui, sans-serif);
}
.pgv:not([open]) { display: none; }
/* One column as wide as the screen: the thumbnail row and the photo strip scroll inside it, never widen it. */
.pgv[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.pgv > * { min-width: 0; }
.pgv::backdrop { background: #07080b; }
.pgv-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.pgv-count { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pgv-staged { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; }
.pgv-staged[hidden] { display: none; }
.pgv-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 !important; padding: 0;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.pgv-btn:hover { background: rgba(255, 255, 255, .2); }
.pgv-btn:focus-visible, .pgv-thumb:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.pgv-btn[disabled] { opacity: .3; cursor: default; }
.pgv-stage { position: relative; min-height: 0; }
.pgv-track {
  display: flex; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pgv-track::-webkit-scrollbar { display: none; }
.pgv-slide {
  flex: 0 0 100%; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; scroll-snap-stop: always; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.pgv-slide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pgv-prev, .pgv-next { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255, 255, 255, .12); }
.pgv-prev { left: 16px; }
.pgv-next { right: 16px; }
.pgv-thumbs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.pgv-thumbs::-webkit-scrollbar { display: none; }
.pgv-thumb {
  flex: 0 0 auto; width: 84px; height: 60px; margin: 0 !important; padding: 0; overflow: hidden;
  border: 0; border-radius: 8px; background: rgba(255, 255, 255, .08); cursor: pointer; opacity: .5;
  transition: opacity .2s;
}
.pgv-thumb:hover { opacity: .85; }
.pgv-thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.pgv-thumb img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* A phone: swipe instead of arrows, a slimmer thumbnail row. */
@media (max-width: 767px), (pointer: coarse) {
  .pgv-prev, .pgv-next { display: none; }
}
@media (max-width: 767px) {
  .pgv-thumb { width: 64px; height: 48px; border-radius: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-slide img, .pgv-thumb { transition: none; }
  .pg-slide:hover img { transform: none; }
}