/* Listing photo mosaic + lightbox (public visitors only).
   Markup: WEB-INF/include/estate_info_galery_new.jsp (.galery.gal-mosaic.gal-nN > a.gal-tile), script: js/gallery.js.
   Overrides the legacy strip rules (custom-style_v1.css .galery: nowrap/scroll-x/snap) and the
   theme.css 4c gallery block (.listing-gallery-col .galery mist background). Owner rules: radius 4px max, compact. */

/* ===== mosaic: 768px+ = 1 large + 2x2, phone = 1 large + 2 stacked ===== */
.galery.gal-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:4px;
 width:100%;aspect-ratio:2/1;overflow:hidden;white-space:normal;scroll-snap-type:none;border-radius:4px}
.listing-gallery-col .galery.gal-mosaic{background-color:transparent!important}
@supports not (aspect-ratio:1/1){.galery.gal-mosaic{height:400px}}
.gal-mosaic .gal-tile{position:relative;display:block;min-width:0;min-height:0;overflow:hidden;background:#edf3ef;cursor:zoom-in;-webkit-tap-highlight-color:transparent}
.gal-mosaic .gal-tile img{position:absolute;top:0;left:0;display:block;width:100%;max-width:none;height:100%;object-fit:cover;transition:transform .25s ease}
.gal-mosaic .gal-tile:hover img{transform:scale(1.03)}
.gal-mosaic .gal-tile:focus-visible{outline:3px solid #53b852;outline-offset:-3px}
.gal-mosaic .gal-tile:focus-visible img{opacity:.92}
.gal-mosaic .gal-tile:first-child{grid-row:1/3}
.gal-mosaic .gal-extra{display:none}
.gal-mosaic .gal-more{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;
 background:rgba(15,51,40,.55);color:#fff;font:500 22px/1 "Unbounded","Onest",Arial,sans-serif;pointer-events:none}
.gal-mosaic .gal-more-m{display:none}
/* fewer photos: no empty tiles */
.gal-mosaic.gal-n1{grid-template-columns:1fr}
.gal-mosaic.gal-n2,.gal-mosaic.gal-n3{grid-template-columns:2fr 1fr}
.gal-mosaic.gal-n2 .gal-tile:nth-child(2){grid-row:1/3}
.gal-mosaic.gal-n4 .gal-tile:nth-child(4){grid-column:2/4}

@media (max-width:767px){
 .galery.gal-mosaic{grid-template-columns:2fr 1fr;aspect-ratio:3/2;border-radius:0}
 @supports not (aspect-ratio:1/1){.galery.gal-mosaic{height:66.6vw}}
 .gal-mosaic.gal-n1{grid-template-columns:1fr}
 .gal-mosaic .gal-tile:nth-child(n+4){display:none}
 .gal-mosaic.gal-n4 .gal-tile:nth-child(4){grid-column:auto}
 .gal-mosaic .gal-more-m{display:flex}
 .gal-mosaic .gal-more-d{display:none}
 .gal-mosaic .gal-tile:hover img{transform:none}
 .gal-mosaic .gal-more{font-size:20px}
}

/* ===== lightbox ===== */
.gal-lb{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:none;background:#07160f;
 -webkit-user-select:none;user-select:none;touch-action:none;font-family:"Onest",-apple-system,"Segoe UI",Arial,sans-serif}
.gal-lb.is-open{display:block}
.gal-lb-stage{position:absolute;top:56px;right:0;bottom:56px;left:0;display:flex;align-items:center;justify-content:center}
.gal-lb-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:opacity .15s ease}
.gal-lb-img.is-loading{opacity:.35}
.gal-lb-count{position:absolute;top:0;left:0;height:56px;padding:0 16px;line-height:56px;color:#fff;font-size:15px;font-weight:600;letter-spacing:.02em}
.gal-lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0;padding:0;
 border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;box-shadow:none;text-shadow:none}
.gal-lb-btn:hover{background:rgba(255,255,255,.26)}
.gal-lb-btn:focus{outline:none}
.gal-lb-btn:focus-visible{outline:3px solid #53b852;outline-offset:2px}
.gal-lb-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gal-lb-close{top:4px;right:8px}
.gal-lb-prev,.gal-lb-next{top:50%;margin-top:-24px}
.gal-lb-prev{left:12px}
.gal-lb-next{right:12px}
.gal-lb.is-single .gal-lb-prev,.gal-lb.is-single .gal-lb-next{display:none}
@media (min-width:768px){
 .gal-lb-stage{right:76px;left:76px}
 .gal-lb-close{top:8px;right:12px}
}
@media (max-width:767px){
 /* phone: arrows in the bottom bar so they never cover the photo */
 .gal-lb-prev,.gal-lb-next{top:auto;bottom:4px;margin-top:0}
 .gal-lb-prev{left:8px}
 .gal-lb-next{right:8px}
}