/* ===== P0 移动端布局修复 V1.1（温和方案 2026-09-15）=====
   策略：仅新增 @media 媒体查询 + 安全网，不改动桌面布局与现有组件 Class
   根因：CSS Grid 子项 min-width:auto 导致内容撑宽超出移动端视口
   修复：强制 grid 子项可收缩 + header 文字换行 + 全局禁止横向滚动
   遵循：doc0 §5 永久锁定项——不修改现有 CSS，仅新增覆盖文件 */

/* === 安全网：全局禁止横向滚动 === */
body {
    overflow-x: hidden;
}

/* === 768px 以下：单栏折叠 + 强制可收缩 === */
@media (max-width: 768px) {
    .main-container {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        margin: 12px auto !important;
        padding: 0 12px !important;
        overflow-x: hidden;
    }

    .left-sidebar,
    .right-sidebar,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .left-sidebar-container,
    .right-sidebar-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* header 修复：防止固定宽元素撑宽 */
    .header-left {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .header-logo img {
        width: 48px !important;
        height: 48px !important;
        margin-left: 0 !important;
    }

    .header-title-section {
        margin-left: 10px !important;
        max-width: calc(100% - 58px) !important;
        min-width: 0 !important;
        overflow: hidden;
        flex: 1 1 0% !important;
        flex-shrink: 1 !important;
    }

    .site-description {
        max-width: 100% !important;
        overflow: hidden;
        word-break: break-all !important;
        white-space: normal !important;
    }

    .site-name {
        font-size: 20px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-name a {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
        max-width: 100%;
    }

    /* section-item 防溢出 */
    .section-item {
        max-width: 100% !important;
        overflow: hidden;
    }

    .section-content {
        min-width: 0 !important;
        overflow: hidden;
    }
}

/* === 480px 以下：进一步压缩 === */
@media (max-width: 480px) {
    .left-sidebar,
    .right-sidebar {
        padding: 12px !important;
        border-radius: 0 !important;
    }

    .header-logo img {
        width: 40px !important;
        height: 40px !important;
    }

    .site-name {
        font-size: 18px !important;
    }

    .search-form {
        flex-direction: column !important;
    }

    .search-button {
        width: 100% !important;
    }
}

/* V1.1 追加：header 文字溢出修复 */
@media (max-width: 768px) {
    .header-title-section {
        max-width: calc(100% - 58px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
    }
    .site-description {
        max-width: 100% !important;
        overflow: hidden !important;
        word-break: break-all !important;
        white-space: normal !important;
    }
    .site-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* V1.1 追加：header 文字溢出修复 */
@media (max-width: 768px) {
    .header-title-section {
        max-width: calc(100% - 58px) !important;
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 1 0% !important;
    }
    .site-description {
        max-width: 100% !important;
        overflow: hidden !important;
        word-break: break-all !important;
        white-space: normal !important;
    }
    .site-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* V1.2 追加：表格移动端适配 */
@media (max-width: 768px) {
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
        word-break: break-word !important;
    }
    .main-content {
        overflow-x: auto;
    }
}