/* ============================================================
   service.html 专用样式 — 统一设计系统
   三个板块（热点/国内/涉外）使用完全一致的卡片、标题、间距
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root {
    --svc-primary: #1f5fae;
    --svc-primary-dark: #174a8a;
    --svc-text: #1a3a5c;
    --svc-text-secondary: #5a6a7a;
    --svc-border: #e3e8ee;
    --svc-bg: #ffffff;
    --svc-bg-hover: #f4f8ff;
    --svc-radius: 8px;
    --svc-shadow: 0 1px 3px rgba(0,0,0,.06);
    --svc-shadow-hover: 0 4px 16px rgba(31,95,174,.18);
    --svc-gap: 16px;
    --svc-section-gap: 48px;
}

/* ---------- 板块容器 ---------- */
.svc-section {
    margin-bottom: var(--svc-section-gap);
}
.svc-section:last-child {
    margin-bottom: 0;
}

/* ---------- 板块标题（统一） ---------- */
.svc-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--svc-text);
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    position: relative;
    letter-spacing: 0.5px;
}
.svc-section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background: var(--svc-primary);
    border-radius: 2px;
}

/* ---------- 卡片网格（统一） ---------- */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--svc-gap);
}
@media (max-width: 991px) {
    .svc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 400px) {
    .svc-grid { grid-template-columns: 1fr; }
}

/* ---------- 卡片（统一） ---------- */
.svc-card {
    background: var(--svc-bg);
    border: 1px solid var(--svc-border);
    border-radius: var(--svc-radius);
    padding: 20px 16px;
    text-align: center;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: var(--svc-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
}
.svc-card a {
    display: block;
    color: var(--svc-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
}
.svc-card:hover {
    background: var(--svc-primary);
    border-color: var(--svc-primary);
    box-shadow: var(--svc-shadow-hover);
    transform: translateY(-2px);
}
.svc-card:hover a {
    color: #fff;
}

/* ---------- 板块描述 ---------- */
.svc-section-desc {
    font-size: 14px;
    color: var(--svc-text-secondary);
    line-height: 1.7;
    margin: 16px 0 0 0;
    max-width: 720px;
}

/* ---------- 查看全部按钮 ---------- */
.svc-actions {
    text-align: center;
    margin-top: 32px;
}
#viewAllBtn {
    display: inline-block;
    background: var(--svc-primary);
    border: none;
    color: #fff;
    border-radius: 30px;
    padding: 14px 42px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(31,95,174,.3);
}
#viewAllBtn:hover {
    background: var(--svc-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(31,95,174,.4);
}
#viewAllBtn:active {
    transform: translateY(0);
}

/* ============================================================
   弹窗样式（保持不变）
   ============================================================ */
.asm-overlay { position:fixed; inset:0; background:rgba(0,30,60,.55); display:none; align-items:flex-start; justify-content:center; z-index:10000; padding:40px 15px; overflow-y:auto; }
.asm-overlay.open { display:flex; }
.asm-dialog { background:#fff; width:100%; max-width:760px; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.3); max-height:86vh; display:flex; flex-direction:column; animation:asmPop .25s ease; }
@keyframes asmPop { from { transform:translateY(20px); opacity:0; } to { transform:none; opacity:1; } }
.asm-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
.asm-title { margin:0; font-size:18px; font-weight:600; }
.asm-close { border:none; background:none; font-size:28px; line-height:1; cursor:pointer; color:#888; }
.asm-close:hover { color:#333; }
.asm-body { padding:16px 20px 24px; overflow-y:auto; }
.asm-search { width:100%; padding:10px 14px; border:1px solid #d8dde3; border-radius:8px; font-size:15px; outline:none; box-sizing:border-box; }
.asm-search:focus { border-color:var(--svc-primary); }
.asm-letter { font-weight:700; color:var(--svc-primary); margin:18px 0 8px; font-size:15px; }
.asm-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.asm-grid a { display:block; padding:12px 14px; border:1px solid #eef1f4; border-radius:8px; color:#333; text-decoration:none; transition:.2s; font-size:14px; }
.asm-grid a:hover { background:var(--svc-bg-hover); border-color:#bcd6f5; color:var(--svc-primary); }
.asm-empty { text-align:center; color:#999; padding:30px 0; }
@media (max-width:575px){ .asm-grid { grid-template-columns:1fr; } }