/* ============================================
   Lightbox – Block Component
   Full-screen image viewer for galleries,
   article figures and hero images.
   Markup is injected once by assets/js/lightbox.js.
   ============================================ */

/* Affordance on every zoomable image */
.is-zoomable {
    cursor: zoom-in;
}

/* ---- Overlay ---- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background-color: var(--color-ink-90);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    -webkit-tap-highlight-color: transparent;
}

.lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---- Image + caption ---- */
.lightbox__figure {
    margin: 0;
    max-width: min(92vw, 1400px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.lightbox__img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    background-color: var(--color-white);
    padding: var(--space-2);
    border: 1px solid var(--color-ink-10);
    box-shadow: var(--shadow-xl);
    transform: rotate(-0.6deg);
}

.lightbox__caption {
    max-width: 60ch;
    text-align: center;
    color: var(--color-label-white);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.4;
    text-shadow: var(--shadow-sm);
}

.lightbox__caption:empty {
    display: none;
}

/* ---- Controls ---- */
.lightbox__close,
.lightbox__nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-ink-10);
    background-color: var(--color-label-white);
    color: var(--color-ink);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: transform var(--transition-bounce), background-color var(--transition-base);
}

.lightbox__close:hover,
.lightbox__nav:hover {
    background-color: var(--color-sun-yellow);
    transform: scale(1.08);
}

.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
    outline: 3px solid var(--color-otto-green);
    outline-offset: 2px;
}

.lightbox__close {
    top: var(--space-4);
    right: var(--space-4);
    width: 3rem;
    height: 3rem;
}

.lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3.25rem;
    height: 3.25rem;
}

.lightbox__nav:hover {
    transform: translateY(-50%) scale(1.08);
}

.lightbox__nav--prev { left: var(--space-4); }
.lightbox__nav--next { right: var(--space-4); }

/* Hidden when the current group has only one image */
.lightbox[data-single="true"] .lightbox__nav { display: none; }

.lightbox__close .lucide,
.lightbox__nav .lucide {
    width: 1.5rem;
    height: 1.5rem;
}

/* ---- Counter ---- */
.lightbox__counter {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background-color: var(--color-label-white);
    color: var(--color-ink);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-md);
}

.lightbox[data-single="true"] .lightbox__counter { display: none; }

/* ---- Small screens ---- */
@media (max-width: 640px) {
    .lightbox__nav {
        width: 2.75rem;
        height: 2.75rem;
    }
    .lightbox__nav--prev { left: var(--space-2); }
    .lightbox__nav--next { right: var(--space-2); }
    .lightbox__caption { font-size: var(--text-base); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox__close,
    .lightbox__nav {
        transition: none;
    }
    .lightbox__img { transform: none; }
}