/* ───────────────── Lightbox Styles ───────────────── */
.lightbox{
  /* Hidden by default + container */
  display:flex; justify-content:center; align-items:center;
  position:fixed; inset:0; z-index:1000; overflow:auto;
  background-color:rgba(0,0,0,.9);
  opacity:0; pointer-events:none; transition:opacity .3s ease-in-out;
}
.lightbox.active{opacity:1; pointer-events:auto}
.lightbox-img{
  max-width:90%; max-height:90%; object-fit:contain;
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(255,255,255,.2); color:#fff;
  border:none; border-radius:50%; width:40px; height:40px; font-size:2rem;
  cursor:pointer; display:flex; justify-content:center; align-items:center;
  padding-bottom:5px; transition:background .2s ease; z-index:1010;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:var(--brand)}
.lightbox-close{top:20px; right:20px; font-size:3rem; padding-bottom:0}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}
/* Focus states */
.lightbox-close:focus-visible,
.lightbox-prev:focus-visible,
.lightbox-next:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px;
}