/* =========================================================
 * 案例列表页样式
 * ========================================================= */

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

/* ============ Hero ============ */
.list-hero { background: linear-gradient(135deg, #082747 0%, #1a2a5a 55%, #334155 100%); padding: 72px 0 60px; color: #fff; position: relative; overflow: hidden; }
.list-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(79,172,254,.16) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(16,185,129,.1) 0%, transparent 55%); pointer-events: none; }
.list-hero .content-wrap { position: relative; z-index: 2; }
.list-hero-title { font-size: 2.2rem; font-weight: 800; line-height: 1.3; margin-bottom: 16px; letter-spacing: -0.5px; background: linear-gradient(135deg, #fff 0%, #e6f3ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; max-width: 1000px; }
.list-hero-desc { font-size: 1.05rem; color: #c7e0f0; line-height: 1.75; max-width: 880px; margin: 0; }

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

/* ============ 主体 ============ */
.list-main { padding: 44px 0 20px; }
.list-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }

/* ============ 左侧分类 ============ */
.list-sidebar { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(10,26,58,.06); border: 1px solid #e2e8f0; overflow: hidden; position: sticky; top: 100px; }
.list-sidebar-header { padding: 20px 24px; background: linear-gradient(135deg, #1a2a6c, #3a5a9a); color: #fff; font-size: 1.15rem; font-weight: 700; text-align: center; }
.list-sidebar-nav { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.list-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; }
.list-sidebar-item:hover { background: rgba(79,172,254,.08); color: #1a2a6c; padding-left: 22px; }
.list-sidebar-item.active { background: linear-gradient(135deg, rgba(79,172,254,.12), rgba(26,42,108,.08)); color: #1a2a6c; font-weight: 700; border-left-color: #4facfe; }
.list-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; }
.list-sidebar-item.active .list-sidebar-count { background: rgba(79,172,254,.2); color: #1a2a6c; }

/* ============ 卡片网格 ============ */
.case-list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.case-list-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(10,26,58,.05); transition: all 0.3s ease; display: flex; flex-direction: column; }
.case-list-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26,42,108,.1); border-color: rgba(79,172,254,.3); }
.case-list-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; position: relative; background: #f5f8fb; }
.case-list-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.case-list-card:hover .case-list-thumb img { transform: scale(1.06); }
.case-list-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; }
.case-list-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: 20px 20px; opacity: 0.5; }
.case-list-thumb .img-ph::after { content: attr(data-label); position: relative; z-index: 1; padding: 5px 12px; background: rgba(255,255,255,.8); border-radius: 18px; font-weight: 500; color: #4a5a6a; font-size: 0.8rem; }

/* 角标 */
.case-list-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.case-list-badges span { display: inline-block; padding: 4px 11px; border-radius: 12px; font-size: 0.76rem; font-weight: 700; color: #fff; line-height: 1.5; letter-spacing: 0.3px; }
.badge-pin { background: linear-gradient(135deg, #1a2a6c, #4facfe); }
.badge-rec { background: linear-gradient(135deg, #10b981, #059669); }
.badge-hot { background: linear-gradient(135deg, #ff6b35, #f7931e); }

/* 卡片正文 */
.case-list-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.case-list-title { font-size: 1.15rem; font-weight: 700; color: #0a1a3a; line-height: 1.4; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.case-list-title a { color: inherit; text-decoration: none; transition: color 0.3s; }
.case-list-title a:hover { color: #1a2a6c; }
.case-list-excerpt { font-size: 0.95rem; color: #6a7a8a; line-height: 1.7; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.case-list-meta { display: flex; align-items: center; gap: 14px; font-size: 0.86rem; color: #8a9aae; padding-top: 14px; border-top: 1px dashed #eef2f6; }
.case-list-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.case-list-meta .meta-item i { color: #4facfe; }
.case-list-meta .meta-more { margin-left: auto; color: #1a2a6c; font-weight: 700; text-decoration: none; transition: color 0.3s; font-size: 0.92rem; }
.case-list-meta .meta-more:hover { color: #4facfe; }

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

/* ============ 空状态 ============ */
.list-empty { text-align: center; padding: 100px 20px; color: #8a9aae; font-size: 1.05rem; background: #fff; border-radius: 16px; border: 1px dashed #e2e8f0; }

/* ============ CTA ============ */
.list-cta { padding: 44px 0 80px; }
.list-page .cta-block { background: linear-gradient(135deg, #1a2a6c, #3a5a9a); border-radius: 20px; padding: 52px 36px; text-align: center; color: #fff; box-shadow: 0 14px 34px rgba(26,42,108,.2); position: relative; overflow: hidden; }
.list-page .cta-block::before { content: ''; position: absolute; top: -50%; right: -20%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(79,172,254,.28) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.list-page .cta-block h3 { font-size: 1.7rem; font-weight: 800; margin: 0 0 14px; position: relative; }
.list-page .cta-block p { color: rgba(255,255,255,.8); margin: 0 0 26px; font-size: 1.05rem; position: relative; }
.cta-block-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.cta-btn-primary { background: #fff; color: #1a2a6c; padding: 14px 34px; 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: 14px 34px; 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) {
    .list-layout { grid-template-columns: 1fr; gap: 22px; }
    .list-sidebar { position: static; display: flex; flex-wrap: wrap; padding: 14px; gap: 10px; }
    .list-sidebar-header { display: none; }
    .list-sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 10px; }
    .list-sidebar-item { padding: 10px 18px; border-radius: 30px; border: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; font-size: 0.96rem; }
    .list-sidebar-item:hover { padding-left: 18px; }
    .list-sidebar-item.active { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-color: #1a2a6c; }
    .list-sidebar-item.active .list-sidebar-count { background: rgba(255,255,255,.3); color: #fff; }
    .list-sidebar-count { margin-left: 6px; }
    .case-list-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .list-hero-title { font-size: 1.8rem; }
    .list-hero-desc { font-size: 1rem; }
    .list-page .cta-block h3 { font-size: 1.4rem; }
}
@media (max-width: 576px) {
    .case-list-grid { grid-template-columns: 1fr; }
    .list-hero { padding: 44px 0 38px; }
    .list-hero-title { font-size: 1.4rem; }
    .list-hero-desc { font-size: 0.95rem; }
    .list-page .cta-block h3 { font-size: 1.2rem; }
    .list-pager .page-numbers { min-width: 38px; height: 38px; padding: 0 11px; font-size: 0.9rem; }
}