/**
 * 手机端屏幕宽度修复 - 只解决过宽问题
 * Mobile screen width fix - only fix width overflow issues
 */

/* 只针对真正的手机设备 */
@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;
    }
}

/* 桌面端 - 横线板块小工具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;
    }
}

/* 帖子图片自适应显示 - 4张图片铺满一行 */
.imgbox-container.lists-imgs {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
}

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

.imgbox-container.lists-imgs span img.fit-cover {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    display: block !important;
    min-height: 100px !important;
    max-height: 150px !important;
}

/* 手机端优化 */
@media only screen and (max-width: 768px) {
    .imgbox-container.lists-imgs span img.fit-cover {
        max-height: 120px !important;
        min-height: 80px !important;
    }
}