/**
 * Ae lightbox styling — vervanger voor fancybox CSS.
 * Native <dialog> krijgt z'n eigen modal-overlay via ::backdrop.
 */

.ae-lightbox {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #fff;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}

.ae-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.ae-lightbox__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ae-lightbox__content img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.ae-lightbox__content iframe {
    width: min(90vw, 1280px);
    aspect-ratio: 16 / 9;
    max-height: 90vh;
    border: 0;
    display: block;
    background: #000;
    border-radius: 4px;
}

/* Knoppen — close + prev/next */
.ae-lightbox__close,
.ae-lightbox__prev,
.ae-lightbox__next {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
    padding: 0;
    transition: background 0.2s ease, transform 0.15s ease;
    z-index: 10;
}

.ae-lightbox__close:hover,
.ae-lightbox__prev:hover,
.ae-lightbox__next:hover,
.ae-lightbox__close:focus-visible,
.ae-lightbox__prev:focus-visible,
.ae-lightbox__next:focus-visible {
    background: rgba(0, 0, 0, 0.85);
    outline: none;
}

.ae-lightbox__close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
}

.ae-lightbox__prev,
.ae-lightbox__next {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 64px;
    border-radius: 4px;
    font-size: 36px;
}

.ae-lightbox__prev:hover,
.ae-lightbox__next:hover { transform: translateY(-50%) scale(1.05); }

.ae-lightbox__prev { left: 16px; }
.ae-lightbox__next { right: 16px; }

/* Mobile: kleinere knoppen + minder padding */
@media (max-width: 600px) {
    .ae-lightbox__close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
    .ae-lightbox__prev,
    .ae-lightbox__next {
        width: 40px;
        height: 52px;
        font-size: 28px;
    }
    .ae-lightbox__prev { left: 8px; }
    .ae-lightbox__next { right: 8px; }
    .ae-lightbox__content img {
        max-width: 100vw;
        max-height: 90vh;
    }
}