/* ==========================================================
   SP44MS
   WŁASNY LIGHTBOX
   ========================================================== */


:root {

    --nlb-background:
        rgba(10, 10, 13, 0.96);

    --nlb-button:
        rgba(255, 255, 255, 0.10);

    --nlb-button-hover:
        rgba(255, 255, 255, 0.20);

    --nlb-button-active:
        rgba(255, 255, 255, 0.28);

    --nlb-text:
        #ffffff;

    --nlb-muted:
        rgba(255, 255, 255, 0.65);

    --nlb-accent:
        #ffffff;

}


/* ==========================================================
   BODY
   ========================================================== */

body.nlb-open {

    overflow: hidden;

}


/* ==========================================================
   GŁÓWNY LIGHTBOX
   ========================================================== */

.nlb {

    position: fixed;

    inset: 0;

    z-index: 999999;

    display: flex;

    align-items: center;

    justify-content: center;

    visibility: hidden;

    opacity: 0;

    background:
        var(--nlb-background);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;

    overflow: hidden;

    touch-action: none;

}


.nlb.is-open {

    visibility: visible;

    opacity: 1;

}


/* ==========================================================
   SCENA
   ========================================================== */

.nlb__stage {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    /*
     * Rzeczywisty bezpieczny obszar dla zdjęcia.
     *
     * Góra:
     *   miejsce na górny toolbar
     *
     * Dół:
     *   miejsce na podpis + miniatury
     */
    padding:
        68px
        50px
        120px
        50px;

    box-sizing: border-box;

    transition:
        padding 0.42s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

}


/* ==========================================================
   ZDJĘCIE
   ========================================================== */

.nlb__image {

    position: absolute;

    display: block;

    width: auto;

    height: auto;

    max-width: none;

    max-height: none;

    /*
     * Delikatna biała ramka.
     */
    padding: 1px;

    border: 3px solid #fff;
	border-radius:8px;

    background: #fff;

    box-sizing: content-box;

    user-select: none;

    -webkit-user-drag: none;

    cursor: default;

    transform-origin:
        center center;

    will-change:
        transform,
        width,
        height,
        left,
        top;

    opacity: 0;

    transition:

        opacity 0.85s ease,

        filter 0.85s ease,

        width 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),

        height 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),

        left 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),

        top 0.42s cubic-bezier(0.22, 0.61, 0.36, 1),

        transform 0.35s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

}


.nlb__image.is-ready {

    opacity: 1;

    filter:
        none;

}


.nlb__image.is-zoomed {

    cursor: grab;

}


.nlb__image.is-dragging {

    cursor: grabbing;

    transition: none;

}


/* ==========================================================
   ANIMACJA ZMIANY ZDJĘCIA — LIGHTBOX 2
   ========================================================== */

/*
 * Biel jest osobną warstwą nad zdjęciem.
 * Dzięki temu zdjęcie nigdy nie jest filtrowane ani odwracane
 * do negatywu. Stare zdjęcie zostaje pod spodem, a nowe jest
 * ładowane pod białą zasłoną.
 */

.nlb__transition-white {

    position: absolute;

    z-index: 10;

    box-sizing: border-box;

    background: #fff;

    border-radius: 8px;

    opacity: 0;

    pointer-events: none;

    /*
     * Biel nakładamy TYLKO na obszar zdjęcia, a nie na cały stage.
     * Przy zdejmowaniu bieli nowe zdjęcie wyłania się spokojnie przez
     * około 0,8 s.
     */
    transition:
        opacity 0.80s ease-in-out,
        left 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        top 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        width 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        height 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);

}


.nlb__transition-white.is-covering {

    opacity: 1;

    transition:
        opacity 0.16s ease-out,
        left 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        top 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        width 0.48s cubic-bezier(0.22, 0.61, 0.36, 1),
        height 0.48s cubic-bezier(0.22, 0.61, 0.36, 1);

}


/*
 * Podczas przejścia nie zmieniamy jasności ani filtrów zdjęcia.
 * Stare zdjęcie pozostaje widoczne aż do pełnego przykrycia bielą.
 */

.nlb--changing
.nlb__image {

    filter: none;

}


/* ==========================================================
   PRZYCISK ZAMKNIĘCIA
   ========================================================== */

.nlb__close {

    position: absolute;

    z-index: 20;

    top: 16px;

    right: 18px;

    width: 48px;

    height: 48px;

    border: 0;

    border-radius: 50%;

    color:
        var(--nlb-text);

    background:
        var(--nlb-button);

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:

        background 0.15s ease,

        transform 0.15s ease;

}


.nlb__close:hover {

    background:
        var(--nlb-button-hover);

}


.nlb__close:active {

    transform:
        scale(0.90);

}


/* ==========================================================
   NAWIGACJA
   ========================================================== */

.nlb__nav {

    position: absolute;

    z-index: 15;

    top: 50%;

    width: 56px;

    height: 76px;

    margin-top: -38px;

    border: 0;

    border-radius: 14px;

    color: white;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    font-size: 48px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:

        background 0.15s ease,

        transform 0.15s ease;

}


.nlb__nav:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.20
        );

}


.nlb__prev {

    left: 18px;

}


.nlb__next {

    right: 18px;

}


.nlb__nav:active {

    transform:
        scale(0.92);

}


.nlb__nav:disabled {

    opacity: 0.25;

    pointer-events: none;

}


/* ==========================================================
   GÓRNY TOOLBAR
   ========================================================== */

.nlb__topbar {

    position: absolute;

    z-index: 20;

    top: 3px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 5px;

    border-radius: 10px;

    background:
        rgba(
            35,
            35,
            40,
            0.90
        );

    box-shadow:

        0 8px 30px
        rgba(
            0,
            0,
            0,
            0.30
        );

    backdrop-filter:
        blur(12px);

}


/* ==========================================================
   PRZYCISKI TOOLBARA
   ========================================================== */

.nlb__button {

    width: 40px;

    height: 40px;

    padding: 0;

    border: 0;

    border-radius: 7px;

    color:
        var(--nlb-text);

    background:
        transparent;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:

        background 0.15s ease,

        transform 0.15s ease;

}


.nlb__button:hover {

    background:
        var(--nlb-button-hover);

}


.nlb__button:active {

    transform:
        scale(0.90);

}


.nlb__separator {

    width: 1px;

    height: 25px;

    margin: 0 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.16
        );

}


/* ==========================================================
   PODPIS
   ========================================================== */

.nlb__caption {

    position: absolute;

    z-index: 12;

    left: 50%;

    bottom: 112px;

    transform:
        translateX(-50%);

    max-width:
        min(
            900px,
            calc(
                100vw - 40px
            )
        );

    padding:
        8px 16px;

    border-radius: 8px;

    color: white;

    background:
        rgba(
            0,
            0,
            0,
            0.50
        );

    font-size: 14px;

    line-height: 1.4;

    text-align: center;

    backdrop-filter:
        blur(8px);

}


.nlb__caption[hidden] {

    display: none;

}


/* ==========================================================
   LICZNIK
   ========================================================== */

.nlb__counter {

    position: absolute;

    z-index: 20;

    top: 22px;

    left: 20px;

    color:
        var(--nlb-muted);

    font-size: 14px;

    pointer-events: none;

}


/* ==========================================================
   MINIATURY
   ========================================================== */

.nlb__thumbs {

    position: absolute;

    z-index: 18;

    left: 0;

    right: 0;

    bottom: 0;

    height: 92px;

    padding:
        8px 80px;

    box-sizing: border-box;

    background:
        rgba(
            10,
            10,
            12,
            0.90
        );

    backdrop-filter:
        blur(12px);

    transform:
        translateY(0);

    transition:
        transform 0.30s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

}


/* ==========================================================
   UKRYCIE MINIATUR
   ========================================================== */

.nlb--no-thumbs
.nlb__thumbs,
.nlb[data-thumbs="hidden"]
.nlb__thumbs {

    transform:
        translateY(100%);

    visibility: hidden;
    pointer-events: none;

}


/*
 * Po schowaniu miniaturek scena odzyskuje ich miejsce.
 * Zdjęcie może więc wykorzystać praktycznie całą wysokość lightboxa.
 */
.nlb--no-thumbs
.nlb__stage,
.nlb[data-thumbs="hidden"]
.nlb__stage {

    padding-top: 68px;
    padding-bottom: 40px;

}


.nlb--no-thumbs
.nlb__caption {

    bottom: 25px;

}


/* ==========================================================
   TRACK MINIATUR
   ========================================================== */

.nlb__thumbs-track {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    overflow-x: auto;

    overflow-y: hidden;

    scrollbar-width: thin;

}


/* ==========================================================
   MINIATURA
   ========================================================== */

.nlb__thumb {

    flex:
        0 0 auto;

    width: 88px;

    height: 66px;

    padding: 0;

    border: 2px solid transparent;

    border-radius: 5px;

    background:
        transparent;

    overflow: hidden;

    opacity: 0.65;

    cursor: pointer;

    transition:

        opacity 0.20s ease,

        border-color 0.20s ease,

        transform 0.20s ease;

}


.nlb__thumb:hover {

    opacity: 1;

    transform:
        translateY(-2px);

}


.nlb__thumb.is-active {

    opacity: 1;

    border-color:
        white;

    transform:
        scale(1.04);

}


.nlb__thumb img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}


/* ==========================================================
   PASEK POSTĘPU
   ========================================================== */

.nlb__progress {

    position: absolute;

    z-index: 30;

    left: 0;

    right: 0;

    bottom: 92px;

    height: 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.nlb--no-thumbs
.nlb__progress {

    bottom: 0;

}


.nlb__progress-bar {

    width: 0%;

    height: 100%;

    background:
        white;

    box-shadow:

        0 0 8px
        rgba(
            255,
            255,
            255,
            0.6
        );

}



.nlb--no-thumbs
.nlb__progress,
.nlb[data-thumbs="hidden"]
.nlb__progress {

    display: none;

}

/* ==========================================================
   ŁADOWANIE
   ========================================================== */

.nlb__loading {

    position: absolute;

    z-index: 5;

    width: 42px;

    height: 42px;

    border:

        3px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    border-top-color:
        white;

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    animation:
        nlb-spin
        0.75s
        linear
        infinite;

}


.nlb__loading.is-visible {

    opacity: 1;

}


@keyframes nlb-spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* ==========================================================
   FULLSCREEN
   ========================================================== */

.nlb:fullscreen {

    width: 100vw;

    height: 100vh;

}


/* ==========================================================
   TELEFONY
   ========================================================== */
/*
@media (
    max-width: 700px
) {

    .nlb__stage {

        padding:
            55px
            30px
            105px
            30px;

    }


    .nlb__topbar {

        top: 8px;

        max-width:
            calc(
                100vw - 70px
            );

        overflow-x: auto;

    }


    .nlb__button {

        width: 35px;

        height: 35px;

        font-size: 18px;

        flex-shrink: 0;

    }


    .nlb__nav {

        width: 42px;

        height: 60px;

        margin-top: -30px;

        font-size: 34px;

    }


    .nlb__prev {

        left: 5px;

    }


    .nlb__next {

        right: 5px;

    }


    .nlb__thumbs {

        height: 76px;

        padding:
            6px 10px;

    }


    .nlb__thumb {

        width: 70px;

        height: 53px;

    }


    .nlb__progress {

        bottom: 76px;

    }


    .nlb--no-thumbs
    .nlb__progress {

        bottom: 0;

    }


    .nlb--no-thumbs
    .nlb__stage {

        padding-bottom: 70px;

    }


    .nlb__caption {

        bottom: 96px;

        font-size: 13px;

    }


    .nlb--no-thumbs
    .nlb__caption {

        bottom: 18px;

    }

}
*/

/* ==========================================================
   MAŁE EKRANY POZIOME
   ========================================================== */
/*
@media (
    max-height: 500px
) {

    .nlb__thumbs {

        height: 70px;

    }


    .nlb__thumb {

        width: 72px;

        height: 54px;

    }


    .nlb__progress {

        bottom: 70px;

    }


    .nlb__caption {

        bottom: 78px;

    }

}

*/