/* style.css - 兼容版：保持方块布局，仅缩小手机端间距 */
:root {
    --primary-color: #0052d9;
    --bg-color: #f2f3f5;
    --text-main: #1d1d1f;
    --text-sub: #86868b;
    --card-bg: #ffffff;
}

html, body { height: 100%; margin: 0; padding: 0; }
body { 
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-main); 
    display: flex; 
    flex-direction: column; 
}

.content-wrapper { flex: 1 0 auto; }

/* 统一页眉 */
header { 
    background: #ffffff; padding: 0 5%; height: 64px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
    display: flex; align-items: center; position: sticky; top: 0; z-index: 100; 
}
.logo { font-size: 18px; font-weight: 600; color: var(--primary-color); }

/* 容器布局 */
.main-container { max-width: 1100px; margin: 40px auto; padding: 0 24px; }

/* 英雄横幅 */
.hero-banner { 
    background: linear-gradient(135deg, #0052d9 0%, #0575e6 100%); 
    border-radius: 16px; padding: 40px; color: white; margin-bottom: 32px; 
}
.hero-banner h2 { margin: 0 0 12px 0; font-size: 28px; }
.hero-banner p { margin: 0; opacity: 0.85; font-size: 16px; }

/* 核心：PC端网格布局 */
.service-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 24px; 
}

.service-card { 
    background: var(--card-bg); 
    padding: 30px; 
    border-radius: 14px; 
    text-align: center; 
    text-decoration: none; 
    color: var(--text-main); 
    display: flex; 
    flex-direction: column; /* 始终保持上下排布：图标-标题-描述 */
    align-items: center;
    transition: all 0.3s ease;
}

.icon-box { 
    width: 64px; height: 64px; background: #f0f5ff; border-radius: 16px; 
    margin-bottom: 20px; display: flex; align-items: center; justify-content: center; 
    font-size: 28px; color: var(--primary-color); 
}

.service-card h3 { margin: 0 0 10px 0; font-size: 18px; }
.service-card p { margin: 0; font-size: 14px; color: var(--text-sub); line-height: 1.6; }
/* --- 通用页脚基础样式 --- */
footer { 
    flex-shrink: 0; 
    background: #ffffff; 
    border-top: 1px solid #e5e5e5; 
    padding: 10px 0; 
    text-align: center; 
    color: var(--text-sub); 
    font-size: 13px; 
    line-height: 1.4; /* 增加行高防止重叠 */
}
/* --- 2. 下载页面专用样式 (新增或覆盖) --- */
.back-link {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
}

.file-list { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; /* 条目间距 */
}

.file-item { 
    background: #fff; 
    padding: 10px 15px; 
    border-radius: 8px; 
    display: flex; 
    justify-content: space-between; /* 名字左对齐，按钮右对齐 */
    align-items: center; 
    text-decoration: none; 
    color: var(--text-main); 
    border: 1px solid #e5e5e5; 
    transition: background 0.2s;
}

.file-item:hover { background: #f8f9fa; }

.file-info { display: flex; align-items: center; gap: 10px; }
.file-icon { font-size: 18px; }
.file-item span { font-size: 14px; }
.download-btn { 
    color: var(--primary-color); 
    font-weight: 600; 
    font-size: 13px; 
    white-space: nowrap; 
}
/* ============================================================
   手机端适配：当屏幕较小时，缩小尺寸而非改变结构
   ============================================================ */
@media screen and (max-width: 768px) {
    /* 1. 缩小容器间距 */
    .main-container { margin: 15px auto; padding: 0 12px; }
    
    /* 2. 压缩 Banner */
    .hero-banner { padding: 20px 15px; margin-bottom: 15px; border-radius: 10px; }
    .hero-banner h2 { font-size: 20px; }
    .hero-banner p { font-size: 13px; }

    /* 3. 强制网格为单列，并缩小间隙 */
    .service-grid { 
        grid-template-columns: 1fr; /* 如果想一屏看更多，可以改为 1fr 1fr 变两列 */
        gap: 12px; 
    }

    /* 4. 关键：缩小卡片内的“上下留白” */
    .service-card { 
        padding: 15px; /* 从 30px 压缩至 15px */
        border-radius: 10px; 
    }
    
    /* 缩小图标 */
    .icon-box { 
        width: 44px; height: 44px; 
        margin-bottom: 10px; 
        font-size: 20px; 
        border-radius: 10px; 
    }

    /* 缩小文字间距 */
    .service-card h3 { font-size: 16px; margin-bottom: 4px; }
    .service-card p { 
        font-size: 12px; 
        line-height: 1.4; /* 减小行高 */
    }

    header { height: 50px; }
    footer { padding: 15px 0; font-size: 11px; }
}