/* lightbox.css - 图片浮层样式 */

/* 图片浮层容器 */
.image-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

/* 黑色透明背景 */
.lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* 降低透明度，从0.9改为0.7 */
    cursor: pointer;
    z-index: 10000;
    /* 确保在最底层 */
}

/* 图片容器 - 在详情页信息展示区域内水平居中，不覆盖sidebar */
.lightbox-image-container {
    position: absolute;
    /* PC端：从侧边栏右侧开始，在详情页信息展示区域内水平居中 */
    left: 260px;
    /* 从侧边栏右侧开始（与 #main-content 的 margin-left 一致） */
    right: 0;
    /* 右侧对齐到视口边缘 */
    width: calc(100vw - 260px);
    /* 占满详情页信息展示区域的宽度 */
    max-height: 100vh;
    z-index: 10002;
    /* 确保在overlay上方 */
    overflow-y: auto;
    overflow-x: hidden;
    /* 允许垂直滚动，但不显示滚动条 */
    scrollbar-width: none;
    /* Firefox隐藏滚动条 */
    -ms-overflow-style: none;
    /* IE隐藏滚动条 */
    padding: 40px calc(var(--padding-unit) * 2);
    /* 上下留白，左右padding与详情页一致 */
    pointer-events: auto;
    /* 确保图片容器可以交互 */
}

/* Webkit隐藏滚动条 */
.lightbox-image-container::-webkit-scrollbar {
    display: none;
}

/* 图片列表容器 - 上下排列多张图片，在详情页信息展示区域内水平居中 */
.lightbox-image-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* 图片之间的间距 */
    max-width: 700px;
    /* 与详情页内容的max-width一致 */
    margin: 0 auto;
    /* 水平居中 */
    width: 100%;
}

/* 每张图片的包装容器 */
.lightbox-image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 浮层中的图片 */
.lightbox-image {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    /* 保持图片比例 */
    cursor: pointer;
    /* 显示手型光标 */
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 4px;
    /* 添加圆角 */
}

.lightbox-image.loaded {
    opacity: 1;
}


/* 移动端适配 */
@media (max-width: 768px) {
    .lightbox-image-container {
        position: relative;
        /* 移动端不使用绝对定位 */
        left: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        padding: 20px 0;
        /* 移动端减少上下留白 */
    }
    
    .lightbox-image-list {
        max-width: 100%;
        /* 移动端占满宽度 */
        padding: 0 10px;
        /* 左右留一点边距 */
    }
    
    .lightbox-image {
        width: 100%;
        height: auto;
    }
}

/* 关闭按钮提示 - 在图片列表容器下方居中，可点击 */
.lightbox-image-list::after {
    content: '点击空白区域关闭';
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 10px 20px;
    padding-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9em;
    pointer-events: auto;
    /* 允许点击 */
    cursor: pointer;
    width: 100%;
    transition: opacity 0.3s ease;
}

.lightbox-image-list::after:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    .lightbox-image-list::after {
        font-size: 0.85em;
        margin-top: 15px;
        padding-bottom: 15px;
    }
}