/*==================================================
LEGANZA — IMAGE INSPECT LIGHTBOX
Отдельный lightbox для просмотра изображений
==================================================*/

.has-image-inspect{
    position:relative !important;
}

/* Кнопка просмотра изображения */
.image-inspect-trigger{
    position:absolute;
    left:18px;
    bottom:18px;
    z-index:25;

    width:46px;
    height:46px;
    padding:0;

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

    border:1px solid rgba(255,255,255,.42);
    border-radius:50%;
    background:rgba(8,8,8,.72);
    color:#fff;

    box-shadow:
        0 8px 26px rgba(0,0,0,.28),
        inset 0 0 0 1px rgba(185,141,79,.10);

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);

    cursor:pointer;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease,
        color .25s ease;
}

.image-inspect-trigger:hover{
    transform:scale(1.07);
    border-color:#c99a57;
    background:#b98d4f;
    color:#090909;
}

.image-inspect-trigger:focus-visible{
    outline:2px solid #d5aa6a;
    outline-offset:3px;
}

.image-inspect-trigger svg{
    width:21px;
    height:21px;
    display:block;
    pointer-events:none;
}

/* В карточках ссылка "Подробнее" остается доступна рядом со значком */
.collection-card .ajax-lightbox-link,
.material-card .material-more,
.project .project-more{
    position:relative;
    z-index:26;
}

/* HERO: значок должен быть выше фоновых слоев */
.hero > .image-inspect-trigger{
    z-index:30;
}

/* Engineering: выше hotspot-слоя */
.engineering-image > .image-inspect-trigger{
    z-index:40;
}

/*==================================================
LIGHTBOX
==================================================*/
.image-inspect-lightbox{
    position:fixed;
    inset:0;
    z-index:10050;

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

    padding:22px;

    background:rgba(3,3,3,.94);
    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:opacity .22s ease, visibility .22s ease;
}

.image-inspect-lightbox.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.image-inspect-stage{
    position:relative;
    width:100%;
    height:100%;

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

    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}

.image-inspect-stage.is-dragging{
    cursor:grabbing;
}

.image-inspect-image{
    display:block;

    max-width:92vw;
    max-height:84vh;
    width:auto;
    height:auto;

    object-fit:contain;

    transform:translate3d(0,0,0) scale(1);
    transform-origin:center center;
    will-change:transform;

    box-shadow:0 22px 70px rgba(0,0,0,.48);
    pointer-events:none;
}

/* Верхняя панель */
.image-inspect-close{
    position:absolute;
    top:20px;
    right:22px;
    z-index:10055;

    width:48px;
    height:48px;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;
    background:rgba(10,10,10,.76);
    color:#fff;

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

    font-size:34px;
    font-weight:300;
    line-height:1;

    cursor:pointer;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.image-inspect-close:hover{
    background:#fff;
    color:#111;
    border-color:#fff;
}

/* Zoom controls */
.image-inspect-controls{
    position:absolute;
    left:50%;
    bottom:22px;
    z-index:10055;

    transform:translateX(-50%);

    display:flex;
    align-items:center;
    gap:8px;

    padding:7px;

    border:1px solid rgba(255,255,255,.20);
    border-radius:999px;
    background:rgba(10,10,10,.78);

    box-shadow:0 12px 34px rgba(0,0,0,.34);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.image-inspect-control{
    width:44px;
    height:44px;
    padding:0;

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

    border:1px solid rgba(255,255,255,.20);
    border-radius:50%;
    background:transparent;
    color:#fff;

    font-size:26px;
    line-height:1;

    cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.image-inspect-control:hover{
    background:#b98d4f;
    border-color:#b98d4f;
    color:#090909;
}

.image-inspect-control:disabled{
    opacity:.35;
    cursor:default;
}

.image-inspect-scale{
    min-width:58px;
    text-align:center;
    color:#fff;
    font-size:12px;
    letter-spacing:.08em;
    font-variant-numeric:tabular-nums;
}

.image-inspect-hint{
    position:absolute;
    left:22px;
    top:24px;
    z-index:10055;

    color:rgba(255,255,255,.66);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Body lock. Не конфликтует с текущим mobile-menu lock. */
body.image-inspect-open{
    overflow:hidden !important;
}

/* Tablet */
@media (max-width:1200px){
    .image-inspect-trigger{
        width:44px;
        height:44px;
        left:16px;
        bottom:16px;
    }
}

/* Mobile */
@media (max-width:768px){
    .image-inspect-lightbox{
        padding:10px;
    }

    .image-inspect-trigger{
        width:42px;
        height:42px;
        left:14px;
        bottom:14px;
    }

    .image-inspect-trigger svg{
        width:19px;
        height:19px;
    }

    .image-inspect-image{
        max-width:96vw;
        max-height:80dvh;
    }

    .image-inspect-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
    }

    .image-inspect-controls{
        bottom:14px;
    }

    .image-inspect-hint{
        display:none;
    }
}

/* Очень узкие экраны */
@media (max-width:390px){
    .image-inspect-trigger{
        width:40px;
        height:40px;
        left:12px;
        bottom:12px;
    }

    .image-inspect-controls{
        width:auto;
        max-width:calc(100vw - 20px);
    }

    .image-inspect-control{
        width:40px;
        height:40px;
    }
}

@media (prefers-reduced-motion:reduce){
    .image-inspect-lightbox,
    .image-inspect-trigger{
        transition:none !important;
    }
}


/*==================================================
КАРТОЧКИ С "ПОДРОБНЕЕ"
Значок просмотра переносим вправо, чтобы он
не пересекался со ссылкой "Подробнее".
==================================================*/
.collection-card > .image-inspect-trigger,
.material-card > .image-inspect-trigger,
.project > .image-inspect-trigger{
    left:auto !important;
    right:18px !important;
}

/* Tablet */
@media (max-width:1200px){
    .collection-card > .image-inspect-trigger,
    .material-card > .image-inspect-trigger,
    .project > .image-inspect-trigger{
        left:auto !important;
        right:16px !important;
    }
}

/* Mobile */
@media (max-width:768px){
    .collection-card > .image-inspect-trigger,
    .material-card > .image-inspect-trigger,
    .project > .image-inspect-trigger{
        left:auto !important;
        right:14px !important;
    }
}

/* Narrow mobile */
@media (max-width:390px){
    .collection-card > .image-inspect-trigger,
    .material-card > .image-inspect-trigger,
    .project > .image-inspect-trigger{
        left:auto !important;
        right:12px !important;
    }
}