/* 移动端响应式样式 */

/* 媒体查询：针对小于等于768px的屏幕 */
@media (max-width: 768px) {
    /* 调整主容器和边距 - 进一步减小 */
    .container {
        padding: 0 5px !important; /* 进一步减少到5px */
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* 调整头部容器内边距 */
    .header-container {
        padding: 0 5px !important;
    }
    
    /* 主内容区域调整 - 完全移除间距 */
    .main-content {
        flex-direction: column !important;
        gap: 10px !important; /* 进一步减少到10px */
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 隐藏侧边栏，除非特定页面需要显示 */
    .left-sidebar,
    .right-sidebar {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 中间内容栏调整 - 完全充满宽度 */
    .content-area {
        width: 100% !important;
        padding: 0 2px !important; /* 最小化内边距，防止与container叠加 */
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* 确保所有内容区域边距最小化 */
    .main-content > .content-area,
    .container > .main-content > .content-area {
        padding: 0 2px !important;
        margin: 0 !important;
    }
    
    /* 调整文章卡片内边距，使其更紧凑 */
    .post-card {
        padding: 12px !important; /* 进一步减少到12px */
        margin: 0 0 10px 0 !important;
        border-radius: 8px !important;
    }
    
    /* 左侧边栏卡片调整 - 如果需要在特定页面显示 */
    .left-sidebar-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* 右侧边栏组件调整 - 如果需要在特定页面显示 */
    .popular-posts {
        padding: 12px !important;
    }
    
    /* 友情链接页面调整 */
    .link-category-section {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* 调整链接网格布局，使其在移动端更紧凑 */
    .link-grid {
        gap: 8px !important; /* 进一步减少到8px */
    }
    
    /* 图片布局调整 */
    .images-grid:has(.grid-image:nth-child(1):last-child) {
        max-width: 100% !important; /* 调整为100%宽度 */
    }
    
    /* 调整移动端网格列数和间距 */
    .images-grid:has(.grid-image:nth-child(n+3)) {
        gap: 4px !important; /* 进一步减少到4px */
    }
    
    /* 公告栏调整 */
    .announcement-bar {
        padding: 8px !important;
        margin-bottom: 10px !important;
    }
    
    /* 首页特定样式优化 - 全面调整 */
    body.home .container {
        padding: 0 3px !important; /* 首页边距更小 */
        margin: 0 auto !important;
        width: 100% !important;
    }
    
    body.home .main-content {
        gap: 5px !important; /* 首页组件间距更小 */
        padding: 0 !important;
    }
    
    body.home .content-area {
        padding: 0 !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    
    body.home .post-card {
        padding: 10px !important;
        margin: 0 2px 5px 2px !important; /* 进一步减小底部间距 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; /* 轻微阴影 */
    }
    
    /* 首页公告栏调整 */
    body.home .announcement-bar {
        padding: 6px 8px !important;
        margin: 0 2px 5px 2px !important;
    }
    
    /* 确保首页边栏完全隐藏 */
    body.home .left-sidebar,
    body.home .right-sidebar {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* 首页头部调整 */
    body.home header {
        padding: 10px 0 !important;
    }
    
    body.home .header-container {
        padding: 0 5px !important;
        gap: 10px !important;
    }
    
    /* 首页标题和内容调整 */
    body.home .post-title {
        margin-bottom: 10px !important;
        font-size: 18px !important;
    }
    
    body.home .post-excerpt {
        margin-bottom: 10px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* 移动端底部导航栏样式 */
    .mobile-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background-color: #fff !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
        z-index: 1000 !important;
        height: 60px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* 移动端导航列表 */
    .mobile-nav-list {
        display: flex !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    /* 移动端导航项 */
    .mobile-nav-list li {
        flex: 1 !important;
        text-align: center !important;
    }
    
    /* 移动端导航链接 */
    .mobile-nav-list a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 0 !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 12px !important;
        transition: color 0.3s !important;
    }
    
    /* 激活状态的导航链接 */
    .mobile-nav-list a.current-menu-item,
    .mobile-nav-list a:hover {
        color: #ff6b6b !important;
    }
    
    /* 导航图标样式 */
    .nav-icon {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }
    
    /* 为页脚添加下边距，防止被底部导航栏遮挡 */
    footer {
        margin-bottom: 70px !important;
    }
    
    /* 为内容区域添加底部内边距，防止被底部导航栏遮挡 */
    .content-area {
        padding-bottom: 70px !important;
    }
    
    /* 朋友动态刷新按钮样式 */
    .refresh-button {
        padding: 5px 8px; /* 减小按钮大小 */
    }
    
    .refresh-button svg {
        width: 14px; /* 减小图标大小 */
        height: 14px;
    }
    
    /* 调整引用块样式 */
    .post-content blockquote {
        padding: 12px 15px 12px 35px; /* 减小内边距 */
    }
    
    /* 调整表格样式 */
    .post-content th,
    .post-content td {
        padding: 8px 10px; /* 减小内边距 */
    }
}