/* 易云城IT服务 - 网站优化样式表
 * 优化目标：减少垂直空间占用，压缩模块间距，优化字体大小
 * 使用方法：在 header.php 中 main.css 之后引入此文件
 */

/* =====================================================
   1. 全局基础优化
   ===================================================== */
:root {
  /* 减小基础字体大小 */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 8px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.03);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.06);
}

html {
  font-size: 15px; /* 原为 16px */
}

body {
  line-height: 1.55; /* 原为 1.6，稍微紧凑 */
}

/* =====================================================
   2. 头部优化 - 减小区块高度
   ===================================================== */
.top-bar {
  padding: 5px 0; /* 原为 7px 0 */
  font-size: 12px; /* 原为 13px */
}

.main-header {
  box-shadow: var(--shadow-sm);
}

.header-inner {
  height: 60px; /* 原为 70px */
}

.logo-icon {
  font-size: 24px; /* 原为 28px */
}

.logo-name {
  font-size: 1.1rem; /* 原为 1.25rem */
}

.main-nav li a {
  padding: 6px 12px; /* 原为 8px 16px */
  font-size: 13px; /* 原为 14px */
}

/* =====================================================
   3. 区块间距优化 - 核心优化点
   ===================================================== */
.section {
  padding: 36px 0; /* 原为 50px 0，减少 28% */
}

.section-header {
  margin-bottom: 24px; /* 原为 35px，减少 31% */
}

.section-badge {
  padding: 3px 10px; /* 原为 4px 14px */
  font-size: 12px; /* 原为 13px */
  margin-bottom: 8px; /* 原为 12px */
}

.section-title {
  font-size: 1.45rem; /* 原为 1.7rem，减少 15% */
  margin-bottom: 8px; /* 原为 10px */
  line-height: 1.25; /* 原为 1.3 */
}

.section-subtitle {
  font-size: 14px; /* 原为 15px */
  line-height: 1.5; /* 原为 1.6 */
}

.section-more {
  margin-top: 20px; /* 原为 30px，减少 33% */
}

/* =====================================================
   4. 英雄区（Hero）优化
   ===================================================== */
.hero {
  padding: 40px 0 50px; /* 原为 60px 0 70px，大幅减少 */
}

.hero-title {
  font-size: 2rem; /* 原为 2.4rem，减少 17% */
  line-height: 1.2; /* 原为 1.25 */
  margin-bottom: 12px; /* 原为 16px */
}

.hero-subtitle {
  font-size: 0.85rem; /* 原为 0.9rem */
  margin-bottom: 10px; /* 原为 14px */
}

.hero-desc {
  font-size: 14px; /* 原为 15px */
  margin-bottom: 20px; /* 原为 28px，减少 29% */
  line-height: 1.5;
}

.hero-badge {
  margin-bottom: 12px; /* 原为 16px */
  font-size: 13px; /* 原为 14px */
}

.hero-btns {
  gap: 12px; /* 原为 16px */
  margin-bottom: 24px; /* 原为 32px，减少 25% */
}

.hero-stats {
  gap: 20px; /* 原为 28px */
  padding-top: 20px; /* 原为 28px，减少 29% */
}

.hero-stat-num {
  font-size: 1.6rem; /* 原为 1.8rem */
}

.hero-stat-label {
  font-size: 12px; /* 原为 13px */
}

/* 英雄区右侧卡片 */
.hero-card {
  padding: 20px; /* 原为 24px */
}

/* =====================================================
   5. 服务卡片优化
   ===================================================== */
.services-grid {
  gap: 16px; /* 原为 20px */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); /* 原为 260px */
}

.service-card {
  padding: 20px; /* 原为 28px，减少 29% */
}

.service-icon {
  width: 42px; /* 原为 50px */
  height: 42px; /* 原为 50px */
  font-size: 18px; /* 原为 22px */
  margin-bottom: 12px; /* 原为 16px */
}

.service-name {
  font-size: 0.95rem; /* 原为 1.05rem */
  margin-bottom: 6px; /* 原为 8px */
}

.service-desc {
  font-size: 12px; /* 原为 13px */
  line-height: 1.6; /* 原为 1.7 */
  margin-bottom: 10px; /* 原为 12px */
}

/* =====================================================
   6. 统计区优化
   ===================================================== */
.stats-section {
  padding: 36px 0; /* 原为 50px 0，减少 28% */
}

.stats-grid {
  gap: 16px; /* 原为 24px */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 原为 180px */
}

.stat-item {
  padding: 16px 10px; /* 原为 20px */
}

.stat-num {
  font-size: 2rem; /* 原为 2.5rem，减少 20% */
  margin-bottom: 4px; /* 原为 6px */
}

.stat-unit {
  font-size: 1rem; /* 原为 1.2rem */
}

.stat-label {
  font-size: 13px; /* 原为 14px */
}

/* =====================================================
   7. 按钮优化
   ===================================================== */
.btn {
  padding: 8px 18px; /* 原为 10px 22px */
  font-size: 13px; /* 原为 14px */
}

.btn-lg {
  padding: 11px 26px; /* 原为 13px 30px */
  font-size: 14px; /* 原为 15px */
}

.btn-sm {
  padding: 6px 14px; /* 原为 7px 16px */
  font-size: 12px; /* 原为 13px */
}

/* =====================================================
   8. 文章卡片优化
   ===================================================== */
.article-card {
  padding: 14px; /* 原为 18px */
  gap: 12px; /* 原为 16px */
}

.article-card-img {
  width: 180px; /* 原为 220px，减少 18% */
  min-height: 130px; /* 原为 160px，减少 19% */
}

.article-card-title {
  font-size: 0.95rem; /* 原为 1rem */
  line-height: 1.35; /* 原为 1.4 */
}

.article-card-excerpt {
  font-size: 13px; /* 原为 14px */
  line-height: 1.5;
}

.article-card-meta {
  font-size: 11px; /* 原为 12px */
  gap: 12px; /* 原为 14px */
}

/* =====================================================
   9. 文章详情页优化
   ===================================================== */
.article-detail {
  padding: 24px; /* 原为 35px，减少 31% */
}

.article-detail-title {
  font-size: 1.35rem; /* 原为 1.6rem，减少 16% */
  line-height: 1.3; /* 原为 1.35 */
  margin-bottom: 12px; /* 原为 16px */
}

.article-detail-meta {
  font-size: 12px; /* 原为 13px */
  gap: 12px; /* 原为 16px */
  margin-bottom: 18px; /* 原为 25px，减少 28% */
  padding-bottom: 14px; /* 原为 20px */
}

.article-content {
  font-size: 14px; /* 原为 15px */
  line-height: 1.75; /* 原为 1.85 */
}

.article-content h2 {
  font-size: 1.1rem; /* 原为 1.25rem */
  margin: 22px 0 10px; /* 原为 28px 0 14px */
  padding-bottom: 6px; /* 原为 8px */
}

.article-content h3 {
  font-size: 1rem; /* 原为 1.1rem */
  margin: 18px 0 8px; /* 原为 24px 0 10px */
}

.article-content p {
  margin-bottom: 12px; /* 原为 16px，减少 25% */
}

.article-content pre {
  padding: 14px; /* 原为 18px */
  font-size: 12px; /* 原为 13px */
  margin: 12px 0; /* 原为 16px 0 */
}

.article-content blockquote {
  padding: 10px 14px; /* 原为 12px 18px */
  margin: 12px 0; /* 原为 16px 0 */
}

.article-content table {
  font-size: 13px; /* 原为 14px */
}

.article-content th,
.article-content td {
  padding: 8px 12px; /* 原为 10px 14px */
}

/* =====================================================
   10. 侧边栏优化
   ===================================================== */
.sidebar-widget {
  padding: 18px; /* 原为 22px */
  margin-bottom: 16px; /* 原为 20px */
}

.sidebar-widget-title {
  font-size: 0.95rem; /* 原为 1rem */
  margin-bottom: 12px; /* 原为 16px */
  padding-bottom: 8px; /* 原为 10px */
}

/* =====================================================
   11. 面包屑优化
   ===================================================== */
.breadcrumb {
  padding: 10px 0; /* 原为 12px 0 */
  font-size: 12px; /* 原为 13px */
}

/* =====================================================
   12. 标签优化
   ===================================================== */
.article-tags {
  margin-top: 18px; /* 原为 25px */
  padding-top: 14px; /* 原为 18px */
  gap: 6px; /* 原为 8px */
}

.article-tag {
  padding: 2px 10px; /* 原为 3px 12px */
  font-size: 11px; /* 原为 12px */
}

/* =====================================================
   13. 页脚优化
   ===================================================== */
.footer-bottom {
  padding: 16px 0; /* 原为 20px 0 */
  font-size: 12px; /* 原为 13px */
}

/* =====================================================
   14. 容器宽度优化
   ===================================================== */
.container {
  max-width: 1100px; /* 原为 1180px，减少 7% */
  padding: 0 16px; /* 原为 0 20px */
}

/* =====================================================
   15. 响应式优化 - 平板端
   ===================================================== */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }
  
  .section {
    padding: 30px 0; /* 原为 50px 0（响应式已改小，但可以进一步优化） */
  }
  
  .section-title {
    font-size: 1.25rem; /* 原为 1.3rem（响应式已改小） */
  }
  
  .hero-title {
    font-size: 1.7rem;
  }
  
  .services-grid {
    gap: 14px;
  }
  
  .article-card-img {
    width: 160px;
    min-height: 120px;
  }
}

/* =====================================================
   16. 响应式优化 - 手机端
   ===================================================== */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
  
  .section {
    padding: 26px 0; /* 原为 32px 0（响应式） */
  }
  
  .section-header {
    margin-bottom: 18px; /* 原为 20px */
  }
  
  .section-title {
    font-size: 1.15rem; /* 原为 1.3rem */
  }
  
  .hero {
    padding: 30px 0 36px;
  }
  
  .hero-title {
    font-size: 1.5rem;
  }
  
  .stats-grid {
    gap: 10px;
  }
  
  .stat-num {
    font-size: 1.7rem;
  }
  
  .article-detail {
    padding: 16px; /* 原为 18px（响应式） */
  }
  
  .article-detail-title {
    font-size: 1.15rem; /* 原为 1.25rem */
  }
  
  .article-content {
    font-size: 13px; /* 原为 14px（响应式） */
  }
  
  .sidebar-widget {
    padding: 14px; /* 原为 16px（响应式） */
  }
}

/* =====================================================
   17. 响应式优化 - 小手机端
   ===================================================== */
@media (max-width: 480px) {
  .section {
    padding: 22px 0;
  }
  
  .hero-title {
    font-size: 1.3rem;
  }
  
  .hero-desc {
    font-size: 13px;
  }
  
  .btn-lg {
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* =====================================================
   18. 三步走引导卡片优化（新增区块）
   ===================================================== */
.guide-cards {
  gap: 14px; /* 原为 16px */
}

.guide-card {
  padding: 18px 16px; /* 原为 22px 20px */
}

.guide-card-icon {
  font-size: 24px; /* 原为 28px */
  margin-bottom: 8px; /* 原为 12px */
}

.guide-card-title {
  font-size: 0.9rem; /* 原为 1rem */
  margin-bottom: 4px; /* 原为 6px */
}

.guide-card-desc {
  font-size: 0.8rem; /* 原为 0.85rem */
  line-height: 1.4;
}

/* =====================================================
   19. 免费工具条优化（新增区块）
   ===================================================== */
/* 工具条整体高度压缩 */
.section[style*="background:linear-gradient"][style*="#0f3460"] {
  padding: 0;
}

.section[style*="background:linear-gradient"][style*="#0f3460"] .container {
  padding: 18px 16px; /* 原为 22px 20px */
}

/* =====================================================
   20. 通用间距工具类（新增）
   ===================================================== */
/* 减少标题下方间距 */
.mt-compact {
  margin-top: 12px !important;
}

.mb-compact {
  margin-bottom: 12px !important;
}

.pt-compact {
  padding-top: 12px !important;
}

.pb-compact {
  padding-bottom: 12px !important;
}