/* =========================================================
 * 分类页样式
 * ========================================================= */

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

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

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

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

/* ============ 左侧分类导航 ============ */
.cat-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; }
.cat-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; }
.cat-sidebar-nav { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.cat-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; }
.cat-sidebar-item:hover { background: rgba(79,172,254,.08); color: #1a2a6c; padding-left: 22px; }
.cat-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; }
.cat-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; }
.cat-sidebar-item.active .cat-sidebar-count { background: rgba(79,172,254,.2); color: #1a2a6c; }

/* ============ 工具栏 ============ */
.cat-toolbar { background: #fff; border-radius: 14px; padding: 18px 26px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 6px 20px rgba(10,26,58,.05); border: 1px solid #e2e8f0; }
.cat-toolbar-title { font-size: 1.05rem; font-weight: 700; color: #0a1a3a; }
.cat-toolbar-sorts { display: flex; gap: 5px; background: #f5f8fb; border-radius: 10px; padding: 5px; }
.sort-btn { padding: 8px 18px; font-size: 0.95rem; color: #6a7a8a; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
.sort-btn:hover { color: #1a2a6c; }
.sort-btn.active { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; font-weight: 700; box-shadow: 0 2px 8px rgba(26,42,108,.2); }

/* ============ 网格布局 ============ */
.layout-grid .cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.layout-grid .cat-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; }
.layout-grid .cat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(26,42,108,.12); border-color: rgba(79,172,254,.3); }
.layout-grid .cat-card-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #f5f8fb; }
.layout-grid .cat-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.layout-grid .cat-card:hover .cat-card-thumb img { transform: scale(1.05); }
.layout-grid .cat-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.layout-grid .cat-card-title { font-size: 1.15rem; font-weight: 700; color: #0a1a3a; line-height: 1.45; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.3em; }
.layout-grid .cat-card-title a { color: inherit; text-decoration: none; transition: color 0.3s; }
.layout-grid .cat-card-title a:hover { color: #1a2a6c; }
.layout-grid .cat-card-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; }
.layout-grid .cat-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.86rem; color: #8a9aae; padding-top: 14px; border-top: 1px dashed #eef2f6; }
.layout-grid .cat-card-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.layout-grid .cat-card-meta .meta-item i { color: #4facfe; }
.layout-grid .cat-card-meta .meta-more { color: #1a2a6c; font-weight: 700; text-decoration: none; transition: color 0.3s; font-size: 0.9rem; }
.layout-grid .cat-card-meta .meta-more:hover { color: #4facfe; }

/* ============ 新闻布局：一行一条 ============ */
.layout-news .cat-news-list { display: flex; flex-direction: column; gap: 20px; }
.layout-news .cat-news-item {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px rgba(10,26,58,.04);
    transition: all 0.3s ease;
    display: flex;
    gap: 24px;
    padding: 20px;
    align-items: stretch;
}
.layout-news .cat-news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(26,42,108,.1);
    border-color: rgba(79,172,254,.3);
}
.layout-news .cat-news-thumb {
    flex-shrink: 0;
    width: 260px;
    height: 175px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f8fb;
    display: block;
}
.layout-news .cat-news-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.layout-news .cat-news-item:hover .cat-news-thumb img { transform: scale(1.05); }
.layout-news .cat-news-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0; }
.layout-news .cat-news-title { font-size: 1.3rem; 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; }
.layout-news .cat-news-title a { color: inherit; text-decoration: none; transition: color 0.3s; }
.layout-news .cat-news-title a:hover { color: #1a2a6c; }
.layout-news .cat-news-excerpt { font-size: 1rem; color: #6a7a8a; line-height: 1.75; margin: 0 0 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.layout-news .cat-news-meta { display: flex; align-items: center; gap: 18px; font-size: 0.9rem; color: #8a9aae; padding-top: 14px; border-top: 1px dashed #eef2f6; flex-wrap: wrap; }
.layout-news .cat-news-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.layout-news .cat-news-meta .meta-item i { color: #4facfe; }
.layout-news .cat-news-cat { display: inline-block; padding: 4px 12px; background: rgba(26,42,108,.08); color: #1a2a6c; border-radius: 10px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
.layout-news .cat-news-cat:hover { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; }
.layout-news .cat-news-meta .meta-more { margin-left: auto; color: #1a2a6c; font-weight: 700; text-decoration: none; transition: color 0.3s; font-size: 0.95rem; }
.layout-news .cat-news-meta .meta-more:hover { color: #4facfe; }

/* 通用角标 / 占位图 */
.cat-card-badges { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.cat-card-badges span { display: inline-block; padding: 4px 11px; border-radius: 10px; font-size: 0.74rem; font-weight: 700; color: #fff; }
.badge-pin { background: linear-gradient(135deg, #1a2a6c, #4facfe); }
.badge-rec { background: linear-gradient(135deg, #10b981, #059669); }
.badge-hot { background: linear-gradient(135deg, #ff6b35, #f7931e); }
.cat-card-stats { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,.55); color: #fff; font-size: 0.78rem; padding: 4px 11px; border-radius: 12px; display: flex; align-items: center; gap: 4px; z-index: 2; }

.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; }
.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: 22px 22px; opacity: 0.5; }
.img-ph::after { content: attr(data-label); position: relative; z-index: 1; padding: 5px 14px; background: rgba(255,255,255,.85); border-radius: 16px; font-weight: 500; color: #4a5a6a; font-size: 0.8rem; }

/* ============ 分页 ============ */
.cat-pager { margin: 44px 0 14px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.cat-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: 9px; border: 1px solid #e2e8f0; text-decoration: none; font-weight: 500; font-size: 1rem; transition: all 0.3s ease; }
.cat-pager .page-numbers:hover { background: #1a2a6c; color: #fff; border-color: #1a2a6c; transform: translateY(-2px); }
.cat-pager .page-numbers.current { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-color: #1a2a6c; cursor: default; }
.cat-pager .page-numbers.dots { background: transparent; border: none; }

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

/* ============ CTA ============ */
.cat-cta { padding: 44px 0 80px; background: #f5f8fb; }
.cat-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; }
.cat-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; }
.cat-page .cta-block h3 { font-size: 1.8rem; font-weight: 800; margin: 0 0 14px; position: relative; }
.cat-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) {
    .cat-layout { grid-template-columns: 1fr; gap: 22px; }
    .cat-sidebar { position: static; display: flex; flex-wrap: wrap; padding: 14px; gap: 10px; }
    .cat-sidebar-header { display: none; }
    .cat-sidebar-nav { flex-direction: row; flex-wrap: wrap; padding: 0; gap: 10px; }
    .cat-sidebar-item { padding: 10px 18px; border-radius: 30px; border: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; font-size: 0.96rem; }
    .cat-sidebar-item:hover { padding-left: 18px; }
    .cat-sidebar-item.active { background: linear-gradient(135deg, #1a2a6c, #4facfe); color: #fff; border-color: #1a2a6c; }
    .cat-sidebar-item.active .cat-sidebar-count { background: rgba(255,255,255,.25); color: #fff; }
    .layout-grid .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .layout-news .cat-news-thumb { width: 220px; height: 148px; }
    .cat-hero-title { font-size: 2rem; }
    .cat-hero-desc { font-size: 1.05rem; }
    .cat-cta .cta-block h3 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
    .layout-grid .cat-grid { grid-template-columns: 1fr; }
    .cat-hero { padding: 36px 0 32px; }
    .cat-hero-title { font-size: 1.5rem; }
    .cat-hero-desc { font-size: 0.98rem; }
    .cat-cta .cta-block h3 { font-size: 1.25rem; }
    .cat-cta .cta-block p { font-size: 1rem; }
    .cat-toolbar { flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px 18px; }
    .cat-toolbar-sorts { width: 100%; justify-content: space-between; }
    .sort-btn { flex: 1; text-align: center; padding: 8px 10px; font-size: 0.88rem; }

    .layout-news .cat-news-item { flex-direction: column; padding: 16px; gap: 14px; }
    .layout-news .cat-news-thumb { width: 100%; height: 200px; }
    .layout-news .cat-news-title { font-size: 1.1rem; }
    .layout-news .cat-news-excerpt { font-size: 0.95rem; -webkit-line-clamp: 3; }
    .layout-news .cat-news-meta { gap: 12px; font-size: 0.82rem; }
    .layout-news .cat-news-meta .meta-more { margin-left: 0; }
}