/* Stable, decode-ready photo stage. Only the selected house preloads neighbors. */
.photo-gallery{position:relative;min-width:0;max-width:100%;margin:var(--space-3) 0;overflow:hidden;border-radius:7px;background:transparent}
.photo-gallery[hidden]{display:none}
.photo-frame{position:relative;height:200px;max-width:100%;touch-action:pan-y;overflow:hidden;border-radius:7px;background:var(--photo-mat)}
.photo-image{position:relative;display:block;width:100%;height:100%;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:hidden}
.photo-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity 180ms ease;pointer-events:none}
.photo-layer img{width:100%;height:100%;display:block;object-fit:cover}
/* Auto dimensions put the frame and shadow on the photograph, not its letterbox. */
.photo-layer img[style*="contain"],.owner-photo-preview img[style*="contain"]{width:auto;height:auto;max-width:calc(100% - 2 * var(--space-2));max-height:calc(100% - 2 * var(--space-2));box-shadow:var(--photo-image-shadow);border-radius:2px}
.photo-unavailable{display:flex;align-items:center;justify-content:center;gap:8px;position:absolute;z-index:5;inset:auto 8px 8px;padding:7px 10px;border-radius:4px;background:var(--surface-card);color:var(--ink);font-size:12px}
.photo-unavailable[hidden]{display:none}
.photo-retry{min-width:44px;min-height:44px;padding:4px 8px;border:0;background:transparent;color:inherit;text-decoration:underline;cursor:pointer}
.photo-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:1px solid var(--photo-control-border);border-radius:50%;background:var(--photo-control-active);color:var(--photo-control-ink);cursor:pointer;box-shadow:var(--photo-control-shadow);transition:opacity 180ms ease}
.photo-arrow svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.photo-prev{left:calc(var(--photo-left,0px) + 6px)}.photo-next{right:calc(var(--photo-right,0px) + 6px)}
.photo-controls{position:absolute;z-index:3;left:50%;bottom:calc(var(--photo-bottom,0px) + 4px);transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:0;height:28px;background:transparent}
.photo-controls button{display:grid;place-items:center;width:28px;height:28px;padding:0;margin:0;border:0;background:transparent;cursor:pointer}
.photo-controls button span{width:5px;height:5px;border-radius:50%;background:var(--photo-dot-rest);box-shadow:var(--photo-dot-shadow)}
.photo-controls button[aria-current=true] span{background:var(--photo-dot-active);width:7px;height:7px}
.photo-count{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.photo-gallery button:focus-visible,.photo-lightbox button:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:-3px}
/* Touch controls stay fully visible. Fine-pointer controls are quieter at rest,
   never hidden, and strengthen on hover or keyboard entry. */
@media(hover:hover) and (pointer:fine){.photo-arrow{background:var(--photo-control-rest)}.photo-frame:hover .photo-arrow,.photo-frame:focus-within .photo-arrow{background:var(--photo-control-active)}}
.photo-lightbox{box-sizing:border-box;width:min(1000px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:12px;border:1px solid var(--border-card);border-radius:12px;background:var(--surface-card);color:var(--ink);overflow:auto}
.photo-lightbox::backdrop{background:var(--photo-backdrop);backdrop-filter:none}
.photo-lightbox .photo-close{position:absolute;z-index:4;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:1px solid var(--photo-control-border);border-radius:50%;background:var(--photo-control-active);color:var(--photo-control-ink);font:28px/1 system-ui,sans-serif;cursor:pointer;box-shadow:var(--photo-control-shadow)}
.photo-gallery-large{margin:0}.photo-gallery-large .photo-frame{height:min(72dvh,800px)}
@media(max-width:720px){.details .photo-frame{height:176px}.photo-gallery-large .photo-frame{height:65dvh}}
@media(prefers-reduced-motion:reduce){.photo-layer,.photo-arrow{transition:none}}

/* Local photo-only placeholder: no moving shimmer, and no whole-card overlay. */
.photo-loading{position:absolute;inset:0;pointer-events:none;background:var(--photo-loading);animation:photo-loading-breathe 1.8s ease-in-out infinite alternate}
.photo-loading::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:24px;transform:translate(-50%,-50%);border:1px solid var(--photo-loading-border);border-radius:3px;background:var(--photo-loading-fill)}
.photo-loading[hidden]{display:none}
@keyframes photo-loading-breathe{from{opacity:.45}to{opacity:.8}}
@media(prefers-reduced-motion:reduce){.photo-loading{animation:none;opacity:.6}}

/* Owner thumbnails reuse the media treatment without restyling owner actions. */
.owner-photo-preview,.owner-photo-preview:hover{display:flex;align-items:center;justify-content:center;background:var(--photo-mat)}

.photo-view-action{display:block;min-height:44px;margin:0;padding:10px 0;font-size:13px;text-align:left}

/* Adaptive previews keep whole scenes visible without a large colored matte. */
.photo-gallery:not(.photo-gallery-large) .photo-frame{height:auto;aspect-ratio:var(--photo-ratio,4/3);min-height:160px;max-height:min(380px,55svh);border:2px solid var(--ink);box-sizing:border-box;background:var(--surface-card)}
.photo-gallery:not(.photo-gallery-large) .photo-layer img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;box-shadow:none;border-radius:0}
.photo-gallery:not(.photo-gallery-large) .photo-controls{position:static;transform:none;height:28px}
.photo-gallery:not(.photo-gallery-large) .photo-controls button span{background:var(--border-card);box-shadow:none}
.photo-gallery:not(.photo-gallery-large) .photo-controls button[aria-current=true] span{background:var(--ink)}
.photo-lightbox{background:var(--photo-viewer);border-color:var(--photo-viewer)}
.photo-gallery-large .photo-frame{background:var(--photo-viewer);touch-action:pan-x pan-y pinch-zoom}
.photo-gallery-large .photo-layer img{max-width:100%;max-height:100%;box-shadow:none}
@media(max-width:720px){.photo-gallery:not(.photo-gallery-large) .photo-frame{max-height:min(420px,55svh)}}

/* Explore keeps the pending 4:3 frame through decode, navigation and retries.
   Its empty pagination row also reserves the same space for one or many photos.
   Existing viewport caps still keep short sheets scrollable. */
.explore-map #displayPhotos.photo-gallery:not(.photo-gallery-large) .photo-frame{width:100%;aspect-ratio:4/3}
.explore-map #displayPhotos .photo-view-placeholder{height:44px}

/* Viewer chrome stays outside the scene, with a dedicated pagination row. */
.photo-lightbox{padding-top:64px}
.photo-gallery-large .photo-controls{position:static;transform:none;height:36px}
@media(max-width:720px){
 .photo-lightbox{inset:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:calc(60px + env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom));overflow:hidden;box-shadow:none}
 .photo-lightbox[open]{display:flex;flex-direction:column}
 .photo-lightbox .photo-close{top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
 .photo-gallery-large{display:flex;flex-direction:column;flex:1;min-height:0}
 .photo-gallery-large .photo-frame{flex:1;height:auto;min-height:0}
 .photo-gallery-large .photo-controls{flex:none;height:44px}
}