/* Csuhévilág – Modern Lightbox V2 */

.modern-lightbox {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 44%),
        rgba(20,18,16,.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modern-lightbox.open { display: block; }

.modern-lightbox .lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
}

.modern-lightbox .lightbox-dialog {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    transform: none;
    display: grid;
    grid-template-rows: minmax(0,1fr) auto auto;
    place-items: center;
    padding: 54px 82px 24px;
    pointer-events: none;
}

.modern-lightbox .lightbox-dialog > * { pointer-events: auto; }

.modern-lightbox #lightboxImage {
    grid-row: 1;
    max-width: min(88vw,1500px);
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(244,239,229,.96);
    box-shadow: 0 30px 90px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.08);
    user-select: none;
    -webkit-user-drag: none;
    touch-action: pan-y;
}

.modern-lightbox #lightboxImage.modern-lightbox-image-enter {
    animation: csuhe-lightbox-in .24s ease both;
}

@keyframes csuhe-lightbox-in {
    from { opacity:.25; transform:scale(.975); filter:blur(2px); }
    to   { opacity:1; transform:scale(1); filter:blur(0); }
}

.modern-lightbox .lightbox-caption {
    grid-row: 2;
    margin: 13px 0 0;
    max-width: min(80vw,900px);
    color: rgba(255,255,255,.86);
    font-size: 15px;
    text-align: center;
}

.modern-lightbox .lightbox-close {
    position: fixed;
    top: 22px;
    right: 26px;
    z-index: 8;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    color: #fff;
    font-size: 31px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .18s ease, transform .18s ease, opacity .25s ease;
}

.modern-lightbox .lightbox-close:hover {
    background: rgba(255,255,255,.18);
    transform: rotate(4deg) scale(1.04);
}

.modern-lightbox-nav {
    position: fixed;
    top: 50%;
    z-index: 7;
    width: 58px;
    height: 74px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.075);
    color: rgba(255,255,255,.96);
    cursor: pointer;
    transform: translateY(-50%);
    backdrop-filter: blur(9px);
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    transition: background .18s ease, transform .18s ease, opacity .25s ease;
}

.modern-lightbox-nav span {
    display: block;
    margin-top: -5px;
    font-size: 54px;
    line-height: 1;
    font-weight: 200;
}

.modern-lightbox-prev { left: 24px; }
.modern-lightbox-next { right: 24px; }

.modern-lightbox-nav:hover { background: rgba(255,255,255,.16); }
.modern-lightbox-prev:hover { transform: translateY(-50%) translateX(-3px); }
.modern-lightbox-next:hover { transform: translateY(-50%) translateX(3px); }

.modern-lightbox-counter {
    position: fixed;
    top: 27px;
    left: 50%;
    z-index: 7;
    transform: translateX(-50%);
    min-width: 72px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.84);
    font-size: 13px;
    text-align: center;
    letter-spacing: .08em;
    backdrop-filter: blur(8px);
    transition: opacity .25s ease;
}

.modern-lightbox-thumbs {
    grid-row: 3;
    display: flex;
    gap: 9px;
    width: min(84vw,1000px);
    margin-top: 15px;
    padding: 7px 4px 3px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
    scroll-snap-type: x proximity;
    transition: opacity .25s ease, transform .25s ease;
}

.modern-lightbox-thumb {
    flex: 0 0 68px;
    width: 68px;
    height: 50px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    opacity: .48;
    cursor: pointer;
    scroll-snap-align: center;
    transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}

.modern-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.modern-lightbox-thumb:hover {
    opacity: .8;
    transform: translateY(-1px);
}

.modern-lightbox-thumb.active {
    opacity: 1;
    border-color: rgba(255,255,255,.82);
    box-shadow: 0 0 0 2px rgba(185,130,110,.55);
}

.modern-lightbox.ui-hidden .modern-lightbox-nav,
.modern-lightbox.ui-hidden .lightbox-close,
.modern-lightbox.ui-hidden .modern-lightbox-counter {
    opacity: .16;
}

.modern-lightbox.ui-hidden .modern-lightbox-thumbs {
    opacity: .14;
    transform: translateY(6px);
}

@media (hover:none) {
    .modern-lightbox.ui-hidden .modern-lightbox-nav,
    .modern-lightbox.ui-hidden .lightbox-close,
    .modern-lightbox.ui-hidden .modern-lightbox-counter,
    .modern-lightbox.ui-hidden .modern-lightbox-thumbs {
        opacity: .72;
        transform: none;
    }
}

@media (max-width:760px) {
    .modern-lightbox .lightbox-dialog {
        padding: 64px 14px 18px;
    }

    .modern-lightbox #lightboxImage {
        max-width: 94vw;
        max-height: 70vh;
        border-radius: 7px;
    }

    .modern-lightbox-nav {
        width: 46px;
        height: 62px;
        border-radius: 15px;
        background: rgba(20,18,16,.32);
    }

    .modern-lightbox-nav span { font-size: 44px; }
    .modern-lightbox-prev { left: 8px; }
    .modern-lightbox-next { right: 8px; }

    .modern-lightbox .lightbox-close {
        top: 13px;
        right: 13px;
        width: 42px;
        height: 42px;
    }

    .modern-lightbox-counter { top: 16px; }

    .modern-lightbox-thumbs {
        width: 94vw;
        gap: 7px;
    }

    .modern-lightbox-thumb {
        flex-basis: 58px;
        width: 58px;
        height: 44px;
    }

    .modern-lightbox .lightbox-caption {
        max-width: 92vw;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modern-lightbox,
    .modern-lightbox * {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}