/* ─── Gallery grid + lightbox, page-specific, /gallery only ──────────── */

/* Masonry grid, 50 real project photos. Pre-balanced into 3 explicit
   columns at build time (scripts/balance-gallery-masonry.mjs) so each
   column's total height comes out even - CSS multi-column masonry
   (columns:3) fills strictly top-to-bottom per column with no height
   balancing, which left noticeably uneven column bottoms. */
#pg .gal-grid{display:flex;gap:14px;align-items:flex-start}
#pg .gal-col{display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
#pg .gal-item{
  display:block;width:100%;
  position:relative;border-radius:18px;overflow:hidden;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.1),0 28px 72px rgba(0,0,0,.06);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
#pg .gal-item:hover{transform:translateY(-6px);box-shadow:0 8px 24px rgba(0,0,0,.14),0 24px 64px rgba(0,0,0,.2),0 40px 96px rgba(0,0,0,.1)}
#pg .gal-item img{width:100%;height:auto;display:block;transition:transform .45s var(--ease),filter .3s var(--ease)}
#pg .gal-item:hover img{transform:scale(1.05);filter:brightness(0.84)}
#pg .gal-item__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(38,50,56,.65) 0%,rgba(38,50,56,.1) 50%,transparent 100%);
  opacity:0;transition:opacity .3s var(--ease);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px;
}
#pg .gal-item:hover .gal-item__overlay{opacity:1}
#pg .gal-item__zoom{
  width:46px;height:46px;border-radius:50%;background:var(--orange);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(255,165,3,.55);
  transform:translateY(10px) scale(.8);transition:transform .3s var(--ease);
}
#pg .gal-item:hover .gal-item__zoom{transform:translateY(0) scale(1)}
#pg .gal-item__zoom svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none}

@media(max-width:900px){ #pg .gal-grid{flex-direction:column;gap:12px} #pg .gal-col{gap:12px} }

/* Lightbox */
#pgLightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
#pgLightbox.lb-open{opacity:1;pointer-events:all}
#pgLightbox .lb-bg{position:absolute;inset:0;background:rgba(8,12,14,.95);cursor:pointer}
#pgLightbox .lb-content{position:relative;z-index:1;max-width:min(92vw,1280px);max-height:92vh;display:flex;align-items:center;justify-content:center}
#pgLightbox .lb-img{max-width:100%;max-height:90vh;border-radius:12px;box-shadow:0 24px 80px rgba(0,0,0,.65);display:block;transition:opacity .2s ease;object-fit:contain}
#pgLightbox .lb-close{
  position:fixed;top:20px;right:24px;width:46px;height:46px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.2);background:rgba(38,50,56,.65);color:#fff;font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s;
  z-index:2;font-family:var(--font-b);backdrop-filter:blur(8px);
}
#pgLightbox .lb-close:hover{background:var(--orange);border-color:var(--orange);transform:scale(1.1)}
#pgLightbox .lb-prev,#pgLightbox .lb-next{
  position:fixed;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18);background:rgba(38,50,56,.65);color:#fff;font-size:28px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s,transform .25s;
  z-index:2;line-height:1;font-family:var(--font-b);backdrop-filter:blur(8px);
}
#pgLightbox .lb-prev{left:clamp(12px,2.5vw,32px)}
#pgLightbox .lb-next{right:clamp(12px,2.5vw,32px)}
#pgLightbox .lb-prev:hover{background:var(--orange);transform:translateY(-50%) scale(1.1)}
#pgLightbox .lb-next:hover{background:var(--orange);transform:translateY(-50%) scale(1.1)}
#pgLightbox .lb-counter{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  font-family:var(--font-b);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.55);background:rgba(0,0,0,.35);padding:8px 20px;border-radius:9999px;z-index:2;backdrop-filter:blur(8px);
}

@media(prefers-reduced-motion:reduce){
  #pg .gal-item,#pg .gal-item img,#pg .gal-item__zoom,#pg .gal-item__overlay{transition:none!important}
}

@media(min-width:640px){
  #pg .services__sub--wide{max-width:none;white-space:nowrap}
}

/* Orange border on each individual before/after slider image, matching the
   homepage results sliders - not a box around the whole section */
#pg #ba-showcase .ba-slider__frame{
  border:3px solid var(--orange);
  box-shadow:0 4px 12px rgba(0,0,0,.12),0 12px 40px rgba(0,0,0,.18),0 24px 80px rgba(0,0,0,.12);
}