/* ==========================================================================
   Lightbox — the enlarged photo view.

   Shared by the gallery and the area guide, so it lives in its own file rather
   than inside gallery.css. Pair it with Pages/Shared/_Lightbox.cshtml.
   ========================================================================== */

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-lightbox);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgb(24 21 19 / 0.94);
    cursor: zoom-out;
}

.lightbox__frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--space-12) var(--space-6) var(--space-16);
    pointer-events: none;
}

.lightbox__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.lightbox__image {
    max-width: 100%;
    /* Leaves room for the caption below without it ever overlapping the photo. */
    max-height: calc(100vh - 12rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
    background-color: rgb(255 255 255 / 0.04);
}

.lightbox__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2) var(--space-4);
    max-width: 44rem;
    text-align: center;
    font-size: var(--text-sm);
    color: rgb(250 246 240 / 0.85);
}

.lightbox__counter {
    font-variant-numeric: tabular-nums;
    color: rgb(250 246 240 / 0.5);
}

/* --- Controls ------------------------------------------------------------ */

.lightbox__control {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px minimum: the size a finger can actually hit. */
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background-color: rgb(250 246 240 / 0.1);
    border: 1px solid rgb(250 246 240 / 0.25);
    border-radius: var(--radius-full);
    color: var(--color-sand);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.lightbox__control:hover {
    background-color: rgb(250 246 240 / 0.22);
}

.lightbox__control[hidden] {
    display: none;
}

.lightbox__control-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.lightbox__control--close {
    top: var(--space-4);
    right: var(--space-4);
}

.lightbox__control--prev {
    top: 50%;
    left: var(--space-4);
    transform: translateY(-50%);
}

.lightbox__control--next {
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
}

/* On narrow screens side arrows would sit on top of the photo, so they move to
   the bottom next to each other — and swiping works anyway. */
@media (max-width: 40rem) {
    .lightbox__control--prev,
    .lightbox__control--next {
        top: auto;
        bottom: var(--space-4);
        transform: none;
    }

    .lightbox__control--prev { left: calc(50% - 3.5rem); }
    .lightbox__control--next { right: calc(50% - 3.5rem); }

    .lightbox__image { max-height: calc(100vh - 16rem); }
}