/* ==========================================================================
   新闻页专有区块样式
   --------------------------------------------------------------------------
   加载顺序：header.html 里的 common/pages.css → 页面模板里的 static/css/news.css
             → 本文件（必须排在 news.css 后面，靠源序压过它）

   www 的 news.css 只管两套骨架：
     · 列表页 / 分类页 —— .et-main .main-row 里的搜索卡 + 分类栏 + 列表 + 分页
     · 文章页        —— .et-main.articleContent .news-txt-container
   v10 的新闻页有它自己没有的两块东西，本文件补齐：
     ① news.html 总览版式：头条大卡（.news-list--featured）+ 分类栏目（.news-overview__*）
     ② 紧凑行列表（.news-list--compact）—— 总览页的「最新动态」和每个分类栏共用
   另有一处 www 的行为需要改：分类栏的 ul 被设成 opacity:0 交给它的 JS 淡入，
   且右侧预留了 100px 给下拉箭头；v10 的分类数量由后台决定，改成自动换行常显。

   颜色 / 圆角 / 渐变一律走 www 的 CSS 变量（见 common/vars.css），保证与全站同源。
   本文件里的规则都带 .et-main / .newsPage_row 前缀，不会外溢到其它页面。
   ========================================================================== */


/* ---------------------------------------------------------------
   顶部空 banner：必须顶到页面最上方
   ---------------------------------------------------------------
   源站的 banner 从 y=0 开始（body 没有 padding-top，导航是 fixed 覆盖层），
   所以 .et-main 的负 margin 算下来正文正好落在「导航底 + 20px」，
   banner 只有露出的一小条在导航和面包屑之间。

   我们的外壳给内页 body 补了 padding-top: var(--navheight)（bridge.css 第 6 节），
   banner 被整条推下来 62px，正文跟着低 62px —— 表现就是导航到面包屑之间
   空出一条比源站厚一倍的浅色带（1920 实测：正文顶 144 vs 源站 82）。

   把 banner 反向拉回导航下面即可：.et-main 的负 margin 是相对 banner 底部算的，
   banner 上移多少，正文就跟着上移多少，一次就对到位。
   ★ 只作用于新闻家族（.newsBanner），不碰 public/page-banner.html 那套内页页头。 */
.globalBanner.newsBanner {
  margin-top: calc(-1 * var(--navheight, 62px));
}


/* ---------------------------------------------------------------
   0. 分类栏（.newsPage_left_list）—— 覆盖 www 的两处 JS 依赖
   --------------------------------------------------------------- */
/* www：ul { opacity: 0; transition: all .6s ease }，靠 news.js 淡入。
   这里也一样由 JS 加 is-ready，但把它做成「不加也不影响布局」的纯淡入效果。 */
.et-main .newsPage_left_list ul.is-ready {
  opacity: 1;
}

/* www：单行横向滚动 + 右侧 100px 留给 #dropdownArrow 下拉箭头。
   v10 分类数量由后台决定，改成自动换行，避免分类一多就被裁掉。
   ★ 2026-10-21 对齐源站版心比例：去掉上下 5px、行高 44→48
     （源站 padding 上下为 0、a 的 line-height 是 48）。改完条高 58→52，
     与源站 52 一致；右侧 100px 不留，因为我们没有下拉箭头、还要让分类多排几个。 */
.et-main .newsPage_left_list {
  padding: 0 30px;
}

.et-main .newsPage_left_list ul {
  flex-wrap: wrap;
  row-gap: 0;
}

.et-main .newsPage_left_list ul .newsPage_left_list_item a {
  line-height: 48px;
}

/* www 的激活下划线画在 li::before 上，换行后最后一个 item 会顶到容器底边，
   这里把下划线上移 2px，视觉上仍贴着文字基线。 */
.et-main .newsPage_left_list ul .newsPage_left_list_item.active::before {
  bottom: 2px;
}


/* ---------------------------------------------------------------
   0-2. 新闻列表页版心（.news-shell）—— 对齐源站整页比例
   ---------------------------------------------------------------
   源站 .main-row：max-width 1440 + 左右 padding 64 → 内容宽 1312。
   我们全局 --maxwidth 1400 / --padding 20 → 内容宽 1360，宽 48px，
   宽屏下整块内容明显比源站更"满"（2026-10-21 用户要求整页比例改成截图那样）。
   ★ 只覆盖 max-width / padding 本身，**不改 --maxwidth / --padding 变量** ——
     页内 .social-icons 等还在读 --maxwidth 定位，改变量会连带跑偏。
   ★ 必须包在 ≥769 里：手机上 mobile.css 给 .comp_container 的是 16px 小边距，
     这条不限定宽度会把它一起盖掉（实测 428 下正文被挤成 x=64 w=300，
     源站是 x=16 w=396）。也不要写成模板里的内联样式，内联同样会顶掉手机端。
   ★ 同一个类也给**面包屑的外层容器**用（.comp_container.news-shell）：
     面包屑在 .main-row 之外，不加的话它还按 1400/20 算，
     左边缘比下面的卡片缩进少 24px（x=120 vs 144）。
     两个选择器特异性相同，写一条即可，别拆成两份。 */
@media (min-width: 769px) {
  .et-main .main-row.news-shell,
  .et-main .comp_container.news-shell {
    max-width: 1440px;
    padding-left: 64px;
    padding-right: 64px;
  }
}


/* ---------------------------------------------------------------
   1. 卡片堆：.news-stack
   ---------------------------------------------------------------
   news.css 里 .et-left 是无 gap 的纵向 flex，卡片间距全靠各自 margin-bottom
   （.pagebanner-relative: 20px / .newsPage_left_list: 6px）。
   总览页的「头条 + 最新动态 + N 个分类栏目」数量不定，用 gap 统一收口。
   注意 .news-stack 可以嵌套（外层卡片堆里再放 #new-type-list），
   两层 gap 一样，视觉上不会出现 40px 的空档。 */
.news-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ---------------------------------------------------------------
   2. 头条大卡：.news-list.news-list--featured
   ---------------------------------------------------------------
   结构完全沿用 www 单条新闻的 DOM（.news-item > .news-link >
   .news-item-container + .news-item-img），所以标题、日期图标、
   hover 变色这些全部继承 news.css，这里只放大图片与标题。 */
.et-main .newsPage_row .news-list.news-list--featured {
  gap: 0;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item {
  padding-bottom: 0;
  border-bottom: none;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link {
  align-items: center;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-img {
  flex: 0 0 420px;
  max-width: 420px;
  height: 236px;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-container {
  gap: 18px;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-container .news-item-text .news-title h1 {
  font-size: 22px;
  line-height: 1.55;
  -webkit-line-clamp: 2;
}

.et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-container .news-item-text .news-description {
  font-size: 15px;
  -webkit-line-clamp: 3;
}


/* ---------------------------------------------------------------
   3. 紧凑行：.news-list.news-list--compact
   ---------------------------------------------------------------
   总览页的「最新动态」与每个分类栏目都用它，一行一条、虚线分隔，
   相对 www 默认的「大图 + 三行摘要」更省纵向空间。 */
.et-main .newsPage_row .news-list.news-list--compact {
  gap: 0;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item {
  padding: 15px 0;
  border-bottom: 1px dashed #e9eef3;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item:first-child {
  padding-top: 2px;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link {
  align-items: center;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-container {
  gap: 8px;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-container .news-item-text {
  gap: 0;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-container .news-item-text .news-title h1 {
  font-size: 15px;
  font-weight: 500;
  -webkit-line-clamp: 1;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-container .news-articleInformation {
  gap: 14px;
}

.et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-img {
  flex: 0 0 148px;
  max-width: 148px;
  height: 84px;
}


/* ---------------------------------------------------------------
   4. 分类栏目头：.news-overview__*
   ---------------------------------------------------------------
   用在 news.html 每个分类卡片（.newsPage_row）内部的标题行。
   =============================================================== */
.news-overview__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e9eef3;
}

.news-overview__title {
  position: relative;
  padding-left: 14px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--txtcl);
}

.news-overview__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--gradient1);
}

.news-overview__more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--txtdesc);
  transition: color 0.3s ease;
}

.news-overview__more:hover {
  color: var(--Original);
}

.news-overview__more i {
  font-size: 13px;
}

.news-overview__count {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 400;
  color: var(--txtdesc);
}

/* 空态：分类下没有数据时（www 的 .nullValue 是给整页用的，这里要一个轻量版） */
.news-overview__empty {
  width: 100%;
  padding: 24px 0;
  text-align: center;
  font-size: 14px;
  color: var(--txtdesc);
}


/* ---------------------------------------------------------------
   5. 文章页右侧悬浮操作条
   ---------------------------------------------------------------
   www 把 .social-icons 放在 left:-50px（屏外），由它的脚本滑入。
   这里改成由 JS 在视口够宽时加 .is-visible 滑入，位置用 max() 算：
   刚好落在 1400px 容器左侧外面，视口再窄就贴到 8px，
   不会随视口变化压到正文。 */
.et-main .social-icons.is-visible {
  left: max(8px, calc((100vw - var(--maxwidth)) / 2 - 60px));
}


/* ---------------------------------------------------------------
   6. 文章页附件 / 标签
   ---------------------------------------------------------------
   复用 news.css 的 .news-label-item（浅灰胶囊）承载 v10 的
   keywords 与 attachment，不新造视觉。 */
.et-main .news-txtpaging .news-label-item {
  flex-wrap: wrap;
}

.et-main .news-txtpaging .news-label-item + .news-label-item {
  margin-top: 10px;
}


/* ---------------------------------------------------------------
   7. 短文章的正文高度 + 空态
   ---------------------------------------------------------------
   ① 正文太少时（标题、一行正文就没了），卡片会塌成一条，看着像没加载完。
      源站这种文章正文区至少留 200px，标签行贴着卡片底部。
   ② showNotFound() 会把 .articleContent 换成 .notPresent，而 news.css 给
      .notPresent 写了 margin:0 —— 负 margin 一撤，520px 的 banner 整块露出来，
      页面顶部一片空白、下面一坨 #eee 灰块，提示文字还被刷成 #e4e4e4 看不见。
      这里让它照常压进 banner，空态本身做一张居中白卡。
   =============================================================== */
.et-main .news-txt-container .news-txt-content {
  min-height: 200px;
}

.et-main.notPresent {
  margin-top: calc(-1 * (var(--banner_height) - var(--navheight) - 20px));
  margin-bottom: 80px;
}

.et-main.notPresent .nullValue {
  width: 100%;
  margin: 0;
  padding: 72px 24px 80px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.et-main.notPresent .nullValue p {
  width: auto;
  background: none;
  color: var(--txtdesc, #6b7280);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

/* 原图标是 22px 内联在文字前面；这里放到 48px 单独占一行，空态才有分量 */
.et-main.notPresent .nullValue p:before {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  background-size: 100%;
  background-repeat: no-repeat;
}

.et-main.notPresent .nullValue .nullValue__back {
  display: inline-flex;
  align-items: center;
  height: 36px;
  margin-top: 22px;
  padding: 0 20px;
  border-radius: 2px;
  background: var(--Original, #0052d9);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.et-main.notPresent .nullValue .nullValue__back:hover {
  opacity: 0.85;
  color: #fff;
}


/* ---------------------------------------------------------------
   8. 移动端兜底
   ---------------------------------------------------------------
   上面的选择器比 news.css 里 @media (max-width:768px) 的同类规则更具体，
   不加这段的话，头条卡在手机端会保持「大图在右」的桌面排布。 */
@media screen and (max-width: 768px) {
  /* 手机端顶部：banner 已被拉到 y=0（见文件开头那节），高度 249
     （global.css 的 ≤768 写死值），正文顶统一落在 89（导航 58 下方 31px），
     所以负 margin = 249 - 89 = 160。
     ★ 2026-10-23：导航高度从 50 对齐到源站的 58（vars.css 的 --wapnavheight），
       这条公式里的常量跟着 +8 → 168 改 160。以后动 --wapnavheight 必须同步这里。
     列表页 / 分类页的 news.css 手机端公式是 -100 - wapnavheight - 10，
     现在 wapnavheight 与源站同为 58 → 两边自然落到同一基线。 */
  .et-main,
  .et-main.articleContent,
  .et-main.notPresent {
    margin-top: -160px;
  }

  .et-main.articleContent,
  .et-main.notPresent {
    margin-bottom: 40px;
  }

  .et-main.notPresent .nullValue {
    padding: 48px 16px 56px;
  }

  /* 与桌面同步：上下 0（源站手机端同样是 0，条高 52） */
  .et-main .newsPage_left_list {
    padding: 0 12px;
  }

  .et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link {
    flex-direction: column;
    align-items: stretch;
  }

  .et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-img {
    flex: 0 0 auto;
    max-width: 100%;
    height: 172px;
  }

  .et-main .newsPage_row .news-list.news-list--featured > .news-item .news-link .news-item-container .news-item-text .news-title h1 {
    font-size: 17px;
  }

  .et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-img {
    flex: 0 0 108px;
    max-width: 108px;
    height: 68px;
  }

  .et-main .newsPage_row .news-list.news-list--compact > .news-item .news-link .news-item-container .news-item-text .news-title h1 {
    font-size: 14px;
  }

  .news-overview__title {
    font-size: 16px;
  }

  .et-main .social-icons.is-visible {
    left: 8px;
  }
}


/* ---------------------------------------------------------------
   9. 侧栏「热门文章 / 最新文章」：分隔线通栏
   ---------------------------------------------------------------
   news.css 里 ul.newsPage_left_hot_list 是 column flex + align-items:flex-start，
   没有给宽度，作为 flex item 会按**最宽那条标题**收缩（align-self:auto 跟随
   align-items 的 flex-start，不会 stretch）。标题短的时候，画在 a 上的
   border-bottom 就只到文字末尾，看着像半截线。

   补一条 width:100% 即可：ul / li / a 本来就都是 100% 递进，
   宽度对齐卡片内边距后，分隔线自然拉到 288（328 卡片 - 20×2），
   与源站完全一致。**只改宽度**，padding 仍是 0、行高 42、徽章定位不动，
   所以文字起始位置和行高都不变。
   --------------------------------------------------------------- */
.et-main .news-right-row .newsPage_left_hot_list {
  width: 100%;
}