/*
==========================================================
Ueberdiek Ozean & Photographie
Premium Lightbox
Datei: assets/css/lightbox.css
Version: 0.9.5
==========================================================
*/

body.uo-lightbox-open {
    overflow: hidden;
}


/* -------------------------------------------------------
   Lightbox
------------------------------------------------------- */

.uo-lightbox {
    position: fixed;
    inset: 0;

    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(1rem, 3vw, 2.5rem);

    background: rgba(3, 8, 12, .97);
    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .32s ease,
        visibility 0s linear .32s;
}

.uo-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transition-delay: 0s;
}


/* -------------------------------------------------------
   Hintergrund
------------------------------------------------------- */

.uo-lightbox__backdrop {
    position: absolute;
    inset: 0;
}


/* -------------------------------------------------------
   Inhalt
------------------------------------------------------- */

.uo-lightbox__content {
    position: relative;
    z-index: 2;

    width: min(92vw, 1500px);
    max-height: 94vh;

    display: flex;
    flex-direction: column;
    align-items: center;

    opacity: 0;
    transform: scale(.985);

    transition:
        opacity .28s ease,
        transform .32s ease;
}

.uo-lightbox.is-open .uo-lightbox__content {
    opacity: 1;
    transform: scale(1);
}


/* -------------------------------------------------------
   Bild
------------------------------------------------------- */

.uo-lightbox__image {
    display: block;

    max-width: 100%;
    max-height: calc(94vh - 105px);

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    opacity: 1;
    transform: scale(1);

    box-shadow:
        0 28px 75px rgba(0, 0, 0, .56);

    transition:
        opacity .18s ease,
        transform .18s ease;
}

.uo-lightbox__image.is-changing {
    opacity: .18;
    transform: scale(.995);
}


/* -------------------------------------------------------
   Bildinformationen
------------------------------------------------------- */

.uo-lightbox__caption {
    width: 100%;

    margin-top: .9rem;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;

    color: #fff;
}

.uo-lightbox__title {
    margin: 0 0 .25rem;

    color: #fff;

    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 500;
    line-height: 1.3;
}

.uo-lightbox__meta {
    margin: 0;

    color: rgba(255, 255, 255, .7);

    font-size: .94rem;
    line-height: 1.55;
}

.uo-lightbox__copyright {
    margin: .2rem 0 0;

    color: rgba(255, 255, 255, .44);

    font-size: .79rem;
    line-height: 1.5;
}

.uo-lightbox__counter {
    flex: 0 0 auto;

    margin: 0;

    color: rgba(255, 255, 255, .55);

    font-size: .9rem;
    white-space: nowrap;
}


/* -------------------------------------------------------
   Schließen
------------------------------------------------------- */

.uo-lightbox__close {
    position: absolute;

    top: -3.5rem;
    right: 0;

    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, .1);
    color: #fff;

    cursor: pointer;

    font-size: 1.75rem;
    line-height: 1;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.uo-lightbox__close:hover,
.uo-lightbox__close:focus-visible {
    background: rgba(255, 255, 255, .2);
    transform: scale(1.06);
}


/* -------------------------------------------------------
   Navigation
------------------------------------------------------- */

.uo-lightbox__prev,
.uo-lightbox__next {
    position: absolute;

    top: 50%;

    width: 54px;
    height: 64px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background: rgba(255, 255, 255, .07);
    color: #fff;

    cursor: pointer;

    font-size: 1.85rem;
    line-height: 1;

    opacity: .42;

    transform: translateY(-50%);

    transition:
        opacity .25s ease,
        background-color .25s ease,
        transform .25s ease;
}

.uo-lightbox__prev {
    left: -82px;
}

.uo-lightbox__next {
    right: -82px;
}

.uo-lightbox:hover .uo-lightbox__prev,
.uo-lightbox:hover .uo-lightbox__next,
.uo-lightbox__prev:focus-visible,
.uo-lightbox__next:focus-visible {
    opacity: 1;
}

.uo-lightbox__prev:hover,
.uo-lightbox__next:hover,
.uo-lightbox__prev:focus-visible,
.uo-lightbox__next:focus-visible {
    background: rgba(255, 255, 255, .17);
}

.uo-lightbox__prev:hover,
.uo-lightbox__prev:focus-visible {
    transform: translateY(-50%) translateX(-2px);
}

.uo-lightbox__next:hover,
.uo-lightbox__next:focus-visible {
    transform: translateY(-50%) translateX(2px);
}


/* -------------------------------------------------------
   Fokus
------------------------------------------------------- */

.uo-lightbox__close:focus-visible,
.uo-lightbox__prev:focus-visible,
.uo-lightbox__next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}


/* -------------------------------------------------------
   Tablet
------------------------------------------------------- */

@media (max-width: 1100px) {

    .uo-lightbox__prev {
        left: 1rem;
    }

    .uo-lightbox__next {
        right: 1rem;
    }

    .uo-lightbox__prev,
    .uo-lightbox__next {
        opacity: .85;
        background: rgba(0, 0, 0, .34);
    }

}


/* -------------------------------------------------------
   Smartphone
------------------------------------------------------- */

@media (max-width: 700px) {

    .uo-lightbox {
        padding:
            max(4.5rem, env(safe-area-inset-top))
            1rem
            max(1rem, env(safe-area-inset-bottom));
    }

    .uo-lightbox__content {
        width: 100%;
        max-height: 100%;
    }

    .uo-lightbox__image {
        max-height: calc(100vh - 155px);
        border-radius: 6px;
    }

    .uo-lightbox__caption {
        margin-top: .75rem;

        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }

    .uo-lightbox__title {
        font-size: 1.1rem;
    }

    .uo-lightbox__meta {
        font-size: .82rem;
    }

    .uo-lightbox__copyright,
    .uo-lightbox__counter {
        font-size: .75rem;
    }

    .uo-lightbox__close {
        position: fixed;

        top: max(.75rem, env(safe-area-inset-top));
        right: max(.75rem, env(safe-area-inset-right));

        width: 42px;
        height: 42px;
    }

    .uo-lightbox__prev,
    .uo-lightbox__next {
        width: 40px;
        height: 56px;

        opacity: .9;

        font-size: 1.35rem;
    }

    .uo-lightbox__prev {
        left: .35rem;
    }

    .uo-lightbox__next {
        right: .35rem;
    }

}


/* -------------------------------------------------------
   Reduzierte Bewegung
------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .uo-lightbox,
    .uo-lightbox__content,
    .uo-lightbox__image,
    .uo-lightbox__close,
    .uo-lightbox__prev,
    .uo-lightbox__next {
        transition: none;
    }

}