/* =========================================================
 * 服务列表页样式
 * ========================================================= */

/* ============ 内容容器（1440px） ============ */
.svc-page .content-wrap {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}
@media (max-width: 1600px) { .svc-page .content-wrap { max-width: 1400px; } }
@media (max-width: 1400px) { .svc-page .content-wrap { max-width: 1280px; padding: 0 28px; } }
@media (max-width: 1200px) { .svc-page .content-wrap { max-width: 100%; padding: 0 24px; } }
@media (max-width: 768px)  { .svc-page .content-wrap { padding: 0 16px; } }

/* ============ Hero ============ */
.svc-hero { background: #fff; padding: 56px 0 52px; border-bottom: 1px solid #eef2f6; text-align: center; }
.svc-hero-title { font-size: 2.6rem; font-weight: 800; color: #0a1a3a; line-height: 1.3; margin: 0 0 16px; letter-spacing: -0.6px; }
.svc-hero-desc { font-size: 1.15rem; color: #6a7a8a; line-height: 1.8; max-width: 1000px; margin: 0 auto; }

/* ============ 面包屑 ============ */
.svc-breadcrumb-bar { background: #f5f8fb; padding: 22px 0 0; font-size: 0.98rem; color: #8a9aae; }
.svc-breadcrumb-bar a { color: #8a9aae; text-decoration: none; transition: color 0.3s; }
.svc-breadcrumb-bar a:hover { color: #1a2a6c; }
.svc-breadcrumb-bar span { margin: 0 8px; opacity: 0.6; }
.svc-breadcrumb-bar .current { color: #1a2a6c; font-weight: 500; }

/* ============ 主体布局 ============ */
.svc-main { background: #f5f8fb; padding: 44px 0 60px; }
.svc-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }

/* ============ 左侧分类导航 ============ */
.svc-sidebar { background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(10,26,58,.05); border: 1px solid #e2e8f0; overflow: hidden; position: sticky; top: 100px; }
.svc-sidebar-header { padding: 20px 24px; background: linear-gradient(135deg, #1a2a6c, #3a5a9a); color: #fff; font-size: 1.15rem; font-weight: 700; text-align: center; letter-spacing: 0.5px; }
.svc-sidebar-nav { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.svc-sidebar-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #4a5a6a; font-size: 1rem; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; border-left: 3px solid transparent; }
.svc-sidebar-item:hover { background: rgba(79,172,254,.08); color: #1a2a6c; padding-left: 22px; }
.svc-sidebar-item.active { background: linear-gradient(135deg, rgba(79,172,254,.15), rgba(26,42,108,.08)); color: #1a2a6c; font-weight: 700; border-left-color: #4facfe; }
.svc-sidebar-count { font-size: 0.82rem; color: #8a9aae; background: #f5f8fb; padding: 3px 10px; border-radius: 10px; font-weight: 600; min-width: 26px; text-align: center; margin-left: 8px; }
.svc-sidebar-item.active .svc-sidebar-count { background: rgba(79,172,254,.2); color: #1a2a6c; }

/* ============ 工具栏 ============ */
.svc-toolbar { background: #fff; border-radius: 14px; padding: 18px 26px; margin-bottom: 26px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 6px 20px rgba(10,26,58,.05); border: 1px solid #e2e8f0; }
.svc-toolbar-title { font-size: 1.05rem; font-weight: 700; color: #0a1a3a; }
.svc-toolbar-total { font-size: 0.95rem; color: #8a9aae; }

/* ============ 卡片网格 ============ */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 6px 18px rgba(10,26,58,.05); transition: all 0.3s ease; display: flex; flex-direction: column; position: relative; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,42,108,.12); border-color: rgba(79,172,254,.3); }

.svc-badge { position: absolute; top: 16px; right: 16px; padding: 6px 14px; border-radius: 12px; font-size: 0.8rem; font-weight: 700; color: #fff; z-index: 3; letter-spacing: 0.3px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.svc-badge-focus { background: linear-gradient(135deg, #1a2a6c, #4facfe); }
.svc-badge-hot   { background: linear-gradient(135deg, #ff6b35, #f7931e); }
.svc-badge-rec   { background: linear-gradient(135deg, #10b981, #059669); }
.svc-badge-new   { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.svc-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f5f8fb; }
.svc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.svc-card:hover .svc-thumb img { transform: scale(1.05); }
.svc-thumb .img-ph { width: 100%; height: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #d5dee8, #c1cbd6); position: relative; }
.svc-thumb .img-ph::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.5; }
.svc-thumb .img-ph::after { content: attr(data-label); position: relative; z-index: 1; padding: 5px 14px; background: rgba(255,255,255,.85); border-radius: 18px; font-weight: 500; color: #4a5a6a; font-size: 0.82rem; }

.svc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.svc-title { font-size: 1.2rem; font-weight: 700; color: #0a1a3a; line-height: 1.4; margin: 0 0 12px; padding-right: 70px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.svc-title a { color: inherit; text-decoration: none; transition: color 0.3s; }
.svc-title a:hover { color: #1a2a6c; }

.svc-desc { font-size: 0.95rem; color: #6a7a8a; line-height: 1.7; margin: 0 0 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-height: 3.2em; }

.svc-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #f5f8fb; border-radius: 10px; margin-bottom: 16px; }
.svc-price, .svc-source { display: flex; align-items: baseline; gap: 5px; font-size: 0.95rem; }
.price-label, .source-label { color: #8a9aae; font-size: 0.86rem; }
.price-value { color: #1a2a6c; font-weight: 700; }
.source-value { color: #4a5a6a; font-weight: 500; }

.svc-more { display: block; text-align: center; padding: 13px 22px; background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-radius: 60px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 16px rgba(26,42,108,.2); }
.svc-more:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(26,42,108,.3); color: #fff; }

/* ============ 分页 ============ */
.svc-pager { margin: 44px 0 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.svc-pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 16px; background: #fff; color: #1a2a5a; border-radius: 10px; border: 1px solid #e2e8f0; text-decoration: none; font-weight: 500; font-size: 1rem; transition: all 0.3s ease; }
.svc-pager .page-numbers:hover { background: #1a2a6c; color: #fff; border-color: #1a2a6c; transform: translateY(-2px); }
.svc-pager .page-numbers.current { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-color: #1a2a6c; cursor: default; }
.svc-pager .page-numbers.dots { background: transparent; border: none; }

/* ============ 空状态 ============ */
.svc-empty { text-align: center; padding: 100px 20px; background: #fff; border-radius: 14px; border: 1px dashed #e2e8f0; color: #8a9aae; font-size: 1.05rem; }
.svc-empty-tip { font-size: 0.95rem; color: #b0b8c2; margin-top: 10px; }

/* ============ CTA ============ */
.svc-cta { padding: 44px 0 80px; background: #f5f8fb; }
.svc-page .cta-block { background: linear-gradient(135deg, #1a2a6c, #3a5a9a); border-radius: 20px; padding: 56px 40px; text-align: center; color: #fff; box-shadow: 0 14px 34px rgba(26,42,108,.2); position: relative; overflow: hidden; }
.svc-page .cta-block::before { content: ''; position: absolute; top: -50%; right: -20%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(79,172,254,.28) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.svc-page .cta-block h3 { font-size: 1.8rem; font-weight: 800; margin: 0 0 14px; position: relative; }
.svc-page .cta-block p { color: rgba(255,255,255,.8); margin: 0 0 28px; font-size: 1.1rem; position: relative; }
.cta-block-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-btn-primary { background: #fff; color: #1a2a6c; padding: 15px 38px; border-radius: 60px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; font-size: 1.05rem; transition: all 0.3s ease; }
.cta-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,255,255,.25); }
.cta-btn-secondary { background: transparent; color: #fff; padding: 15px 38px; border-radius: 60px; font-weight: 600; text-decoration: none; border: 2px solid rgba(255,255,255,.6); font-size: 1.05rem; transition: all 0.3s ease; }
.cta-btn-secondary:hover { background: rgba(255,255,255,.15); border-color: #fff; }

/* ============ 响应式 ============ */
@media (max-width: 992px) {
    .svc-layout { grid-template-columns: 1fr; gap: 22px; }
    .svc-sidebar { position: static; display: flex; flex-wrap: wrap; padding: 14px; gap: 10px; }
    .svc-sidebar-header { display: none; }
    .svc-sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 10px; }
    .svc-sidebar-item { padding: 10px 18px; border-radius: 30px; border: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; font-size: 0.96rem; }
    .svc-sidebar-item:hover { padding-left: 18px; }
    .svc-sidebar-item.active { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-color: #1a2a6c; }
    .svc-sidebar-item.active .svc-sidebar-count { background: rgba(255,255,255,.25); color: #fff; }
    .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .svc-hero-title { font-size: 2rem; }
    .svc-hero-desc { font-size: 1.05rem; }
    .svc-cta .cta-block h3 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    .svc-grid { grid-template-columns: 1fr; }
    .svc-hero { padding: 36px 0 32px; }
    .svc-hero-title { font-size: 1.5rem; }
    .svc-hero-desc { font-size: 0.98rem; }
    .svc-cta .cta-block h3 { font-size: 1.25rem; }
    .svc-title { padding-right: 0; }
    .svc-info { flex-direction: column; align-items: flex-start; gap: 8px; }
}