/* ============================================================
   Alameda Estate Sales — gallery page (gallery.html)
   Requires site.css. Masonry grid + lightbox.
   ============================================================ */

.head{padding:64px 0 40px}
.head h1{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.8vw,44px);color:var(--pine);margin:16px 0 10px;line-height:1.12}
.head p{color:var(--ink-soft);max-width:60ch}

/* CSS columns, not grid — masonry needs the ragged bottom edge, and
   break-inside:avoid keeps a figure from splitting across columns. */
.masonry{columns:3;column-gap:16px;padding-bottom:70px}
.g-item{break-inside:avoid;margin:0 0 16px;border:1px solid rgba(55,73,46,.18);background:#fff}
/* height:auto is REQUIRED, not optional. These <img> carry intrinsic width and
   height attributes (added for CLS). With width:100% but no height declared,
   the browser uses the HTML height attribute as the actual height -- so a
   480x640 thumb rendered 358x640 instead of 358x477 and every image was
   vertically stretched. Setting height:auto lets the aspect ratio derive from
   the attributes, which is the whole point of having them.
   Rule of thumb: any img with width/height attributes needs height:auto
   wherever CSS sets its width. */
.g-item img{width:100%;height:auto;display:block;cursor:zoom-in;transition:opacity .25s}
.g-item img:hover{opacity:.9}

.back{padding-bottom:80px;text-align:center}

footer{margin-top:20px}

/* ---- Lightbox ---- */
.lb{display:none;position:fixed;inset:0;z-index:100;background:rgba(35,47,29,.88);padding:30px;cursor:zoom-out}
.lb.open{display:grid;place-items:center}
.lb img{max-width:min(1100px,94vw);max-height:88vh;border:4px solid var(--paper)}
.lb .lb-nav{position:fixed;top:50%;transform:translateY(-50%);background:rgba(245,245,239,.9);border:none;width:44px;height:44px;font-size:18px;color:var(--pine);cursor:pointer}
.lb .prev{left:14px}
.lb .next{right:14px}
.lb .close{position:fixed;top:14px;right:14px;background:rgba(245,245,239,.9);border:none;width:44px;height:44px;font-size:22px;color:var(--pine);cursor:pointer}

/* ---- Responsive ---- */
@media(max-width:920px){.masonry{columns:2}}
@media(max-width:720px){.masonry{columns:1}}