/**
 * raris-lightbox.css — stilurile vizualizatorului de imagini pe tot ecranul.
 * Pereche cu public/js/raris-lightbox.js. Inlocuieste css/lightbox2.css.
 */

.raris-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    background: rgba(8, 12, 18, 0.94);
    -webkit-backdrop-filter: saturate(120%) blur(6px);
    backdrop-filter: saturate(120%) blur(6px);
    opacity: 0;
    transition: opacity .22s ease;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.raris-lb.is-open { display: block; opacity: 1; }
.raris-lb.no-anim,
.raris-lb.no-anim * { transition: none !important; animation: none !important; }

/* Blocheaza scroll-ul paginii cat timp e deschis. */
body.raris-lb-open { overflow: hidden; }

/* --- scena --- */
.raris-lb-stage {
    position: absolute;
    inset: 0 0 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 76px;
    box-sizing: border-box;
}
.raris-lb-img {
    max-width: 96%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
    background: #0b0f14;
    cursor: zoom-in;
    transition: opacity .18s ease, transform .18s ease;
    opacity: 1;
    border-radius: 2px;
}
.raris-lb.is-loading .raris-lb-img { opacity: 0; }
.raris-lb.is-zoomed .raris-lb-img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    cursor: grab;
    transition: none;
}
.raris-lb.is-zoomed .raris-lb-stage { overflow: hidden; }

/* --- spinner --- */
.raris-lb-spinner {
    position: absolute;
    width: 42px;
    height: 42px;
    border: 3px solid rgba(255, 255, 255, .22);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: raris-lb-spin .8s linear infinite;
    display: none;
}
.raris-lb.is-loading .raris-lb-spinner { display: block; }
@keyframes raris-lb-spin { to { transform: rotate(360deg); } }

/* --- butoane --- */
.raris-lb-close,
.raris-lb-nav {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .09);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.raris-lb-close:hover,
.raris-lb-nav:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4); }
.raris-lb-close:focus-visible,
.raris-lb-nav:focus-visible { outline: 2px solid #4db2ff; outline-offset: 2px; }

.raris-lb-close {
    top: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 30px;
    line-height: 1;
    padding: 0 0 3px;
}
.raris-lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 86px;
    border-radius: 6px;
    font-size: 26px;
}
.raris-lb-nav:hover { transform: translateY(-50%) scale(1.04); }
.raris-lb-prev { left: 14px; }
.raris-lb-next { right: 14px; }

/* --- bara de jos: legenda + contor --- */
.raris-lb-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 0 76px;
    box-sizing: border-box;
    color: rgba(255, 255, 255, .92);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
}
.raris-lb-caption {
    max-width: 70ch;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.raris-lb-counter {
    flex: 0 0 auto;
    font-weight: bold;
    color: rgba(255, 255, 255, .65);
    letter-spacing: .5px;
}

/* --- telefon --- */
@media (max-width: 1080px) {
    .raris-lb-stage { padding: 14px 8px; inset: 0 0 58px 0; }
    .raris-lb-img { max-width: 100%; }
    .raris-lb-close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 26px; }
    .raris-lb-nav {
        width: 44px;
        height: 64px;
        font-size: 20px;
        background: rgba(255, 255, 255, .12);
    }
    .raris-lb-prev { left: 6px; }
    .raris-lb-next { right: 6px; }
    .raris-lb-bar { height: 58px; padding: 0 12px; font-size: 12px; gap: 10px; }
    .raris-lb-caption { -webkit-line-clamp: 2; }
}

/* Ecrane foarte inguste: sagetile coboara langa contor, ca sa nu acopere poza. */
@media (max-width: 480px) {
    .raris-lb-nav { top: auto; bottom: 66px; transform: none; height: 44px; width: 44px; border-radius: 50%; }
    .raris-lb-nav:hover { transform: none; }
}