/* 移动端优化样式 - 让帖子列表显示更多内容 */

/* 全局移动端优化 */
@media (max-width: 768px) {
    /* 减少全局间距 */
    .container, .page-container, .forum-container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* 论坛容器移动端优化 */
    .forum-container {
        padding: 10px;
        max-width: 100%;
    }
    
    /* 优化导航栏高度 */
    .navbar, .header {
        min-height: 40px;
        padding: 4px 0;
    }
    
    /* 减少section间距 */
    .section, .forum-section {
        margin-bottom: 15px;
    }
    
    /* 优化按钮尺寸 */
    .btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    /* 手机端全局优化 */
    body {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* 进一步减少容器间距 */
    .container, .page-container, .forum-container {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* 论坛容器手机端进一步优化 */
    .forum-container {
        padding: 8px;
        max-width: 100%;
    }
    
    /* 优化标题层级 */
    h1 { font-size: 1.5rem; margin-bottom: 10px; }
    h2 { font-size: 1.3rem; margin-bottom: 8px; }
    h3 { font-size: 1.1rem; margin-bottom: 6px; }
    h4 { font-size: 1rem; margin-bottom: 5px; }
    
    /* 优化段落间距 */
    p {
        margin-bottom: 8px;
        line-height: 1.4;
    }
    
    /* 优化列表间距 */
    ul, ol {
        margin-bottom: 10px;
        padding-left: 20px;
    }
    
    li {
        margin-bottom: 4px;
    }
    
    /* 优化表单元素 */
    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 10px 12px;
    }
    
    /* 优化按钮 */
    .btn {
        padding: 10px 16px;
        font-size: 14px;
        min-height: 44px; /* 符合触摸标准 */
    }
    
    .btn-sm {
        padding: 6px 12px;
        font-size: 12px;
        min-height: 36px;
    }
}

/* 帖子列表专项优化 */
@media (max-width: 768px) {
    /* 帖子项优化 */
    .post-item, .thread-item {
        /* 使用更紧凑的布局 */
        padding: 12px 15px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }
    
    /* 标题优化 */
    .post-item h3, .thread-title {
        font-size: 15px !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
        /* 确保标题不会太长 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-word;
    }
    
    /* 元信息优化 */
    .post-header, .thread-meta {
        font-size: 12px !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }
    
    /* 头像优化 */
    .avatar {
        width: 32px !important;
        height: 32px !important;
        border-width: 2px !important;
    }
}

@media (max-width: 480px) {
    /* 手机端帖子列表超级紧凑模式 */
    .post-item, .thread-item {
        padding: 10px 12px !important;
        margin-bottom: 6px !important;
        border-radius: 6px !important;
    }
    
    /* 标题进一步优化 */
    .post-item h3, .thread-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin-bottom: 6px !important;
        font-weight: 600 !important;
    }
    
    /* 元信息进一步优化 */
    .post-header, .thread-meta {
        font-size: 11px !important;
        gap: 6px !important;
        margin-top: 6px !important;
    }
    
    /* 头像进一步优化 */
    .avatar {
        width: 35px !important;
        height: 35px !important;
        margin-right: 5px !important;
    }
    
    /* 标签优化 */
    .thread-meta span, .post-header span {
        padding: 2px 6px !important;
        font-size: 10px !important;
        border-radius: 8px !important;
    }
    
    /* 徽章优化 */
    .hot-badge, .new-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
        border-radius: 5px !important;
    }
}

/* 分类页面专项优化 */
@media (max-width: 480px) {
    /* 分类英雄区域优化 */
    .category-hero {
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }
    
    .category-hero-content {
        padding: 15px 10px !important;
        gap: 10px !important;
    }
    
    .category-title {
        font-size: 16px !important;
        margin-bottom: 6px !important;
    }
    
    .category-description {
        font-size: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* 统计卡片优化 */
    .stat-card {
        min-width: 60px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
    
    .stat-number {
        font-size: 12px !important;
    }
    
    .stat-label {
        font-size: 9px !important;
    }
}

/* 首页专项优化 */
@media (max-width: 480px) {
    /* Banner优化 */
    .banner {
        height: 100px !important;
        font-size: 1.4rem !important;
        margin-bottom: 10px !important;
    }
    
    /* 帖子列表容器优化 */
    .post-list {
        padding: 5px 0 !important;
    }
}

/* 论坛首页专项优化 */
@media (max-width: 480px) {
    /* 分类网格优化 */
    .category-grid {
        gap: 6px !important;
    }
    
    .category-card {
        padding: 10px !important;
        border-radius: 6px !important;
    }
    
    .category-icon {
        width: 32px !important;
        height: 32px !important;
        margin-right: 8px !important;
    }
    
    .category-icon i {
        font-size: 14px !important;
    }
    
    .category-name {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    
    .category-description {
        font-size: 11px !important;
        margin-top: 2px !important;
    }
}

/* 通用优化 */
@media (max-width: 480px) {
    /* 减少所有不必要的动画，提升性能 */
    *, *::before, *::after {
        transition-duration: 0.2s !important;
    }
    
    /* 优化触摸目标大小 */
    a, button, .clickable {
        /* min-height: 44px; */
        /* min-width: 44px; */
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* 优化文本选择 */
    .post-item, .thread-item {
        -webkit-user-select: none;
        user-select: none;
    }
    
    .post-item h3, .thread-title {
        -webkit-user-select: text;
        user-select: text;
    }
}

/* 深色主题适配 */
@media (max-width: 480px) {
    html[data-theme="dark"] .post-item,
    html[data-theme="dark"] .thread-item {
        background-color: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    html[data-theme="dark"] .thread-meta span {
        background: rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
}

/* 性能优化 */
@media (max-width: 480px) {
    /* 减少重绘和回流 */
    .post-item, .thread-item {
        will-change: transform;
        backface-visibility: hidden;
    }
    
    /* 优化滚动性能 */
    .post-list, .thread-list {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}