/* Lightbox (using <dialog>) */
#lightbox{
  padding: 0;
  border: none;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: visible;
  z-index: 2000;
}
#lightbox::backdrop{
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(2px);
}

#lightbox .lb-inner{
  position: relative;
  max-width: min(96vw, 1200px);
  margin: 6dvh auto;
  padding: 0;
}
#lightbox .lb-figure{ margin: 0; }
#lightbox .lb-img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
#lightbox .lb-cap{
  margin-top: 8px;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  opacity: .9;
}

/* Controls */
#lightbox .lb-btn{
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(16,17,20,.55);
  color: #fff;
  cursor: pointer;
  user-select: none;
}
#lightbox .lb-btn:hover{ background: rgba(16,17,20,.75); border-color:#fff; }

#lightbox .lb-close{ top: -54px; right: -4px; }
#lightbox .lb-prev{ top: 50%; left: -56px; transform: translateY(-50%); }
#lightbox .lb-next{ top: 50%; right: -56px; transform: translateY(-50%); }

/* Keep everything reachable on small screens */
@media (max-width: 680px){
  #lightbox .lb-inner{ margin: 4dvh auto; max-width: 94vw; }
  #lightbox .lb-close{ top: 8px; right: 8px; }
  #lightbox .lb-prev{ left: 8px; }
  #lightbox .lb-next{ right: 8px; }
}

/* Prevent page scroll while lightbox is open */
body.lb-open{ overflow: hidden; }




.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.gallery-grid a{ display:block; position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.18); background:rgba(16,17,20,.25); }
.gallery-grid img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition: transform .2s ease, filter .2s ease; }
.gallery-grid a:hover img,
.gallery-grid a:focus-visible img{ transform: scale(1.04); filter: contrast(1.05); }
.gallery-grid a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Let content pages stretch to full width even though body centers items */
.page{
  width: min(1200px, 100%);
  justify-self: stretch; /* override body's place-items:center */
  align-self: start;     /* anchor near top */
}

/* Make the grid fill the available width */
.gallery-grid{ width: 100%; }

@media (min-width: 680px){
  .gallery-grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}