/* Boesman Portfolio Gallery (grid + lightbox)
   - Responsive columns: desktop 4, tablet 2, mobile 1
   - Lightweight: lazy-load via IntersectionObserver
   - Lightbox: centered, fit-to-screen (no scroll/zoom needed)
*/

:root{
  --bmg-gap: 22px;
  --bmg-radius: 18px;
  --bmg-border: rgba(255,255,255,0.10);
  --bmg-card: rgba(255,255,255,0.03);
  --bmg-card2: rgba(0,0,0,0.35);
  --bmg-shadow: 0 18px 55px rgba(0,0,0,0.55);
}

/* Grid */
#bmgGallery{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bmg-gap);
}
@media (max-width: 1100px){
  #bmgGallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px){
  #bmgGallery{ grid-template-columns: 1fr; }
}

.bmg-card{
  position: relative;
  border-radius: var(--bmg-radius);
  overflow: hidden;
  background: var(--bmg-card);
  border: 1px solid var(--bmg-border);
  box-shadow: 0 12px 35px rgba(0,0,0,0.45);
  transform: translateZ(0);
}

.bmg-btn{
  appearance: none;
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  background: transparent;
  cursor: pointer;
}

.bmg-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  /* Don't crop thumbnails – show the full image inside the square tile */
  object-fit: contain;
  display: block;
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1.001);
  transition: transform 240ms ease, filter 240ms ease;
}

.bmg-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, var(--bmg-card2));
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.bmg-card:hover .bmg-thumb{ transform: scale(1.035); }
.bmg-card:hover .bmg-overlay{ opacity: 1; }

/* Lightbox modal */
#bmgModal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
#bmgModal.is-open{ display: block; }

.bmg-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
}

.bmg-dialog{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bmg-figure{
  margin: 0;
  /* Bigger preview (+~20%), always centered and fully visible (no scrolling/zooming needed) */
  width: min(98vw, 1320px);
  height: calc(100vh - 140px);
  max-width: 98vw;
  max-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bmg-shadow);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
}

#bmgImg{
  /* Fill the preview area while keeping aspect ratio (no crop) */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

@media (max-width: 650px){
  .bmg-figure{
    width: 96vw;
    height: calc(100vh - 120px);
    max-width: 96vw;
    max-height: 86vh;
  }
  #bmgImg{ width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
}

.bmg-close{
  position: absolute;
  top: 22px;
  right: 22px;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 34px;
  line-height: 46px;
  cursor: pointer;
  z-index: 2;
}
.bmg-close:hover{ background: rgba(0,0,0,0.65); }

.bmg-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 44px;
  line-height: 58px;
  cursor: pointer;
  z-index: 2;
}
.bmg-nav:hover{ background: rgba(0,0,0,0.65); }

.bmg-prev{ left: 18px; }
.bmg-next{ right: 18px; }

.bmg-counter{
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: rgba(255,255,255,0.78);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* When modal open: lock page scroll */
body.bmg-lock{
  overflow: hidden !important;
}