/**
 * Moedes 论坛完整布局样式 v1.0
 * 整合所有图片布局、手机端适配、父主题覆盖功能
 * 统一管理，减少文件数量
 */

/* ============================================
   图片布局核心功能 - 防闪烁和自定义布局
   ============================================ */

/* 预隐藏多图容器，防止初始大图显示 - 完全无过渡 */
.imgbox-container.lists-imgs:not(.count-1):not(.layout-ready) {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
}

/* 布局就绪后立即显示 - 无过渡效果 */
.imgbox-container.lists-imgs:not(.count-1).layout-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

/* 基础布局 - 水平排列 */
.imgbox-container.lists-imgs:not(.count-1) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    overflow: visible !important;
    width: auto !important;
    max-width: none !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    /* 重置父主题的变量 */
    --img-count: auto !important;
}

/* 图片容器 */
.imgbox-container.lists-imgs:not(.count-1) > span {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    display: block !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
    padding-bottom: 0 !important; /* 移除父主题的padding-bottom */
    margin: 0 !important; /* 移除父主题的margin */
    width: auto !important; /* 让宽度由内容决定 */
    height: auto !important; /* 让高度由内容决定 */
}

/* 图片样式 - 由JavaScript动态计算，这里只设置基础样式 */
.imgbox-container.lists-imgs:not(.count-1) > span > img {
    position: static !important; /* 覆盖父主题的absolute */
    object-fit: contain !important;
    display: block !important;
    border-radius: 3px !important;
    background-color: transparent !important;
    flex-shrink: 0 !important;
    /* 来自override-parent-theme.css第42-46行的规则 */
    max-width: none !important;
    max-height: none !important;    /* 第44行 - 与第88行max-height: 150px冲突 */
    min-width: auto !important;
    min-height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* 高度和宽度由JavaScript动态设置 */
}

/* 防止任何闪烁和变形 - 加强版 */
.imgbox-container.lists-imgs:not(.count-1),
.imgbox-container.lists-imgs:not(.count-1) > span,
.imgbox-container.lists-imgs:not(.count-1) > span > img {
    transition: none !important;
    animation: none !important;
}

/* 强制覆盖动态添加的transform和height样式 */
.imgbox-container.lists-imgs:not(.count-1)[style*="transform"],
.imgbox-container.lists-imgs:not(.count-1)[style*="height"],
.imgbox-container.lists-imgs:not(.count-1)[style*="margin"] {
    transform: none !important;
    height: auto !important;
    margin-bottom: 0 !important;
}

/* 额外的闪烁防护 - 来自custom-image-layout.css */
.imgbox-container.lists-imgs:not(.count-1):not(.layout-ready) > span > img {
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
}

/* 强制覆盖动态添加的样式 - 来自custom-image-layout.css，但不覆盖height */
.imgbox-container.lists-imgs:not(.count-1)[style*="transform"],
.imgbox-container.lists-imgs:not(.count-1)[style*="margin"] {
    transform: none !important;
    margin-bottom: 0 !important;
}
/* 容器高度覆盖，但不影响图片 */
.imgbox-container.lists-imgs:not(.count-1)[style*="height"]:not(:has(img)) {
    height: auto !important;
}

/* 最高优先级覆盖 - 确保在所有情况下都生效 */
body .imgbox-container.lists-imgs:not(.count-1) {
    flex-wrap: nowrap !important;
    transform: none !important;
    margin-bottom: 0 !important;
}

body .imgbox-container.lists-imgs:not(.count-1) > span {
    flex: none !important;
    padding-bottom: 0 !important;
    width: auto !important;
    height: auto !important;
}

body .imgbox-container.lists-imgs:not(.count-1) > span > img {
    position: static !important;
}

/* 强制阻止图片放大，最高优先级 - 完全按备份文件恢复 */
body .imgbox-container.lists-imgs:not(.count-1) > span > img,
body .imgbox-container.lists-imgs:not(.count-1) > span > img.fit-cover,
html .imgbox-container.lists-imgs:not(.count-1) > span > img,
.imgbox-container.lists-imgs:not(.count-1) > span > img[style] {
    object-fit: contain !important;
    max-width: 200px !important;
    max-height: 150px !important;  /* 第88行 - 与第44行max-height: none冲突 */
    width: auto !important;
    height: auto !important;       /* 第90行 - 与JS设置的height冲突 */
}

/* 阻止容器缩放 - 来自custom-image-layout.css */
body .imgbox-container.lists-imgs:not(.count-1),
html .imgbox-container.lists-imgs:not(.count-1),
.imgbox-container.lists-imgs:not(.count-1)[style] {
    transform: none !important;
    margin-bottom: 0 !important;
}

/* ============================================
   手机端响应式布局优化
   ============================================ */

/* 只针对真正的手机设备 */
@media only screen and (max-width: 768px) {
    
    /* 防止页面横向滚动 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* 强制论坛布局在手机端单栏显示 */
    .forum-three-column-layout {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        grid-template-columns: none !important;
    }
    
    /* 侧边栏在手机端堆叠显示 */
    .forum-left-sidebar,
    .forum-right-sidebar {
        width: 100% !important;
        float: none !important;
        display: block !important;
    }
    
    /* 主内容区占满宽度 */
    .forum-main-content {
        width: 100% !important;
        float: none !important;
    }
    
    /* 容器适配手机屏幕 */
    .container,
    .main-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 横线板块小工具 - 手机端2列 */
    .moedes-horizontal-widget .mh-plates-container,
    .mh-plates-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    /* 确保板块项目正确显示 */
    .moedes-horizontal-widget .mh-plate-item,
    .mh-plate-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 手机端图片优化 - JavaScript会根据屏幕尺寸动态调整 */
    .imgbox-container.lists-imgs span img.fit-cover {
        /* JavaScript将根据屏幕尺寸动态调整 */
    }
}

/* 桌面端 - 横线板块小工具3列显示 */
@media (min-width: 769px) {
    .moedes-horizontal-widget .mh-plates-container,
    .mh-plates-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }
    
    .moedes-horizontal-widget .mh-plate-item,
    .mh-plate-item {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================
   论坛基础布局修复
   ============================================ */

/* 论坛主容器 */
.forum-main-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 主内容区 */
.forum-main-content {
    flex: 1;
    min-width: 0; /* 防止flex子元素溢出 */
}

/* 侧边栏 */
.forum-left-sidebar,
.forum-right-sidebar {
    flex: 0 0 280px;
    min-width: 280px;
}

/* 防止内容溢出 */
.forum-posts,
.plate-tab-content {
    width: 100%;
    overflow: hidden;
}

/* 确保图片容器不会破坏布局（但不干扰父主题的图片逻辑） */
.imgbox-container {
    max-width: 100%;
    overflow: hidden;
}

/* 只修复明显的布局问题，不干扰图片显示逻辑 */
.forum-posts .imgbox-container.lists-imgs {
    /* 让父主题的CSS变量系统正常工作 */
    width: auto;
    max-width: none;
}

/* ============================================
   帖子图片动态布局 - 容器宽度自适应内容  
   ============================================ */

.imgbox-container.lists-imgs {
    display: flex !important;
    gap: 4px !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
}

.imgbox-container.lists-imgs span {
    flex: none !important;
    display: block !important;
    overflow: visible !important;
    border-radius: 8px !important;
}

.imgbox-container.lists-imgs span img.fit-cover {
    /* JavaScript将设置精确的width和height */
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ============================================
   Z-index 层级修复
   ============================================ */

/* 确保下拉菜单等交互元素正确显示 */
.dropdown-menu,
.forum-header-dropdown {
    z-index: 1000;
}

.forum-toolbar {
    z-index: 100;
}