/* Listing photos, Zillow pattern: a hero mosaic that opens a full-screen viewer.
   Below 760px the mosaic becomes a single swipeable strip. */

.gal{margin:0 0 8px}
.gal-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.gal-head h2{margin:0}
.gal-count{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);white-space:nowrap}

/* ---------- mosaic ---------- */
.gal-mosaic{position:relative;display:grid;gap:6px;
  grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;aspect-ratio:24/11}
.gal-mosaic button{padding:0;border:0;background:var(--cream-2);cursor:pointer;
  overflow:hidden;position:relative;display:block}
.gal-mosaic button:first-child{grid-row:span 2}
.gal-mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.gal-mosaic button:hover img{transform:scale(1.045)}
.gal-mosaic button:focus-visible{outline:3px solid var(--brass);outline-offset:-3px;z-index:2}
.gal-mosaic button::after{content:"";position:absolute;inset:0;background:rgba(18,42,36,0);transition:background .25s ease}
.gal-mosaic button:hover::after{background:rgba(18,42,36,.08)}

.gal-mosaic .gal-all,
.gal-all{position:absolute;right:14px;bottom:14px;z-index:3;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--cream);color:var(--green);border:1px solid var(--green);
  font:inherit;font-size:.84rem;font-weight:600;padding:11px 16px;
  box-shadow:0 3px 14px rgba(10,20,17,.26);transition:background .18s ease,color .18s ease}
.gal-all:hover{background:var(--green);color:#fff}
.gal-all:focus-visible{outline:3px solid var(--brass);outline-offset:3px}

/* ---------- mobile: one photo, swipe ---------- */
.gal-strip{display:none}
@media(max-width:760px){
  .gal-mosaic{display:none}
  .gal-strip{display:block;position:relative}
  .gal-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;aspect-ratio:3/2;background:var(--green-deep)}
  .gal-rail::-webkit-scrollbar{display:none}
  .gal-rail button{flex:0 0 100%;scroll-snap-align:center;padding:0;border:0;background:transparent;cursor:pointer}
  .gal-rail img{width:100%;height:100%;object-fit:cover;display:block}
  .gal-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;text-align:center;
    color:#fff;font-size:.76rem;letter-spacing:.1em;pointer-events:none}
  .gal-dots span{background:rgba(18,42,36,.78);padding:5px 11px;font-variant-numeric:tabular-nums}
  .gal-strip .gal-all{position:static;display:flex;width:100%;justify-content:center;margin-top:10px;box-shadow:none}
}

/* ---------- full-screen viewer ---------- */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:400;background:#0c1512;
  display:flex;flex-direction:column}
.lb-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 18px;color:#cdd9d4;font-size:.85rem}
.lb-n{letter-spacing:.12em;font-variant-numeric:tabular-nums}
.lb-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;
  min-height:0;padding:0 76px}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lb-cap{flex:0 0 auto;text-align:center;color:#cdd9d4;font-size:.9rem;padding:12px 20px 6px;min-height:1.4em}
.lb button{background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
  font:inherit;line-height:1;padding:10px 14px;cursor:pointer;transition:background .18s ease}
.lb button:hover{background:rgba(255,255,255,.15)}
.lb button:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);font-size:1.35rem;padding:16px 18px}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-prev[disabled],.lb-next[disabled]{opacity:.28;pointer-events:none}

/* viewer thumbnail rail */
.lb-rail{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:10px 14px 14px;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.lb-rail::-webkit-scrollbar{height:7px}
.lb-rail::-webkit-scrollbar-track{background:rgba(255,255,255,.08)}
.lb-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3)}
.lb-rail button{flex:0 0 auto;width:96px;aspect-ratio:3/2;padding:0;border:1px solid transparent;
  overflow:hidden;opacity:.5;transition:opacity .18s ease,border-color .18s ease}
.lb-rail button img{width:100%;height:100%;object-fit:cover;display:block}
.lb-rail button:hover{opacity:.85}
.lb-rail button[aria-current="true"]{opacity:1;border-color:var(--brass)}

@media(max-width:760px){
  .lb-stage{padding:0 8px}
  .lb-prev,.lb-next{font-size:1.05rem;padding:11px 12px}
  .lb-prev{left:4px}.lb-next{right:4px}
  .lb-rail button{width:70px}
  .lb-rail{padding:8px 10px 12px}
}
@media (prefers-reduced-motion:reduce){
  .gal-mosaic img,.gal-mosaic button::after,.gal-all,.lb button,.lb-rail button{transition:none}
  .gal-mosaic button:hover img{transform:none}
}