/*
 * 移动端响应式修复 - 基于实际页面结构
 * 修复三栏布局在移动端的问题
 */

/* 移动端修复 */
@media (max-width: 768px) {
    
    /* 防止页面横向滚动 */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* 修复三栏布局 - 改为单列 */
    .forum-three-column-layout {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* 隐藏左右侧边栏 */
    .forum-left-sidebar,
    .forum-right-sidebar {
        display: none !important;
    }
    
    /* 主内容区域占满宽度 */
    .forum-main-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-column: 1 !important;
    }
    
    /* 修复主容器宽度 */
    .container,
    .main-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }
    
    /* 修复论坛主要元素宽度 */
    .forum-wrap,
    .forum-main,
    .posts-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 修复帖子列表宽度 */
    .forum-posts,
    .posts-item,
    posts.forum-posts {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* 图片容器移动端优化 */
    .lists-imgs:not(.count-1) {
        max-width: calc(100vw - 40px) !important;
        overflow-x: hidden !important;
        gap: 2px !important;
    }
    
    /* 防止表格和代码块溢出 */
    table,
    pre,
    code,
    .wp-block-table {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }
    
    /* 导航栏移动端优化 */
    .forum-navbar,
    .header-nav {
        width: 100% !important;
        overflow-x: auto !important;
    }
    
    /* 修复任何固定宽度的元素 */
    * {
        max-width: 100vw !important;
    }
    
    /* 重置可能导致宽度问题的元素 */
    .forum-three-column-layout > * {
        width: auto !important;
        min-width: 0 !important;
    }
    
}

/* 平板端适配 */
@media (min-width: 769px) and (max-width: 1024px) {
    
    /* 平板端调整三栏布局 */
    .forum-three-column-layout {
        grid-template-columns: 200px 1fr 200px !important;
        max-width: 100% !important;
    }
    
    /* 可以选择隐藏右侧边栏 */
    .forum-right-sidebar {
        display: none !important;
    }
    
    .forum-three-column-layout {
        grid-template-columns: 200px 1fr !important;
    }
    
}