/* Lightbox component — see lightbox.js for the data-attribute contract.
   The overlay scrim is intentionally near-black in BOTH themes: photos read
   best on a dark neutral ground. All chrome colors are theme tokens. */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, 0.88);
    padding: 2rem;
}

.lightbox-overlay[hidden] {
    display: none;
}

.lightbox-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: min(90vw, 1100px);
    max-height: 90vh;
    margin: 0;
}

.lightbox-image {
    max-width: 100%;
    max-height: calc(90vh - 6rem);
    object-fit: contain;
    border-radius: var(--border-radius-small, 5px);
    /* All gestures (swipe, pinch, double-tap-drag, pan) are handled in
       lightbox.js — hand every touch to the pointer-event engine. */
    touch-action: none;
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.lightbox-image.zoomed {
    cursor: grab;
}

.lightbox-image.zoomed:active {
    cursor: grabbing;
}

/* Only for the double-tap/-click toggle; live gestures track 1:1. */
.lightbox-image.zoom-anim {
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Neighbor preview during a swipe drag (lightbox.js updatePeek): slides in
   from the incoming side, growing/fading with drag progress. Decorative
   only — never interactive. */
.lightbox-peek {
    position: fixed;
    top: 50%;
    left: 50%;
    /* Same box constraints as .lightbox-image, so at full drag the incoming
       photo is exactly as big as the one it replaces. */
    max-width: min(90vw, 1100px);
    max-height: calc(90vh - 6rem);
    object-fit: contain;
    border-radius: var(--border-radius-small, 5px);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.lightbox-peek[hidden] {
    display: none;
}

/* Leave room for the strip so image + thumbs + bar still fit the viewport. */
.lightbox-figure:has(.lightbox-thumbs:not([hidden])) .lightbox-image {
    max-height: calc(90vh - 10rem);
}

/* Thumbnail strip: the current report's photo series, direct jumps within. */
.lightbox-thumbs {
    display: flex;
    gap: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.15rem;
}

.lightbox-thumbs[hidden] {
    display: none;
}

.lightbox-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--border-radius-small, 5px);
    background: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.lightbox-thumb:hover {
    opacity: 0.85;
}

.lightbox-thumb.active {
    opacity: 1;
    /* The scrim is near-black in both themes — a light ring reads best. */
    border-color: rgba(255, 255, 255, 0.9);
}

/* Context bar: what am I looking at, and where can I act on it */
.lightbox-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    background: var(--background-card);
    color: var(--text-color);
    border-radius: var(--border-radius-small, 5px);
    padding: 0.6rem 1rem;
}

.lightbox-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.lightbox-caption {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-context {
    font-size: 0.85rem;
    color: var(--shade800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lightbox-counter {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--shade800);
}

.lightbox-link {
    flex: 0 0 auto;
    color: var(--text-color);
    text-decoration: underline;
    white-space: nowrap;
}

/* While zoomed the scaled image paints over in-flow siblings, so the context
   bar and thumb strip detach to the bottom of the viewport, layered above the
   photo like the fixed buttons. */
.lightbox-overlay:has(.lightbox-image.zoomed) .lightbox-bar {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(90vw, 1100px);
    z-index: 2;
}

.lightbox-overlay:has(.lightbox-image.zoomed) .lightbox-thumbs {
    position: fixed;
    left: 50%;
    bottom: 4.6rem;
    transform: translateX(-50%);
    z-index: 2;
    max-width: min(90vw, 1100px);
}

/* Immersive mode (lightbox.js): while zoomed — or after a single tap on the
   photo — the chrome fades away so only the image remains. */
.lightbox-close,
.lightbox-prev,
.lightbox-next,
.lightbox-bar,
.lightbox-thumbs {
    transition: opacity 0.2s ease, visibility 0.2s;
}

.lightbox-overlay.chrome-hidden .lightbox-close,
.lightbox-overlay.chrome-hidden .lightbox-prev,
.lightbox-overlay.chrome-hidden .lightbox-next,
.lightbox-overlay.chrome-hidden .lightbox-bar,
.lightbox-overlay.chrome-hidden .lightbox-thumbs {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: fixed;
    /* Above the image: the connected-transition transform promotes
       .lightbox-image to its own stacking context, which would otherwise
       paint over the close/prev buttons that precede the figure in the DOM. */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--background-card);
    color: var(--text-color);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background-image: linear-gradient(var(--hover-color), var(--hover-color));
}

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

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

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

.lightbox-prev[hidden],
.lightbox-next[hidden],
.lightbox-counter[hidden],
.lightbox-caption[hidden],
.lightbox-context[hidden],
.lightbox-link[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .lightbox-overlay {
        padding: 0.5rem;
    }

    .lightbox-bar {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .lightbox-prev {
        left: 0.25rem;
    }

    .lightbox-next {
        right: 0.25rem;
    }
}