/* ==========================================================================
   行业资讯（列表页）· articles.css
   --------------------------------------------------------------------------
   来源：原 app/views/site/articles.php 第 47–114 行的内联 <style> 块，整段搬到本文件。
   那段样式写在 <body> 里、晚于 theme.css 加载，头条卡的底色写死成
   linear-gradient(#131f31 → #111927)，于是日间模式下头条仍是一块深色卡；
   字号也停在 11–15px，比全站正文（--fs-base 19px）小一截。

   本文件的改写约定：
   1) 色值全部走令牌；卡片底与头条渐变改用 --panel / --panel-2，悬停高亮用 --brand。
   2) 字号层级：头条标题 --fs-lg、卡片标题 --fs-base、摘要 --fs-sm、日期与页脚
      --fs-xs。摘要**不得低于 --fs-sm**（用户要求：「摘要不要小于 --fs-sm」），
      因此原 12.5px 直接提到 --fs-sm；标题原 15px 若也落在 --fs-sm 就会与摘要同号，
      卡片失去层级，故取上一档 --fs-base。
   3) 行高：摘要与空状态 --lh-loose，标题 --lh-base / --lh-tight。
   4) 间距走 --sp-*：页头与列表之间 --sp-5，网格 gap --sp-4（小屏 --sp-3），
      卡片内边距 --sp-4，卡片内元素间隔 --sp-3。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页头与筛选条
   -------------------------------------------------------------------------- */

.news-head { padding: var(--sp-6, 40px) 0 6px; }
.news-head h1 { font-size: var(--fs-xl, 32px); font-weight: 700; letter-spacing: -.6px; line-height: var(--lh-tight, 1.3); }
.news-head p { font-size: var(--fs-sm, 18px); color: var(--muted); margin-top: var(--sp-2, 8px); }

.news-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3, 12px); flex-wrap: wrap; margin: var(--sp-5, 32px) 0 var(--sp-4, 16px);
}
.news-count { font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--muted); white-space: nowrap; }

/* --------------------------------------------------------------------------
   2. 列表与卡片
   -------------------------------------------------------------------------- */

.news-section { padding: 0 0 var(--sp-7, 56px); }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4, 16px); }
.news-card {
    display: flex; flex-direction: column; gap: var(--sp-3, 12px); min-width: 0;
    background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius);
    padding: var(--sp-4, 16px); transition: .18s;
}
.news-card:hover { border-color: var(--line); transform: translateY(-2px); }
.news-card .news-top { display: flex; align-items: center; gap: var(--sp-2, 8px); }
.news-date { font-family: var(--mono); font-size: var(--fs-xs, 16px); color: var(--muted); }
/* 阅读时长钉在卡片右上角：卡片原来是「分类 / 日期 / 标题 / 摘要 / 阅读量」五段,
   首屏 6 张卡扫下来没有任何「这篇要花多久」的线索，靠右一列时长补上这个锚点 */
.news-etime {
    margin-left: auto; flex: 0 0 auto; font-size: var(--fs-xs, 16px); color: var(--muted);
    font-family: var(--mono); white-space: nowrap;
}
.news-card.is-lead .news-etime { font-size: var(--fs-xs, 16px); }
.news-title {
    font-size: var(--fs-base, 19px); font-weight: 600; line-height: var(--lh-base, 1.65); color: var(--text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    word-break: break-word; transition: color .15s;
}
.news-card:hover .news-title { color: var(--brand); }
/* 摘要提到 --fs-sm：原 12.5px 是这张卡片里最小的一段正文，读起来像脚注 */
.news-sum {
    font-size: var(--fs-sm, 18px); line-height: var(--lh-loose, 1.8); color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-foot {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px);
    margin-top: auto; padding-top: var(--sp-3, 12px); border-top: 1px solid var(--line-soft);
    font-size: var(--fs-xs, 16px); color: var(--muted);
}
.news-foot .news-read { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); }
.news-foot svg { width: 13px; height: 13px; }
.news-more { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.news-card:hover .news-more { color: var(--brand); }

/* 头条：首篇占两列，标题字号更大 */
.news-card.is-lead {
    grid-column: span 2; padding: var(--sp-5, 32px); gap: var(--sp-3, 12px);
    background: linear-gradient(150deg, var(--panel-2), var(--panel) 62%);
}
.news-card.is-lead .news-title {
    font-size: var(--fs-lg, 25px); line-height: var(--lh-tight, 1.3); letter-spacing: -.3px;
    -webkit-line-clamp: 2;
}
.news-card.is-lead .news-sum { font-size: var(--fs-sm, 18px); -webkit-line-clamp: 2; max-width: 92%; }

.news-empty { padding: var(--sp-6, 40px) var(--sp-4, 16px); }
.news-empty p {
    font-size: var(--fs-base, 19px); color: var(--text-2);
    line-height: var(--lh-loose, 1.8); margin-bottom: var(--sp-3, 12px);
}

/* --------------------------------------------------------------------------
   3. 断点：只做列数与内边距，字号交给令牌自己降档
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); }
    .news-card.is-lead { grid-column: span 2; }
    .news-card.is-lead .news-title { font-size: var(--fs-md, 21px); }
}
@media (max-width: 680px) {
    .news-head { padding: var(--sp-5, 32px) 0 4px; }
    .news-head h1 { font-size: var(--fs-lg, 25px); }
    .news-grid { grid-template-columns: 1fr; gap: var(--sp-3, 12px); }
    .news-card.is-lead { grid-column: span 1; padding: var(--sp-4, 16px); }
    .news-card.is-lead .news-title { font-size: var(--fs-md, 21px); }
    .news-card.is-lead .news-sum { max-width: none; -webkit-line-clamp: 3; }
}