/* mobile-fixed.css - 移动端强制置顶样式
 * 功能: fixed定位修复、设备特殊适配、布局强制修正、sticky兼容性
 * 设备: 768px, 480px断点，iPad适配，横屏优化，高分辨率支持
 */

@media (max-width: 768px) {
    /* 为不同设备定义header高度变量 */
    :root {
        --header-height: 60px; /* 标准移动端header高度 */
    }
    
    /* 强制header置顶 - 确保在所有移动设备上正确显示 */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--header-height) !important;
        z-index: 1000 !important;
        background: linear-gradient(135deg, var(--surface-color) 0%, rgba(30, 30, 30, 0.95) 100%) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 16px !important;
    }
    
    /* 强制移动端导航置顶 - 紧贴header下方 */
    .mobile-nav {
        position: fixed !important;
        top: var(--header-height) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 60px !important;
        z-index: 999 !important;
        display: block !important;
        background: linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(25, 25, 35, 0.98) 100%) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid var(--border-color) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
        padding: 12px 0 !important;
        /* 消除缝隙 */
        margin-top: -1px !important;
    }
    
    /* 移动端登录注册按钮保持水平排列 */
    .auth-buttons {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        align-items: center !important;
    }
    
    .auth-buttons .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* 为固定元素留出空间 - 精确计算 */
    body {
        padding-top: calc(var(--header-height) + 60px + 20px) !important; /* header + 导航 + 缓冲区 */
    }
    
    /* 隐藏PC端侧边栏 */
    .sidebar {
        display: none !important;
    }
    
    /* 主容器调整 */
    .main-container {
        flex-direction: column !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        min-height: calc(100vh - var(--header-height) - 60px) !important;
    }
    
    /* 内容区域调整 */
    .content {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 20px 16px !important;
        flex: 1 !important;
    }
    
    /* 移动端卡片网格固定宽度布局 */
    .card-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
        gap: 16px !important;
        padding: 0 16px !important;
        justify-content: center !important;
    }
    
    /* 移动端模块卡片固定尺寸 */
    .module-card {
        width: 100% !important;
        max-width: 400px !important;
        height: auto !important;
        min-height: 200px !important;
        margin: 0 auto !important;
    }
    
    /* 移动端底部栏样式优化 - 解决文字重叠问题 */
    footer {
        padding: 12px !important;
        text-align: center !important;
    }
    
    footer p {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    
    footer a {
        margin-right: 0 !important;
    }
    
    /* 底部栏链接区域 */
    footer .footer-links {
        display: flex !important;
        gap: 10px !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    
    /* 针对小屏幕移动设备的特殊处理 */
    @media (max-width: 480px) {
        :root {
            --header-height: 56px; /* 小屏设备使用更小的header */
        }
        
        header {
            height: var(--header-height) !important;
            padding: 0 12px !important;
        }
        
        .mobile-nav {
            top: var(--header-height) !important;
            height: 56px !important;
            padding: 10px 0 !important;
        }
        
        body {
            padding-top: calc(var(--header-height) + 56px + 16px) !important;
        }
        
        .card-grid {
            grid-template-columns: 1fr !important;
            padding: 0 12px !important;
            gap: 12px !important;
        }
        
        .module-card {
            max-width: 350px !important;
            margin: 0 auto !important;
        }
        
        .content {
            padding: 16px 12px !important;
        }
    }
    
    /* 横屏模式优化 */
    @media (max-width: 768px) and (orientation: landscape) {
        :root {
            --header-height: 50px; /* 横屏时使用更小的header */
        }
        
        header {
            height: var(--header-height) !important;
        }
        
        .mobile-nav {
            top: var(--header-height) !important;
            height: 50px !important;
            padding: 8px 0 !important;
        }
        
        body {
            padding-top: calc(var(--header-height) + 50px + 10px) !important;
        }
        
        .content {
            padding: 12px 16px !important;
        }
        
        .card-grid {
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
            gap: 12px !important;
        }
        
        .module-card {
            min-height: 160px !important;
        }
    }
    
    /* 高分辨率移动设备优化 */
    @media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
        header {
            border-bottom: 0.5px solid var(--border-color) !important;
        }
        
        .mobile-nav {
            border-bottom: 0.5px solid var(--border-color) !important;
        }
    }
}