/* css/imagegallery.css

   THE GALLERY LIGHTBOX: several pictures, one at a time, with arrows either
   side. Built by openImageGallery() in js/imagegallery.js; the same dark as
   #poster-lightbox so the two read as one kind of thing. Moved out of
   css/dashboard.css (2026-10-11) and loaded on every page by template.php,
   with the script, so location tiles and Discussion Board photos can open it
   wherever they are drawn. */

.img-gallery {
    position: fixed;
    inset: 0;
    /* Above an open .modal360 (9999): the character and location dialogs open
       pictures in this, and at 9000 it drew behind them (2026-10-11). */
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 16px;
    background: rgba(0, 0, 0, .88);
}

.img-gallery.is-open {
    display: flex;
}

/* The page under it does not scroll while it is open. */
body.img-gallery-lock {
    overflow: hidden;
}

/* flex-basis 0 and a real width, not auto: an auto-sized column takes its
   width from the picture inside it, which makes the picture's max-width:100%
   a percentage of itself -- and a large picture then runs off a phone. */
.img-gallery-stage {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.img-gallery-img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 110px);
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, .6);
    user-select: none;
}

.img-gallery-caption {
    display: flex;
    align-items: baseline;
    gap: 14px;
    max-width: 100%;
    color: #e8e8e8;
    font-size: 15px;
}

.img-gallery-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.img-gallery-count {
    flex: none;
    color: #b8b8b8;
    font-variant-numeric: tabular-nums;
}

.img-gallery-nav,
.img-gallery-close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: background .15s ease;
}

.img-gallery-nav {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.img-gallery-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 42px;
    height: 42px;
    font-size: 22px;
}

.img-gallery-nav:hover,
.img-gallery-close:hover {
    background: rgba(255, 255, 255, .3);
}

/* One picture has nowhere to step to. */
.img-gallery.is-single .img-gallery-nav {
    visibility: hidden;
}

/* A phone: the arrows sit over the picture's edges rather than taking width
   from it, and a swipe does the same job. */
@media (max-width: 600px) {
    .img-gallery {
        padding: 56px 8px 16px;
    }

    .img-gallery-nav {
        position: absolute;
        top: 50%;
        z-index: 1;
        width: 42px;
        height: 42px;
        font-size: 18px;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, .45);
    }

    .img-gallery-prev {
        left: 8px;
    }

    .img-gallery-next {
        right: 8px;
    }
}



/* "+3" over the last picture shown, when a set has more than fit: location
   view tiles (js/location.js) and Discussion Board photos
   (renderCommunityMedia() in includes/community.php). The picture under it
   still opens the gallery -- on itself -- so the rest are one arrow away.
   Its parent must be position: relative. */
.img-more {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    height: 54px;
    padding: 0 10px;
    border-radius: 27px;
    background: rgba(13, 13, 26, .62);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .5px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}