/* ep-lightbox — overlay for the Galerie + Bild blocks.
   Frontend asset: editor tokens are not available here,
   hence two local base colors. Alphas via color-mix(). */
.ep-lightbox {
    --ep-lb-light: #fff;
    --ep-lb-dark:  #111;

    position: fixed;
    inset: 0;
    z-index: 1000002; /* above the header chrome's highest z-index (#actionbar/.branding: 1000001) */
    background: color-mix(in srgb, var(--ep-lb-dark) 92%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 64px);
    cursor: zoom-out;
    -webkit-tap-highlight-color: transparent;
}

.ep-lightbox.is-open {
    display: flex;
    animation: ep-lightbox-fade 180ms ease-out;
}

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

.ep-lightbox__figure {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: default;
}

.ep-lightbox__img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--ep-lb-dark) 50%, transparent);
    background: var(--ep-lb-dark);
}

.ep-lightbox__caption {
    color: var(--ep-lb-light);
    font-size: 14px;
    text-align: center;
    opacity: 0.9;
    max-width: 70ch;
}

.ep-lightbox__close,
.ep-lightbox__nav {
    position: absolute;
    background: color-mix(in srgb, var(--ep-lb-light) 10%, transparent);
    color: var(--ep-lb-light);
    border: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    padding: 0;
}

.ep-lightbox__close:hover,
.ep-lightbox__nav:hover,
.ep-lightbox__close:focus-visible,
.ep-lightbox__nav:focus-visible {
    background: color-mix(in srgb, var(--ep-lb-light) 25%, transparent);
    outline: none;
}

.ep-lightbox__close {
    top: 16px;
    right: 16px;
}

.ep-lightbox__prev {
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.ep-lightbox__next {
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 640px) {
    .ep-lightbox__close,
    .ep-lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }
}

/* Clickable gallery / bild images get a subtle zoom cursor */
.block-galerie a[href$=".jpg"],
.block-galerie a[href$=".jpeg"],
.block-galerie a[href$=".png"],
.block-galerie a[href$=".webp"],
.block-galerie a[href$=".gif"],
.block-bild    a[href$=".jpg"],
.block-bild    a[href$=".jpeg"],
.block-bild    a[href$=".png"],
.block-bild    a[href$=".webp"],
.block-bild    a[href$=".gif"] {
    cursor: zoom-in;
}