/* =========================================================================
   lightbox.css — overlay pełnoekranowy do podglądu zdjęć.

   Domyślnie ukryty (aria-hidden=true + display:none).
   JS dodaje klasę .gallery-lightbox--open i ustawia aria-hidden=false.

   UX:
     - Mobile: pełnoekranowy, swipe gestures + przyciski floating
     - Desktop: marginesy 40-80px, max-width 1400px
     - Caption w lekkim panelu pod obrazem
     - Counter „3 / 12" w prawym górnym rogu
     - Wszystkie przyciski mają state focus-visible
   ========================================================================= */

/* Stan domyślny — schowany. */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* Trzymamy hidden pełen w body, JS toggle przez display + aria. */
}

.gallery-lightbox[aria-hidden="false"],
.gallery-lightbox.gallery-lightbox--open {
    display: block;
}

/* Backdrop — klik = zamknij. */
.gallery-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 30, 22, 0.95);  /* green-950 z transparency */
    backdrop-filter: blur(6px);
    cursor: zoom-out;
    animation: lightbox-fade .18s ease;
}

@keyframes lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.gallery-lightbox__shell {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    /* Trzymamy stage na środku przez justify-self na figure */
    pointer-events: none;
}
.gallery-lightbox__shell > * { pointer-events: auto; }

/* === TOPBAR (counter + close) ============================================ */
.gallery-lightbox__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    color: #fff;
    position: relative;
    z-index: 2;
}

.gallery-lightbox__counter {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92);
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.08);
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
}

/* === BUTTON (close / prev / next) ======================================== */
.gallery-lightbox__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
    padding: 0;
}
.gallery-lightbox__btn:hover,
.gallery-lightbox__btn:focus-visible {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.35);
    transform: scale(1.06);
}
.gallery-lightbox__btn:focus-visible {
    outline: 3px solid var(--accent-gold-400, #f5d57e);
    outline-offset: 3px;
}
.gallery-lightbox__btn[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.gallery-lightbox__btn--close {
    width: 44px;
    height: 44px;
}

/* === PREV / NEXT — floating po bokach ==================================== */
.gallery-lightbox__btn--prev,
.gallery-lightbox__btn--next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
.gallery-lightbox__btn--prev { left: var(--s-3); }
.gallery-lightbox__btn--next { right: var(--s-3); }

.gallery-lightbox__btn--prev:hover,
.gallery-lightbox__btn--next:hover,
.gallery-lightbox__btn--prev:focus-visible,
.gallery-lightbox__btn--next:focus-visible {
    transform: translateY(-50%) scale(1.06);
}

@media (min-width: 720px) {
    .gallery-lightbox__btn--prev { left: var(--s-5); }
    .gallery-lightbox__btn--next { right: var(--s-5); }
}

@media (min-width: 1200px) {
    .gallery-lightbox__btn--prev,
    .gallery-lightbox__btn--next {
        width: 56px;
        height: 56px;
    }
}

/* === STAGE (figure z obrazem + caption) ================================== */
.gallery-lightbox__stage {
    margin: 0;
    padding: var(--s-3) var(--s-3) var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    min-height: 0;          /* fix dla grid: 1fr */
    overflow: hidden;
}

@media (min-width: 720px) {
    .gallery-lightbox__stage {
        padding: var(--s-4) calc(var(--s-3) + 56px) var(--s-5);
        gap: var(--s-4);
    }
}

@media (min-width: 1200px) {
    .gallery-lightbox__stage {
        padding: var(--s-4) calc(var(--s-3) + 80px) var(--s-5);
    }
}

.gallery-lightbox__img {
    max-width: 100%;
    /* Wysokość = stage minus caption + paddingi. Używamy max-height żeby
       caption miał miejsce nawet na mobile landscape. */
    max-height: calc(100vh - 180px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
    background: #000;
    /* Wczytujemy nowy obraz — daj user-owi krótki fade */
    animation: lightbox-img-in .25s ease;
}

@keyframes lightbox-img-in {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}

.gallery-lightbox__img--loading {
    opacity: 0.5;
}

.gallery-lightbox__caption {
    max-width: min(720px, 90vw);
    text-align: center;
    color: rgba(255,255,255,0.92);
    font-size: 14px;
    line-height: 1.5;
    background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.12);
    padding: var(--s-2) var(--s-4);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}
.gallery-lightbox__caption:empty {
    display: none;
}

@media (min-width: 720px) {
    .gallery-lightbox__caption {
        font-size: 15px;
    }
}

/* === KEYBOARD HINT (na desktop, subtle) ================================== */
@media (min-width: 1024px) {
    .gallery-lightbox__shell::after {
        content: "← → nawigacja  ·  Esc zamyka";
        position: absolute;
        bottom: var(--s-3);
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255,255,255,0.45);
        font-size: 12px;
        letter-spacing: 0.02em;
        pointer-events: none;
    }
}

/* === Body lock — gdy lightbox otwarty (klasa dodawana przez JS) ========== */
body.gallery-lightbox-open {
    overflow: hidden;
    /* Kompensata scroll-bara na desktop (Windows). */
    padding-right: var(--scrollbar-width, 0px);
}