/**
 * Moedes 移动端响应式样式
 * 专注于移动设备适配和响应式布局
 */

/* ============================================
   移动端响应式设计
   ============================================ */

@media (max-width: 768px) {
    /* 防止页面横向滚动 */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* 强制论坛布局在手机端单栏显示 */
    .forum-three-column-layout {
        display: block;
        width: 100%;
        max-width: 100vw;
        grid-template-columns: none;
    }
    
    /* 侧边栏在手机端堆叠显示 */
    .forum-left-sidebar,
    .forum-right-sidebar {
        width: 100%;
        float: none;
        display: block;
    }
    
    /* 主内容区占满宽度 */
    .forum-main-content {
        width: 100%;
        float: none;
    }
    
    /* 容器适配手机屏幕 */
    .container,
    .main-container {
        width: 100%;
        max-width: 100vw;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* 手机端图片优化 - 等比例缩放，不强制高度 */
    .imgbox-container.lists-imgs span img.fit-cover {
        width: auto !important;
        height: auto !important;
        max-width: 150px !important;
        max-height: 100px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    
    .imgbox-container.lists-imgs {
        gap: 2px;
    }
    
    /* 论坛头部手机端优化 */
    .forum-header {
        padding: 6px;
        margin: 6px 0;
    }
    
    .forum-header .plate-thumb {
        width: 60px;
        height: 60px;
    }
    
    .forum-header .forum-title {
        font-size: 14px;
    }
    
    .forum-header .px12-sm {
        gap: 4px;
        font-size: 11px;
    }
    
    .forum-header .more-btns {
        top: 6px;
        right: 6px;
        gap: 4px;
    }
    
    .forum-header .desc {
        font-size: 12px;
        padding: 6px 0 4px 8px;
    }
    
    /* 视图切换按钮手机端优化 */
    .moedes-view-toggle-wrapper {
        margin-left: 5px;
    }
    
    .moedes-view-btn {
        padding: 4px 8px;
    }
    
    /* 返回顶部按钮手机端优化 */
    #move-to-top {
        bottom: 15px;
        right: 15px;
        width: 45px;
        height: 45px;
    }
    
    /* 目录功能手机端优化 */
    .toc-container {
        padding: 10px;
        margin: 15px 0;
    }
    
    .toc-title {
        font-size: 14px;
    }
    
    .toc-list li {
        padding-left: 12px;
    }
    
    /* 下拉菜单手机端优化 */
    .dropdown-menu {
        min-width: 100px;
        font-size: 14px;
    }
    
    .dropdown-menu a {
        padding: 6px 10px;
    }
    
    /* 按钮在手机端的调整 */
    .forum-header .more-btns .btn-follow,
    .forum-header .more-btns .dropdown > a {
        padding: 3px 6px;
        font-size: 10px;
        width: 20px;
        height: 20px;
    }
}

/* 平板端适配 */
@media (max-width: 1024px) and (min-width: 769px) {
    .forum-header .plate-thumb {
        width: 75px;
        height: 75px;
    }
    
    .forum-header .forum-title {
        font-size: 16px;
    }
    
    .imgbox-container.lists-imgs span img.fit-cover {
        width: auto !important;
        height: auto !important;
        max-width: 180px !important;
        max-height: 120px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* 超小屏幕优化 */
@media (max-width: 480px) {
    .forum-header {
        padding: 4px;
    }
    
    .forum-header .plate-thumb {
        width: 50px;
        height: 50px;
    }
    
    .forum-header .forum-title {
        font-size: 13px;
    }
    
    .forum-header .desc {
        font-size: 11px;
    }
    
    .imgbox-container.lists-imgs span img.fit-cover {
        width: auto !important;
        height: auto !important;
        max-width: 120px !important;
        max-height: 80px !important;
        object-fit: contain !important;
        object-position: center !important;
    }
    
    #move-to-top {
        width: 40px;
        height: 40px;
        bottom: 10px;
        right: 10px;
    }
}