/*
 * 自定义图片布局 - 高度一致，宽度自适应
 * 修复多图显示问题，让每张图片完整展示不被截断
 */

/* CSS已确认加载成功 */

/* === 调试样式已移除 === */

/* ====== 图片容器样式修复 - 支持多种布局 ====== */

/* 主要图片容器 - 高度完全由JavaScript控制，覆盖所有可能的类 */
.imgbox-container.lists-imgs:not(.count-1),
.imgbox-container.lists-imgs.mt6:not(.count-1),
.nex_forumlist_pics ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important; /* 增大左右间隙 */
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    height: auto !important; /* 将由JavaScript强制设置 */
    min-height: 0 !important; /* 强制最小高度为0 */
    max-height: none !important; /* 移除最大高度限制 */
    padding: 0 !important;
    margin: 0 0 16px 0 !important; /* 添加下边距确保与下方文字的距离 */
    list-style: none !important;
    overflow: hidden !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-sizing: border-box !important; /* 确保尺寸计算正确 */
}

/* 图片容器项 - 让span完全透明，不影响布局 */
.imgbox-container.lists-imgs:not(.count-1) > span,
.nex_forumlist_pics ul li {
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    overflow: visible !important; /* 改为visible避免截断 */
    box-shadow: none !important;
    transition: none !important;
    display: inline-block !important; /* 使用inline-block更简单 */
    border: none !important;
    background: transparent !important;
    transform: none !important;
    vertical-align: top !important; /* 顶部对齐 */
    line-height: 0 !important; /* 消除行高影响 */
}

/* 图片样式 - 图片直接控制所有显示 */
.imgbox-container.lists-imgs:not(.count-1) > span > img,
.nex_forumlist_pics ul li img {
    position: relative !important;
    display: block !important;
    width: auto !important; /* JavaScript控制宽度 */
    height: auto !important; /* JavaScript控制高度 */
    max-width: none !important;
    max-height: none !important;
    min-width: auto !important;
    min-height: auto !important;
    object-fit: fill !important; /* 改为fill，强制图片填满JavaScript设置的尺寸 */
    object-position: top left !important; /* 图片从左上角开始 */
    transition: none !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    vertical-align: top !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 强制覆盖原始主题的所有类样式 */
.imgbox-container.lists-imgs:not(.count-1) .radius8,
.imgbox-container.lists-imgs:not(.count-1) .fit-cover,
.imgbox-container.lists-imgs:not(.count-1) .cursor-zoom-in {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    object-fit: fill !important; /* 强制覆盖fit-cover，填满设置的尺寸 */
    cursor: default !important; /* 覆盖zoom-in光标 */
}

/* 强制覆盖可能影响高度的类 */
.imgbox-container.lists-imgs:not(.count-1).mt6 {
    margin-top: 0 !important; /* 如果mt6影响高度 */
}

/* 通用覆盖 - 强制移除任何高度相关的类影响 */
.imgbox-container[class*="lists-imgs"]:not(.count-1) {
    min-height: 0 !important;
    height: auto !important;
}

/* 移除所有悬停效果 */
.imgbox-container.lists-imgs:not(.count-1) > span:hover {
    transform: none !important;
    box-shadow: none !important;
}

.imgbox-container.lists-imgs:not(.count-1) > span:hover > img {
    transform: none !important;
}

/* 重写多图容器样式 - 增强优先级 */
body .posts-item.mult-thumb .thumb-items {
    margin: 0 -4px 6px -4px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important; /* 底部对齐 */
}

/* 重写单个图片容器 - 增强优先级 */
body .posts-item.mult-thumb .thumb-items > span {
    width: auto !important; /* 取消固定宽度 */
    height: 120px !important; /* 固定高度 */
    padding-bottom: 0 !important; /* 取消padding-bottom */
    margin: 0 4px 8px 4px !important;
    position: relative !important;
    flex-shrink: 0 !important; /* 防止压缩 */
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

/* 图片样式 - 高度固定，宽度自适应 - 增强优先级 */
body .posts-item.mult-thumb .thumb-items > span > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: 100% !important; /* 固定高度 */
    max-width: none !important;
    min-width: 100% !important;
    object-fit: cover !important; /* 保持比例，居中裁切 */
    object-position: center !important;
    transition: transform 0.2s ease !important;
}

/* 悬停效果 */
.posts-item.mult-thumb .thumb-items > span:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.posts-item.mult-thumb .thumb-items > span:hover > img {
    transform: scale(1.02);
}

/* 响应式调整 */
@media (max-width: 768px) {
    .posts-item.mult-thumb .thumb-items > span {
        height: 100px !important;
        margin: 0 2px 6px 2px;
    }
    
    .posts-item.mult-thumb .thumb-items {
        margin: 0 -2px 6px -2px;
    }
}

@media (max-width: 480px) {
    .posts-item.mult-thumb .thumb-items > span {
        height: 80px !important;
        margin: 0 1px 4px 1px;
    }
    
    .posts-item.mult-thumb .thumb-items {
        margin: 0 -1px 6px -1px;
    }
}

/* 确保图片加载完成后的显示 */
.posts-item.mult-thumb .thumb-items > span > img.lazyloaded {
    opacity: 1;
}

/* 加载中的占位效果 */
.posts-item.mult-thumb .thumb-items > span > img:not(.lazyloaded) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 图片数量徽章样式优化 */
.posts-item.mult-thumb .thumb-items .abs-center.right-top badge {
    background: rgba(0,0,0,0.7) !important;
    color: white !important;
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 6px;
    backdrop-filter: blur(5px);
}