/* 紧凑布局样式 - 优化各部分间距 */

/* 减少section之间的间距 */
section {
    padding: 40px 0; /* 从60px减少到40px */
}

/* 首页特殊优化 */
.hero {
    padding: 60px 0 40px; /* 从80px 0 60px减少 */
}

.hero-content {
    margin-bottom: 0;
}

.hero-description {
    margin-bottom: 30px; /* 从40px减少 */
}

/* section header间距优化 */
.section-header {
    margin-bottom: 35px; /* 从50px减少 */
}

.section-header h2 {
    margin-bottom: 12px; /* 从15px减少 */
}

.section-header i {
    margin-bottom: 12px; /* 从15px减少 */
}

/* 卡片网格间距优化 */
.features-grid,
.status-grid,
.contact-grid,
.team-grid {
    gap: 25px; /* 从30px减少 */
    margin-top: 30px; /* 从40px减少 */
}

.mods-list {
    gap: 25px; /* 从30px减少 */
    margin: 30px 0; /* 从40px减少 */
}

/* 页面头部间距优化 */
.page-header {
    padding: clamp(100px, 12vh, 120px) 0 clamp(25px, 4vh, 35px); /* 减少顶部和底部间距 */
}

.page-title {
    margin-bottom: clamp(12px, 2.5vh, 18px); /* 减少标题下方间距 */
}

.page-description {
    margin: 0 auto clamp(20px, 3.5vh, 35px); /* 减少描述下方间距 */
}

.back-btn {
    margin-bottom: clamp(15px, 3vh, 25px); /* 减少返回按钮下方间距 */
}

/* 内容区域间距优化 */
.rules-container,
.contact-section,
.faq-section {
    padding: 30px 0; /* 从40px减少 */
}

.rules-container {
    margin: 30px 0; /* 从40px减少 */
    padding: 30px; /* 从40px减少 */
}

/* 规则项间距优化 */
.rule-item {
    margin-bottom: 25px; /* 从30px减少 */
    padding-bottom: 25px; /* 从30px减少 */
}

.rule-title {
    margin-bottom: 12px; /* 从15px减少 */
}

/* FAQ项间距优化 */
.faq-item {
    margin-bottom: 15px; /* 从20px减少 */
}

.faq-question {
    padding: 18px 22px; /* 从20px 25px减少 */
}

.faq-answer {
    padding: 0 22px 22px; /* 从0 25px 25px减少 */
}

/* 搜索容器间距优化 */
.search-container {
    margin: 25px 0; /* 从30px减少 */
}

/* 联系卡片间距优化 */
.contact-card {
    padding: 25px; /* 从30px减少 */
}

.contact-icon {
    margin-bottom: 15px; /* 从20px减少 */
}

.contact-title {
    margin-bottom: 12px; /* 从15px减少 */
}

.contact-description {
    margin-bottom: 15px; /* 从20px减少 */
}

/* 团队卡片间距优化 */
.team-card {
    padding: 25px; /* 从30px减少 */
}

.team-avatar {
    margin: 0 auto 15px; /* 从20px减少 */
}

.team-bio {
    margin-bottom: 15px; /* 从20px减少 */
}

/* 模组卡片间距优化 */
.mod-card {
    padding: 20px; /* 从25px减少 */
}

.mod-name {
    margin-bottom: 8px; /* 从10px减少 */
}

.mod-version {
    margin-bottom: 12px; /* 从15px减少 */
}

.mod-description {
    margin-bottom: 12px; /* 从15px减少 */
}

/* 底部区域间距优化 */
.footer {
    padding: 35px 0 15px; /* 从40px 0 20px减少 */
}

.footer-content {
    margin-bottom: 25px; /* 从30px减少 */
}

.footer-bottom {
    padding-top: 15px; /* 从20px减少 */
}

/* 统计数据区域优化 */
.stats-section {
    padding: 50px 0; /* 保持重要区域的视觉冲击力 */
}

/* 加入我们区域优化 */
.join-us {
    padding: 45px 0; /* 稍微减少但保持重要性 */
}

.join-content h2 {
    margin-bottom: 15px; /* 从20px减少 */
}

.join-content p {
    margin-bottom: 30px; /* 从40px减少 */
}

/* 轮播区域间距优化 */
.gallery-section {
    padding: 35px 0; /* 从默认减少 */
}

.gallery-container {
    margin-top: 25px; /* 减少轮播容器上方间距 */
}

/* 服务器状态区域保持适当间距 */
.server-status {
    padding: 45px 0; /* 重要信息区域保持较好的视觉分离 */
}

/* 移动端进一步优化间距 */
@media (max-width: 768px) {
    section {
        padding: 30px 0; /* 移动端进一步减少 */
    }
    
    .hero {
        padding: 50px 0 30px;
    }
    
    .page-header {
        padding: 80px 0 20px;
    }
    
    .section-header {
        margin-bottom: 25px;
    }
    
    .features-grid,
    .status-grid,
    .contact-grid,
    .team-grid,
    .mods-list {
        gap: 20px;
        margin-top: 25px;
    }
    
    .rules-container {
        padding: 20px;
        margin: 20px 0;
    }
    
    .rule-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .faq-question {
        padding: 15px 18px;
    }
    
    .faq-answer {
        padding: 0 18px 18px;
    }
    
    .contact-card,
    .team-card {
        padding: 20px;
    }
    
    .mod-card {
        padding: 18px;
    }
    
    .footer {
        padding: 30px 0 15px;
    }
}

@media (max-width: 480px) {
    section {
        padding: 25px 0;
    }
    
    .hero {
        padding: 40px 0 25px;
    }
    
    .section-header {
        margin-bottom: 20px;
    }
    
    .features-grid,
    .status-grid,
    .contact-grid,
    .team-grid,
    .mods-list {
        gap: 15px;
        margin-top: 20px;
    }
    
    .page-header {
        padding: 70px 0 15px;
    }
}

/* 保持重要元素的视觉层次 */
.stats-section,
.join-us {
    /* 这些重要区域保持较好的间距以突出重要性 */
}

/* 微调按钮组间距 */
.hero-buttons,
.join-buttons {
    gap: 15px; /* 从20px减少 */
}

.help-buttons {
    gap: 12px; /* 从15px减少 */
}

/* 优化列表项间距 */
.footer-links li {
    margin-bottom: 8px; /* 从10px减少 */
}

.rules-toc-list li {
    margin-bottom: 8px; /* 从10px减少 */
}

/* 优化表单和输入框间距 */
.search-input {
    margin-bottom: 0; /* 确保搜索框紧凑 */
}

/* 优化信息卡片间距 */
.info-card {
    margin-bottom: 15px; /* 从20px减少 */
    padding: 20px; /* 从25px减少 */
}

.info-title {
    margin-bottom: 12px; /* 从15px减少 */
}

/* 优化帮助区域间距 */
.faq-help {
    padding: 30px; /* 从40px减少 */
}

.faq-help h3 {
    margin-bottom: 12px; /* 从15px减少 */
}

.faq-help p {
    margin-bottom: 20px; /* 从25px减少 */
}

/* 确保内容不会过于拥挤 */
.container {
    /* 保持容器的左右padding，确保内容不贴边 */
    padding: 0 20px;
}

/* 在保持紧凑的同时确保可读性 */
p, li {
    line-height: 1.6; /* 保持良好的行高 */
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3; /* 标题保持适当行高 */
}