/* ========================================
   HENGTAI CASE LIGHTBOX
   ======================================== */

.ht-case-image {
    cursor: zoom-in;
}


/* 灯箱背景 */

.ht-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    padding: 40px;
    box-sizing: border-box;
    
    background: rgba(20, 18, 17, 0.92);
    
    opacity: 0;
    visibility: hidden;
    
    transition:
        opacity .25s ease,
        visibility .25s ease;
}


/* 打开状态 */

.ht-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}


/* 图片容器 */

.ht-lightbox-inner {
    position: relative;
    
    max-width: 92vw;
    max-height: 90vh;
    
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 大图 */

.ht-lightbox-image {
    display: block;
    
    max-width: 92vw;
    max-height: 88vh;
    
    width: auto;
    height: auto;
    
    object-fit: contain;
    
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    
    transform: scale(.96);
    transition: transform .3s ease;
}


.ht-lightbox.is-active .ht-lightbox-image {
    transform: scale(1);
}


/* 关闭按钮 */

.ht-lightbox-close {
    position: fixed;
    
    top: 24px;
    right: 28px;
    
    width: 44px;
    height: 44px;
    
    padding: 0;
    margin: 0;
    
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    
    background: rgba(0,0,0,.25);
    
    color: #ffffff;
    
    font-family: Arial, sans-serif;
    font-size: 28px;
    font-weight: 300;
    line-height: 40px;
    
    text-align: center;
    
    cursor: pointer;
    
    transition:
        background .2s ease,
        border-color .2s ease;
}


.ht-lightbox-close:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.7);
}


/* 防止打开灯箱时页面继续滚动 */

body.ht-lightbox-open {
    overflow: hidden !important;
}


/* 手机 */

@media screen and (max-width: 768px) {

    .ht-lightbox {
        padding: 20px;
    }

    .ht-lightbox-image {
        max-width: 94vw;
        max-height: 82vh;
    }

    .ht-lightbox-close {
        top: 15px;
        right: 15px;
        
        width: 40px;
        height: 40px;
        
        font-size: 25px;
        line-height: 36px;
    }

}