/* Site-wide image lightbox primitive.
   Usage: add `data-lightbox` to any <img> (or <a href="full.jpg">); group navigable
   images with the same `data-lightbox-group="name"`. Optional `data-full="<url>"`
   for a higher-res source. Behaviour + overlay are provided by /js/lightbox.js. */
.lb-overlay {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background: rgba(8,3,16,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    cursor: zoom-out; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}
.lb-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.lb-img {
    max-width: 92vw; max-height: 88vh; border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    animation: lbImgIn .34s cubic-bezier(.16,1,.3,1);
}
@keyframes lbImgIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.lb-btn {
    position: absolute; border: 0; border-radius: 50%; cursor: pointer; z-index: 2;
    display: flex; align-items: center; justify-content: center; color: #fff;
    background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .15s, transform .15s;
}
.lb-close { top: 18px; right: 22px; width: 44px; height: 44px; }
.lb-close svg { width: 22px; height: 22px; }
.lb-close:hover { background: rgba(255,255,255,.26); transform: scale(1.06); }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
.lb-prev svg, .lb-next svg { width: 26px; height: 26px; }
.lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.28); }
.lb-prev { left: 22px; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next { right: 22px; }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }
@media (prefers-reduced-motion: reduce) { .lb-overlay, .lb-img { transition: none; animation: none; } }
@media (max-width: 560px) {
    .lb-prev, .lb-next { width: 46px; height: 46px; }
    .lb-prev svg, .lb-next svg { width: 22px; height: 22px; }
    .lb-prev { left: 10px; } .lb-next { right: 10px; }
}