/* ============================================================================
   THE LIGHTBOX — the full-size photo overlay.
   ----------------------------------------------------------------------------
   Split out of photo-viewer.css and linked SITE-WIDE from fragments/header.html,
   because the #galleryLightbox element it styles has always lived in that header
   fragment and therefore exists on every page — while this CSS was only linked by
   the five item pages that embed the photo viewer. Anywhere else (a journal photo,
   for one) the markup was present, the class did nothing, and "open" meant an
   overlay that stayed display:none.

   photo-viewer.css imports this file, so the pages that had it before still get it
   exactly once.
   ========================================================================== */

/* Lightbox */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox.open {
    display: flex;
}

.gallery-lightbox .lightbox-img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
}

.gallery-lightbox .lightbox-close,
.gallery-lightbox .lightbox-prev,
.gallery-lightbox .lightbox-next {
    position: fixed;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 10000;
}

.gallery-lightbox .lightbox-close:hover,
.gallery-lightbox .lightbox-prev:hover,
.gallery-lightbox .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
}

.gallery-lightbox .lightbox-close {
    top: 1rem;
    right: 1rem;
}

.gallery-lightbox .lightbox-prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.gallery-lightbox .lightbox-next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

/* A single photo has nothing to page through, so the arrows are not merely useless
   there — they are two buttons that visibly do nothing when pressed. */
.gallery-lightbox.single .lightbox-prev,
.gallery-lightbox.single .lightbox-next {
    display: none;
}