/* /article/ 产品动态聚合页 · 卡片流样式
   仅作用于 SSR 新页面（/article/、/article/tag_{id}.html、/article/topic_{id}.html），
   不影响老 news-list-XX.html。
   注：热门标签已移到左侧栏 #leftAbout，复用 mainframeleft.css 的 .about/.about_container/.tags 样式，
   本文件不再包含标签条样式。 */

/* ---------- 面包屑末级（当前页，纯文本不可点）---------- */
/* 老站 css.css 的 .crumbsbox_list ul li span 是分隔符"/"的样式（浅灰 #ccc + padding 0 6px），
   末级用 <span class="crumbs_current"> 会误命中它 → 这里用 #crumbs 前缀提高优先级覆盖，
   颜色对齐 .crumbsbox_list ul li a 的 #666，并去掉分隔符的左右 padding。 */
#crumbs .crumbsbox_list ul li span.crumbs_current {
  color: #666;
  padding: 0;
  font-weight: normal;
}

/* ---------- 卡片流 ---------- */
.article_cards {
  padding-bottom: 6px;
}
.article_card {
  padding: 16px 0 14px;
  border-bottom: 1px dotted #cbcbcb;
}
.article_card:last-child {
  border-bottom: none;
}
.article_card .ac_title {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 2px;
}
/* 标题默认近黑（#222），hover 变品牌蓝——与致远/主流资讯站一致，
   避免整屏蓝标题显得杂乱，也让 hover 反馈更明确。字号 16px 提在 a 上（用户定稿）。 */
.article_card .ac_title a {
  color: #222;
  text-decoration: none;
  transition: color .18s ease;
  font-size: 16px;
}
.article_card .ac_title a:hover {
  color: #2b6cff;
  text-decoration: none;
}
.article_card .ac_meta,
.article_head .ah_meta {
  font-size: 12px;
  line-height: 20px;
  color: #999;
  margin-bottom: 6px;
  /* 徽章与日期垂直居中同线：原为基线对齐——ac_cate 是 inline-block(line-height:18)
     且带 vertical-align:1px，ac_date 是行内文本(line-height:20)，两者基线/半行距不同，
     视觉上不在同一水平中心线（用户 2026-10-29 14:19 指出）。改 flex 居中后与行高解耦。 */
  display: flex;
  align-items: center;
}
/* meta 类别徽章（主）：由文章 topic 映射的业务类别名（如 发票管理/采购管理），点击跳专题页。
   用户定稿：去掉浅底与描边，纯品牌蓝文字（扁平化），与底部浅灰标签仍保持主次区分。
   background/border 注释保留备查，想恢复胶囊底样式取消注释即可。卡片与头条块共用。 */
.article_card .ac_meta .ac_cate,
.article_head .ah_meta .ac_cate {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  color: #2b6cff;
  padding: 0;
  margin-right: 12px;
  /* background-color: #eef3ff; */
  /* border: 1px solid #c9dcff; */
  border-radius: 3px;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.article_card .ac_meta a.ac_cate:hover,
.article_head .ah_meta a.ac_cate:hover {
  color: #222;
  text-decoration: underline;
}
.article_card .ac_meta .ac_date,
.article_head .ah_meta .ac_date {
  color: #999;
}
.article_card .ac_summary {
  font-size: 12px;
  line-height: 20px;
  color: #747474;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 底部 keyword 标签组（次）：用户定稿为纯文字形态——浅灰 #bfbfbf、细字重、无底色无内边距，
   视觉最弱；hover 才浮现品牌蓝。可多个、可换行。卡片与头条块共用。 */
.article_card .ac_tags,
.article_head .ac_tags {
  margin-top: 12px;
  line-height: 1;
}
.article_card .ac_tags .ac_tag,
.article_head .ac_tags .ac_tag {
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  color: #bfbfbf;
  padding: 0;
  margin: 0 8px 0px 0;
  /* background-color: #f6f7f9; */
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 300;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.article_card .ac_tags .ac_tag:hover,
.article_head .ac_tags .ac_tag:hover {
  color: #2b6cff;
}

/* ---------- 详情页标题上方类别标签（.toptitle.article_toptitle）---------- */
/* 还原老详情页的分类标签位（老站显示"签约新闻"等分类名），文字改为 topic 字典名（如"合同管理"），纯文本不可点。
   样式与老 toptitle **完全一致**：不在此覆盖任何属性，全部沿用老 cascade
   （subpage.css .toptitle 加粗黑/width:100% + 模板内联 12px/line-height:24px/margin-bottom:8px），
   用户 2026-10-29 15:58 定：样式跟以前的 toptitle 保持一致（此前 18px/14px 留白覆盖已撤）。
   class 仅作为标记钩子保留在 HTML 中。 */
/* /article/ 列表页标题区分隔线：下距 20px（subpage.css 老值）→ 15px（用户 2026-10-29 16:29 定）。
   仅作用于列表页专属类 .article_topline（server.js buildArticleInner 输出）；
   详情页 .topline 保持老值不动（用户 16:34 定：详情页的可否不动）。 */
.article_topline {
  margin-bottom: 15px;
}

/* ---------- /article/ 页专属布局覆盖（不动全站 css.css）---------- */
/* 用户 2026-10-29 定：左栏与列表间距加大、左栏加宽——但 css.css 为全站共用，
   直接改会波及官网所有老页面，故回滚 css.css、在此局部覆盖（article.css 只由
   injectArticleCss 注入 /article/ 系页面，官网页面不加载本文件，天然隔离）。
   桌面值与 15:31 浏览器实测定稿一致：左栏 230px、内容区左右 padding 280px（间距 50px）。
   ≤767px 时 media.css 本就隐藏左右栏并清零 padding，此处不介入。 */
@media (min-width: 768px) {
  .subpagemainframe_left {
    width: 230px;
  }
  .subpagemainframe_centre {
    padding: 0px 280px 0px 280px;
  }
}

/* ---------- 头条块（firstList，每页列表第 1 位）---------- */
/* 沿用老站 newlist_firstone 布局：左图 220×122 object-fit:cover 裁切 + 右文（标题/日期/摘要）。
   装饰图为栏目横幅 newsimg-033.png（1170×244，图内自带"产品动态"字样）。
   头条与卡片流不重叠（接口 firstList 独立于 datas），iTotal 不含头条。 */
.article_head {
  padding: 16px 0 14px;
  border-bottom: 1px dotted #cbcbcb;
  overflow: hidden; /* clearfix（左右浮动） */
}
.article_head .ah_img {
  float: left;
  width: 220px;
  height: 122px;
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.article_head .ah_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article_head .ah_text {
  float: left;
  width: calc(100% - 220px);
  padding-left: 14px;
  /* 与左图等高兜底：摘要不足 2 行（实测 69% 文章摘要 <92 字，含 1 行/无摘要）时右栏自然高度
     只有 98/78px，底边会比左图短一截。min-height 锁 122 + 垂直居中，短摘要时内容整体居中、
     上下留白均分，视觉仍与左图平衡；满 2 行时内容恰 122px，居中即无偏移。 */
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.article_head .ah_title a {
  color: #222;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  text-decoration: none;
  transition: color .18s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.article_head .ah_title a:hover {
  color: #2b6cff;
}
.article_head .ah_meta {
  font-size: 12px;
  line-height: 20px;
  color: #999;
  margin: 4px 0 6px;
}
.article_head .ah_summary {
  font-size: 12px;
  line-height: 20px;
  color: #747474;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 右栏与左图 122px 对齐（用户 2026-10-29 14:12 定 meta 下距 6px）：
   内容自然高 = 标题24 + meta(20+6) + 摘要2行40 + 标签(6+22) = 118px，
   由 .ah_text 的 min-height:122 + flex 居中兜底补 4px（上下各 2px，视觉无感）。
   摘要由 4 行减为 2 行（用户定：描述少点、右文与左图等高）。 */
.article_head .ah_meta {
  margin: 0px 0 6px;
}
.article_head .ac_tags {
  margin-top: 6px;
}

/* ---------- 左侧栏 最新文章（致远列表页右侧风格：序号 + 标题，前三名高亮）---------- */
/* 位于 #leftAbout .about_container 内，标题"最新文章"复用 mainframeleft.css 的 .title 样式 */
#leftAbout .hot_articles {
  padding-top: 2px;
}
#leftAbout .hot_articles ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
#leftAbout .hot_articles li {
  position: relative;
  padding-left: 22px;
  line-height: 20px;
  margin-bottom: 16px;
  font-size: 12px;
}
#leftAbout .hot_articles li .ha_rank {
  position: absolute;
  left: 0;
  top: 1px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 11px;
  font-family: Arial, sans-serif;
  color: #fff;
  background-color: #b4b4b4;
  border-radius: 2px;
}
/* 前三名序号高亮（致远风格：红/橙/黄 或统一主色，这里用主色深浅区分） */
#leftAbout .hot_articles li.hot .ha_rank {
  background-color: #2b6cff;
}
#leftAbout .hot_articles li a {
  color: #555;
  text-decoration: none;
  line-height: 20px;
  /* 标题最多两行，超出省略（侧栏窄，单行截断信息量太少） */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  transition: color .2s ease;
}
#leftAbout .hot_articles li a:hover {
  color: #2b6cff;
  text-decoration: none;
}

/* ---------- 左侧栏 热门标签（chip 胶囊样式，不沿用左侧菜单的 .tags ul li 列表样式）---------- */
#leftAbout .hot_tags {
  padding-top: 4px;
  line-height: 1;
}
#leftAbout .hot_tags .hot_tag {
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  color: #555;
  padding: 6px 11px;
  margin: 0 7px 8px 0;
  background-color: #f4f5f7;
  border: 1px solid #e6e8eb;
  border-radius: 14px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#leftAbout .hot_tags .hot_tag:hover {
  background-color: #eef3ff;
  border-color: #c9dcff;
  color: #2b6cff;
  text-decoration: none;
}
/* 当前筛选标签高亮 */
#leftAbout .hot_tags .hot_tag.on {
  background-color: #2b6cff;
  border-color: #2b6cff;
  color: #fff;
}

/* ---------- 详情页标签（.tags-item 改为可点击链接）---------- */
/* 基础样式（浅蓝底 #e1eeff / 字色 #5a81d3 / 圆角 4px）来自 newsDetail.css 的
   .newsDetail_content .tags .tags-item，此处只补链接形态需要的：去下划线 + hover 反馈。
   选择器带 a 标签，特异性高于原规则，无需 !important。 */
.newsDetail_content .tags a.tags-item {
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.newsDetail_content .tags a.tags-item:hover {
  background-color: #2b6cff;
  color: #fff;
}
/* 允许换行（PC + 移动端通用，用户要求 PC 端也换行）：
   老站 newsDetail.css 的 .tags 是 display:flex 但**无 flex-wrap**（默认 nowrap 单行），
   标签多时会被 flex-shrink 横向压扁变形。此处放开换行并禁止压缩。
   用 #detail 前缀提高特异性（1,2,0 > 老规则 0,2,0），不依赖加载顺序，且只作用于 /article/（本文件仅其引入）。 */
#detail .newsDetail_content .tags {
  flex-wrap: wrap;
  /* 多行时从顶部开始排（否则 align-items:center 会让行居中分布，裁切位置不准） */
  align-content: flex-start;
}
#detail .newsDetail_content .tags .tags-item {
  /* 防止 flex 压缩把标签压扁变形（标签多时 flex-shrink 默认为 1 会挤压） */
  flex-shrink: 0;
  /* 行间距：每个 flex line 高 = 标签 24px + 此 6px = 30px（margin 计入所属行高度） */
  margin-bottom: 6px;
}

/* ---------- 详情页标签：移动端恢复显示 + 最多两排 ---------- */
/* 老站 newsDetail.css 在 @media (max-width:768px) 里把 .newsDetail_content .tags 整个 display:none，
   会让"标签可点击跳筛选页"在手机上失效（丢掉内链入口与 GEO 锚文本）。
   /article/ 详情页的标签已做成有效内链，故在此恢复显示。
   媒体查询范围与老规则保持一致（max-width:768px），避免 768px 这一档漏覆盖。
   换行规则已在上方默认段（PC 通用），此处只管恢复显示与两排上限。 */
@media (max-width: 768px) {
  #detail .newsDetail_content .tags {
    display: flex;
    /* ⚠️ 被裁切元素上**完全不放 padding**：overflow:hidden 按 padding box 边缘裁切，
       任何 padding 都会让裁切边缘偏离内容区——小屏上行高一旦波动（长标签内部换行等），
       超出两排的内容就会从 padding 那截露出来（用户实测指出）。
       间距全部改用 margin（margin 在裁切区之外，既保留视觉间距又不干扰裁切位置）：
         margin-top 8px  替代原 padding-top
         margin-bottom 12px 替代原 padding-bottom
       裁切边缘 = 内容区 60px = 第三排起始位置（两排 × 30px），第三排 0 像素可见。 */
    padding: 0;
    margin: 8px 0 12px;
    /* ⚠️ 盒模型陷阱：/article/ 页引入了 bootstrap.css，其全局 `* { box-sizing: border-box }`
       会让 max-height 包含 padding，故显式声明 content-box，让 max-height 恒定指内容区高度
       （padding 归零后两者已等价，此声明是防御性的，避免将来有人加回 padding 又踩坑）。
       两排上限 = 内容区 60px：
         · 单个标签高 24px = line-height 18 + padding 3×2（无 border）
         · 每个 flex line 高 = 标签 24 + margin-bottom 6 = 30px（第二排的 margin 也计入）
         · 两排 = 30 × 2 = 60px
       被裁切的标签其 <a> 链接仍完整保留在 HTML 中（爬虫/AI 可见），不损失 SEO 内链与 GEO 锚文本，
       只是视觉上不展示——移动端窄屏下长标签列表本就不适合全部铺开。 */
    box-sizing: content-box;
    max-height: 60px;
    overflow: hidden;
  }
  #detail .newsDetail_content .tags .tags-item {
    /* 标签强制单行：防止小屏上长标签内部换行把行高撑过 24px，
       那样"两排=60px"的裁切计算就失效（行高不可预测、裁切位置不可控）。
       最长标签约 208px < 最小屏 320px，不会横向溢出。 */
    white-space: nowrap;
  }
}

/* ---------- 空结果友好页 ---------- */
.article_empty {
  padding: 50px 0 60px;
  text-align: center;
}
.article_empty .ae_title {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.article_empty .ae_desc {
  font-size: 12px;
  color: #999;
  line-height: 22px;
  margin-bottom: 16px;
}
.article_empty .ae_back {
  display: inline-block;
  font-size: 12px;
  color: #2b6cff;
  padding: 4px 16px;
  border: 1px solid #2b6cff;
  border-radius: 3px;
  text-decoration: none;
}
.article_empty .ae_back:hover {
  background-color: #2b6cff;
  color: #fff;
}

/* ---------- 移动端（≤767px）---------- */
@media (min-width: 320px) and (max-width:767px) {
  /* 头条块移动端：同老站——图全宽在上（高 100px 裁切），文字在下 */
  .article_head .ah_img {
    float: none;
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
  }
  .article_head .ah_text {
    float: none;
    width: 100%;
    padding-left: 0;
    /* 移动端图在上文字在下，无需与图等高居中，重置桌面兜底 */
    min-height: 0;
    display: block;
  }
  .article_head .ah_title a {
    font-size: 14px;
  }
  .article_card {
    padding: 11px 0 10px;
  }
  .article_card .ac_title {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 4px;
  }
  /* 桌面端把 font-size:16px 放在了 a 上（用户定稿），锚点的显式字号不随父级 .ac_title 的
     13px 缩小，故移动端必须单独覆盖 a，否则手机标题仍是 16px */
  .article_card .ac_title a {
    font-size: 14px;
  }
  .article_card .ac_summary {
    font-size: 12px;
    line-height: 18px;
    -webkit-line-clamp: 2;
  }
  .article_empty {
    padding: 36px 0 44px;
  }
}