/* ============================================================
   矩阵动态列表页 css
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter','Segoe UI',system-ui,-apple-system,'Microsoft YaHei',sans-serif;
  background:#f5f5f5; color:#666; line-height:1.7; -webkit-font-smoothing:antialiased; padding:0 20px; }
.container { max-width:1400px; margin:0 auto; padding:20px 0 60px; }

/* ---------- 页眉（与内容页保持一致） ---------- */
.site-header { position:relative; padding:24px 40px; margin-bottom:26px; background:#0F3057;
  border-radius:12px; box-shadow:0 4px 24px rgba(0,0,0,.3); display:flex; flex-wrap:wrap;
  justify-content:space-between; align-items:center; gap:18px; }
.brand .logo { font-size:1.8rem; font-weight:700; letter-spacing:1px; color:#fff; text-decoration:none; }
.brand .tagline { font-size:.8rem; color:#8a8a9e; margin-left:12px; letter-spacing:2px; font-weight:300;
  border-left:1px solid rgba(255,255,255,.08); padding-left:14px; }
.main-nav { display:flex; gap:26px; font-size:.95rem; font-weight:500; flex-wrap:wrap; }
.main-nav a { color:#b0c4db; text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; transition:all .3s; }
.main-nav a:hover,.main-nav a.active { color:#fff; border-bottom-color:#dc0000; }

/* ---------- 面包屑 ---------- */
.breadcrumb { font-size:.85rem; color:#999; margin-bottom:18px; }
.breadcrumb a { color:#888; text-decoration:none; }
.breadcrumb a:hover { color:#0F3057; }
.breadcrumb span { margin:0 6px; color:#ccc; }

/* ---------- 页面头部 ---------- */
.page-header { padding:10px 0 6px; }
.page-header h1 { font-size:2.4rem; font-weight:700; letter-spacing:2px; color:#1f1f1f; }
.page-header .subtitle { font-size:1rem; color:#999; margin-top:6px; font-weight:300; letter-spacing:1px;
  border-left:3px solid #dc0000; padding-left:16px; }

/* ---------- 搜索栏 ---------- */
.search-bar { display:flex; gap:12px; margin:26px 0 18px; }
.search-bar input { flex:1; padding:13px 18px; border:1px solid #e8e8e8; border-radius:8px;
  background:#fff; color:#333; font-size:.95rem; transition:all .3s; }
.search-bar input:focus { outline:none; border-color:#0F3057; box-shadow:0 0 0 3px rgba(15,48,87,.1); }
.search-bar button { padding:13px 30px; background:#0F3057; color:#fff; border:none; border-radius:8px;
  font-size:.95rem; font-weight:600; cursor:pointer; transition:all .3s; white-space:nowrap; }
.search-bar button:hover { background:#1a4068; }

/* ---------- 三级筛选 ---------- */
.filter-bar { display:flex; gap:18px; flex-wrap:wrap; align-items:center; background:#fff;
  border:1px solid #e8e8e8; border-radius:10px; padding:14px 20px; margin-bottom:26px;
  box-shadow:0 2px 8px rgba(0,0,0,.03); }
.filter-bar .fi { display:flex; align-items:center; gap:8px; }
.filter-bar label { font-size:.85rem; color:#888; white-space:nowrap; }
.filter-bar select { padding:7px 12px; border:1px solid #e8e8e8; border-radius:6px; font-size:.9rem;
  color:#333; background:#fff; min-width:110px; }
.filter-bar .btn-reset { padding:7px 18px; background:#f5f7fa; border:1px solid #e8e8e8; border-radius:6px;
  cursor:pointer; font-size:.9rem; color:#666; transition:all .3s; }
.filter-bar .btn-reset:hover { background:#0F3057; color:#fff; border-color:#0F3057; }

/* ---------- 列表卡片 ---------- */
.news-list { display:flex; flex-direction:column; gap:20px; margin-bottom:20px; }
.news-item { display:flex; gap:20px; background:#fff; border:1px solid #e8e8e8; border-radius:12px;
  padding:24px 28px; transition:all .3s; position:relative; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.03); }
.news-item::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%;
  background:linear-gradient(to bottom,#0F3057,#2D3436); opacity:.25; transition:opacity .3s; }
.news-item:hover { transform:translateY(-4px); border-color:#0F3057; box-shadow:0 12px 32px rgba(15,48,87,.08); }
.news-item:hover::before { opacity:1; }

.ni-pic { flex:0 0 190px; }
.ni-pic img { width:100%; height:132px; object-fit:cover; border-radius:8px; display:block; }
.ni-body { flex:1; min-width:0; }

.news-title { font-size:1.22rem; font-weight:600; margin-bottom:8px; line-height:1.45; }
.news-title a { color:#1f1f1f; text-decoration:none; transition:color .3s; }
.news-title a:hover { color:#0F3057; }

.news-meta { display:flex; gap:20px; flex-wrap:wrap; font-size:.83rem; color:#999; margin-bottom:10px; }
.news-meta i { margin-right:5px; }
.news-meta time { color:#666; }

.news-summary { font-size:.95rem; color:#666; line-height:1.75; margin-bottom:12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.ni-tags { display:flex; gap:6px; flex-wrap:wrap; }
.tg { display:inline-block; background:#eef2f7; color:#0F3057; padding:2px 11px; border-radius:20px;
  font-size:.75rem; max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg.g { background:#fff4e5; color:#b26a00; max-width:none; white-space:normal; }
.tg.s { background:#eaf7ef; color:#1a7f45; }

.no-result { background:#fff; border:1px dashed #dcdcdc; border-radius:10px; padding:34px 20px;
  text-align:center; color:#999; font-size:.95rem; margin-bottom:20px; }

/* ---------- 分页 ---------- */
.pagination { display:flex; gap:8px; justify-content:center; padding:14px 0 10px; flex-wrap:wrap; }
.pagination a,.pagination strong,.pagination b { display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 14px; border:1px solid #e8e8e8; border-radius:8px; color:#666;
  text-decoration:none; font-size:.9rem; background:#fff; transition:all .3s; }
.pagination a:hover { border-color:#0F3057; color:#0F3057; }
.pagination strong,.pagination b { background:#0F3057; border-color:#0F3057; color:#fff; }

/* ---------- 页脚 ---------- */
.site-footer { margin-top:26px; border-top:1px solid #e8e8e8; padding:30px 0 20px; text-align:center;  font-size:.85rem; color:#999; }
.site-footer .footer-links { margin-top:10px; }
.site-footer  a { color:#999; text-decoration:none; margin:0 10px; }
.site-footer  a:hover { color:#0F3057; }

@media (max-width:992px){
  .site-header { padding:20px 24px; flex-direction:column; align-items:stretch; gap:14px; }
  .brand .tagline { display:block; margin-left:0; padding-left:0; border-left:none; margin-top:2px; }
  .page-header h1 { font-size:1.9rem; }
  .news-item { padding:20px 22px; }
  .ni-pic { flex:0 0 150px; }
  .ni-pic img { height:110px; }
}
@media (max-width:768px){
  body { padding:0 12px; }
  .page-header h1 { font-size:1.6rem; }
  .search-bar { flex-direction:column; }
  .search-bar button { width:100%; }
  .news-item { flex-direction:column; padding:18px; }
  .ni-pic { flex:none; }
  .ni-pic img { height:170px; }
  .news-title { font-size:1.05rem; }
}
/* 空字段 / 无图 / 筛选计数 */
.hidden { display:none !important; }
.f-count { font-size:.82rem; color:#999; margin-left:auto; }
.news-summary { -webkit-line-clamp:3; }
.filters-applied { color:#0F3057; font-weight:600; }

/* ===== 返回顶部按钮 ===== */
.gotop {
  position: fixed; right: 28px; bottom: 34px;
  width: 50px; height: 50px; padding: 0; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 4px 18px rgba(15,48,87,.18);
  cursor: pointer; z-index: 9999;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.gotop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.gotop-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.gotop-bg { fill: none; stroke: #eceff4; stroke-width: 3; }
.gotop-bar { fill: none; stroke: #0F3057; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 119.38; stroke-dashoffset: 119.38; }
.gotop-arrow { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; }
.gotop-arrow svg { width: 18px; height: 18px; fill: none;
  stroke: #0F3057; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gotop:hover { box-shadow: 0 6px 22px rgba(15,48,87,.28); }
.gotop:hover .gotop-arrow svg { stroke: #dc0000; }
.gotop:hover .gotop-bar { stroke: #dc0000; }
@media (max-width:768px){
  .gotop { right: 14px; bottom: 18px; width: 42px; height: 42px; }
  .gotop-arrow svg { width: 15px; height: 15px; }
}

/* ===== 移动端响应式补丁 · 矩阵动态列表页===== */
.nav-toggle{display:none;position:absolute;top:20px;right:20px;z-index:60;width:44px;height:44px;padding:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:10px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0}
.nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:768px){
  .site-header{position:relative}
  .brand{padding-right:60px}
  .nav-toggle{display:flex}
  .main-nav{display:none!important;width:100%;flex-direction:column;gap:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.12)}
  .main-nav.open{display:flex!important}
  .main-nav a{padding:13px 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .page-header h1{font-size:1.5rem}
  .search-bar{gap:8px}
  .search-bar input{font-size:16px;padding:12px 14px}
  .search-bar button{width:100%;padding:12px}
  .filter-bar{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .filter-bar .fi{flex-direction:column;align-items:stretch;gap:6px}
  .filter-bar select{width:100%;min-width:0}
  .filter-bar .btn-reset{width:100%}
  .f-count{margin-left:0;text-align:center}
  .news-item{flex-direction:column;padding:16px;gap:12px}
  .ni-pic{flex:none;width:100%}
  .ni-pic img{height:180px}
  .news-title{font-size:1rem}
  .news-summary{font-size:.9rem;-webkit-line-clamp:3}
  .ni-tags .tg{max-width:100%;font-size:.72rem}
  .pagination a,.pagination strong,.pagination b{min-width:36px;height:36px;padding:0 10px;font-size:.85rem}
}


/* ============================================================
   【补丁】Font Awesome 图标配色 —— 矩阵动态列表页
   2026-09-16 追加

   问题根因：图标是"字体字形"，颜色 = 继承父元素的 color。
     .news-meta { color:#999 }   ← meta 行文字是灰的
   所以里面的 <i> 全部跟着变灰。这不是故障，是字体图标的正常特性。
   对比：详细页 .faq-box h2 i 单独设过 color:#0F3057，那些就是蓝的。

   改色只需改下面 :root 里的变量值，全页图标统一生效。
   ============================================================ */

:root{
  --ico-main:   #0F3057;   /* 主色：分类(fa-folder)、来源(fa-share-nodes)、FAQ、相关内容 */
  --ico-accent: #dc0000;   /* 强调色：hover 提亮 */
  --ico-views:  #1a7f45;   /* 浏览量(fa-eye)：绿色，呼应 .tg.s */
  --ico-mute:   #8a97a8;   /* 次要灰：日期(fa-calendar)、日历 */
  --ico-opa:    .85;       /* 默认透明度，让图标比文字略轻 */
}

/* 文字保持原灰，只给图标上色 */
.news-meta { color:#999; }

.news-meta i {
  color: var(--ico-main);
  opacity: var(--ico-opa);
  transition: color .3s, opacity .3s;
}

/* 浏览量单独用绿色，一眼能区分 */
.news-meta .views i { color: var(--ico-views); }

/* 日期保持低调（若有日历图标） */
.news-meta .fa-calendar { color: var(--ico-mute); }

/* 鼠标划过整张卡片时，图标提亮 */
.news-item:hover .news-meta i { opacity:1; color:var(--ico-accent); }

/* 搜索按钮里的放大镜：按钮底色是深蓝，图标保持白 */
.search-bar button i { color:#fff; opacity:1; }
.search-bar button:hover i { color:#fff; }

/* 可选：图标等宽，meta 行对齐更整齐（需同步给 HTML 加 fa-fw） */
.fa-fw,
.news-meta i[class*="fa-"] {
  display:inline-block;
  width:1.15em;
  text-align:center;
}

/* 移动端微调：小屏图标略收 */
@media (max-width:768px){
  .news-meta i { opacity:.9; }
}