/* ============================================================
   资讯与问答（/news/ · /qa/ 及首页板块）
   单独成文件，不堆进全局 components.css
   ============================================================ */

/* ---------------- 平台规模统计条（产品目录页顶部） ----------------
   形态对齐盖德首屏那条：左边几个大数字 + 一条竖线 + 站名。
   数字用 tabular-nums：滚动动画时位数变化不会让文字左右抖。 */
.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-bottom: var(--block-gap);
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.stat-cell {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.stat-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;   /* 滚动时不抖动 */
  letter-spacing: .5px;
}
.stat-cell--today .stat-num { color: var(--price); }   /* 今日新增用橙色突出 */
.stat-label {
  font-size: 12.5px;
  color: var(--ink-500);
}
/* 站名那一块：左边一条竖线分隔，对齐盖德的"盖德化工网 / 海量化工产品库" */
.stat-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: auto;
  padding-left: 20px;
  border-left: 2px solid var(--brand-200);
}
.stat-note strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}
.stat-note span {
  font-size: 12.5px;
  color: var(--ink-400);
}

@media (max-width: 760px) {
  .stat-strip { gap: 12px 20px; padding: 12px 14px; }
  .stat-num { font-size: 21px; }
  /* 窄屏把站名那块收起来：它只是装饰，别把数字挤成两行 */
  .stat-note { display: none; }
}

/* ---------------- 首页：资讯 + 问答 两栏 ---------------- */
.content-row {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 14px;
  /* 首屏栅格与资讯行之间的间距。
     改前这里是 0px（栅格没有 margin-bottom），两块面板直接贴在一起。 */
  margin-bottom: var(--block-gap);
  align-items: start;
}

/* ---------------- 化工资讯板块 ---------------- */
.news-title { gap: 16px; }
.nt-main { flex: 0 0 auto; }
.news-tabs {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13px;
  font-weight: 400;
}
.news-tabs a { color: var(--ink-500); transition: color .14s; }
.news-tabs a:hover { color: var(--brand-700); text-decoration: none; }

.news-body {
  display: grid;
  /* 左栏 320px 图片区 + 右栏标题列表。
     两栏高度要"看起来一样"—— 见下面 .news-feature 的拉伸策略。 */
  grid-template-columns: 320px 1fr;
  gap: 14px;
  padding: 12px;
}

/* 左栏：主图吃掉剩余高度，缩略图固定。
   修复的问题（2026-10-13）：原来是「主图 168 + 两张 74 + 间距 = 338px」死高，
   而右栏 12 条标题约 414px —— 左栏底部就会空出 80px 一块。
   grid 默认让两栏等高，所以这里用 flex 把主图设成 flex:1：
   右栏有多高，主图就长多高，两边下沿永远对齐。 */
.news-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.nf-main, .nf-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: #EEF4F6;
}
/* min-height 是兜底：右栏特别短时主图也不至于压成一条 */
.nf-main { flex: 1 1 auto; min-height: 168px; }
/* 缩略图 96px：图注要放下**4 行完整标题**。
   实测：11px 字号 + 96px 宽时每行约 7 字，25 字的标题需要 4 行
   （4 × 14.85px ≈ 60px + 上下内距 22px ≈ 82px），74px 时第 4 行会被切掉。
   加高后主图（flex:1）自动收一点，板块总高不变。 */
.nf-thumb { flex: 0 0 96px; height: 96px; }
.nf-main img, .nf-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s;
}
.nf-main:hover img, .nf-thumb:hover img { transform: scale(1.04); }

/* 图片下沿的标题条：显示**完整标题**，最多 3 行（不是按字数砍）。
   三个关键点，都是实测踩出来的：
   1) 渐变**最底部必须完全不透明**。原来写的是
      `linear-gradient(transparent, rgba(6,40,46,.86))`：底部是透明的，
      而抓来的配图底部烧着源站水印（实测最底 6~30px 有 60~80 个纯白像素），
      于是那截白字透出来，看着像"三个点下面还有白色内容"。
      中间试过 .96 —— 仍会透出（4% × 255 ≈ 10 的亮度差，肉眼可见）。
      现在底部 15% 用 alpha=1 的实色条，彻底压住。
   2) 圆角跟着父容器（.nf-main/.nf-thumb 是 overflow:hidden + radius），
      否则文字条的直角会戳出圆角。
   3) 文字加一层极淡投影：照片若有浅色区域，纯靠渐变也可能压不住。 */
.nf-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 9px 8px;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.35;
  background: linear-gradient(
    to bottom,
    rgba(6, 40, 46, 0) 0%,
    rgba(6, 40, 46, .60) 28%,
    rgba(6, 40, 46, .90) 62%,
    rgba(6, 40, 46, 1) 85%,
    rgba(6, 40, 46, 1) 100%
  );
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(4, 26, 30, .5);
}
/* 缩略图更窄（约 96px），字号收到 11px、行高 1.35：
   实测每行约 7 字，25 字标题 4 行能完整放下。 */
.nf-caption.small {
  font-size: 11px;
  line-height: 1.35;
  -webkit-line-clamp: 4;
  padding: 16px 6px 6px;
}

.nf-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* 没有配图时的兜底块（不显示破图） */
.nf-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-700);
  background: linear-gradient(135deg, var(--brand-50), #E6F4F7);
}
.nf-noimg.small { font-size: 12px; }

/* 标题列表：标题**完整显示**、自然换行。
   原来靠固定 line-height: 2.5 撑行（单行时整齐，但标题一长就换行、
   行距会显得忽大忽小），现在改成 padding 定行高 + 1.6 行距。 */
.news-list { margin: 0; padding: 0; list-style: none; }
.news-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 7px 0 7px 13px;
  border-bottom: 1px dashed #F0F4F7;
}
.news-list li:last-child { border-bottom: none; }
.news-list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 15px;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--brand);
}
.news-list a {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-700);
  word-break: break-word;
}
.news-list a:hover { color: var(--brand-700); }
.tag-hot {
  flex: 0 0 auto;
  margin-top: 3px;
  padding: 0 4px;
  font-size: 10px;
  color: #fff;
  background: var(--price);
  border-radius: 2px;
  line-height: 1.6;
}

/* ---------------- 化工问答板块 ---------------- */
.qa-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: linear-gradient(135deg, var(--brand-50), #F2FAFB);
  border-bottom: 1px solid var(--line);
}
.qs-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-700);
  line-height: 1;
}
.qs-label { flex: 1; font-size: 12px; color: var(--ink-500); line-height: 1.5; }

.qa-list { margin: 0; padding: 0; list-style: none; }
.qa-list > li {
  padding: 11px 12px;
  border-bottom: 1px solid #F2F6F9;
}
.qa-list > li:last-child { border-bottom: none; }
.qa-q {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.5;
}
.qa-q:hover { color: var(--brand-700); }
.qa-a {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.6;
}
.qa-meta {
  display: flex;
  gap: 10px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-400);
}
.qa-by { color: var(--brand-700); }
.qa-cnt { color: var(--price); }

/* 列表页用宽版 */
.qa-list.wide > li { padding: 14px 16px; }
.qa-list.wide .qa-q { font-size: 15px; }

/* ---------------- 资讯列表页 ---------------- */
.list-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
}
.list-main { min-width: 0; }
.rail-cats a.active { color: var(--brand-700); font-weight: 600; }

.article-list { margin: 0; padding: 4px 0 0; list-style: none; }
.article-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid #F2F6F9;
}
.article-item:last-child { border-bottom: none; }
/* display: block 是必须的：`.ai-thumb` 是 <a>，anchors 默认 display: inline，
   而 `flex: 0 0 150px` 对 inline 元素**无效** —— 于是里面的 img 拿不到可解析的
   宽度，按原生尺寸渲染。实测 /news/ 因此被一张 1920px 的缩略图撑到内容宽 2113px，
   在 1440px 视口下出现横向滚动条。 */
.ai-thumb {
  display: block;
  flex: 0 0 150px;
  width: 150px;
  height: 96px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #EEF4F6;
}
.ai-thumb img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
/* 无封面时的占位格：尺寸与 .ai-thumb 一致，保证列表里所有标题左边缘对齐。
   （没封面就不渲染元素的话，那条的文字会顶到最左，与其它条目错开 150px。） */
.ai-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7FAFC;
  border: 1px dashed #E4EBF1;
}
.ai-body { flex: 1; min-width: 0; }
.ai-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
}
.ai-title:hover { color: var(--brand-700); }
.ai-summary { margin: 6px 0; font-size: 12.5px; line-height: 1.65; }
.ai-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11.5px;
  color: var(--ink-400);
}
.ai-cat {
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 2px;
  padding: 0 5px;
}

/* ---------------- 详情页（问答共用；资讯详情已迁到 news.css） ----------------
   注意：.ad-title / .ad-meta / .ad-content / .ad-source 这些类**问答详情页还在用**
   （qa_detail.html），不要因为它们名字里有 ad 就当成资讯专用删掉。
   资讯详情现在用 .nd-*，见 static/css/news.css。 */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 296px;
  gap: 14px;
  align-items: start;
}
.detail-layout > article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px 26px;
  box-shadow: var(--shadow-xs);
  min-width: 0;
}
.ad-title {
  font-size: 23px;
  line-height: 1.45;
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.ad-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-400);
}
.ad-content {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-700);
  margin-top: 16px;
  word-break: break-word;
}
.ad-content p { margin: 0 0 15px; }

/* 来源与版权声明 */
.ad-source {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 22px;
  padding: 11px 14px;
  background: #FAFCFD;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--ink-500);
}
.ad-source a { color: var(--brand-700); }
.ad-disclaimer {
  margin-top: 10px;
  line-height: 1.7;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

/* 问答详情 */
.qd-block { margin-top: 20px; }
.qd-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  padding-left: 11px;
  position: relative;
  margin-bottom: 4px;
}
.qd-label::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--brand-700));
}
.qd-by { margin-top: 10px; }
.qd-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.qd-tags .tag {
  font-size: 12px;
  color: var(--ink-500);
  background: #F2F6F9;
  border-radius: var(--radius-sm);
  padding: 3px 9px;
}
.badge-ok { color: #fff; background: var(--brand); border-color: var(--brand); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1000px) {
  .content-row { grid-template-columns: 1fr; }
  .news-body { grid-template-columns: 1fr; }
  /* 单列时左栏不再需要"跟右栏等高"，主图回到固定高度，
     否则 flex:1 会把它压成一条（此时没有第二栏来定高度）。 */
  .news-feature { display: block; }
  .nf-main { height: 200px; min-height: 0; }
  .nf-sub { margin-top: 8px; }
  .detail-layout { grid-template-columns: 1fr; }
  .list-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .article-item { flex-direction: column; }
  .ai-thumb { flex: 0 0 auto; width: 100%; height: 150px; }
  /* 窄屏：3 张缩略图挤在一行会小到看不清，改成 2 列（宽度翻倍，2 行就够） */
  .nf-sub { grid-template-columns: repeat(2, 1fr); }
  .nf-thumb { height: 84px; }
  .nf-caption.small { -webkit-line-clamp: 3; font-size: 11.5px; }
}