/*
 * 新闻资讯 — design/pc/新闻资讯.jpg (1920×2529) + design/mobile/新闻资讯@2x.png
 * hero 545（UI banner 带烤字，不再 HTML 叠字）；
 * 分类 tab + 列表（缩略图|日+年月|标题摘要 MORE；769~1280 改单栏，图在文字下）。
 */

/* hero · 成稿 1920×545 与素材同比例。禁止定高 + cover + clamp(vw) 各算各的
   （首页 hero 已踩过，见 page-home.css / docs/14 §5）。 */
.news-hero {
  --u: 0.05208333cqw;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 545;
  container-type: inline-size;
  overflow: hidden;
  background: #e9f2fb;
}

.news-hero__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* PC：列表最小稿字 MORE 13。视觉下限 10，全部字号乘同一倍率。
   摘要到 10 时标题 20×10/13≈15.4。 */
html:not([data-layout="mobile"]) .page-news {
  --type-boost: max(1, calc(10 / 13 / var(--s)));
}

/* PC：详情最小稿字日期 14。视觉下限 10。正文 16、标题 28 跟同一倍率。
   内容到 10 时标题 20。 */
html:not([data-layout="mobile"]) .news-article {
  --type-boost: max(1, calc(10 / 14 / var(--s)));
}

.news-body {
  padding: 48px 0 48px;
  background: var(--bg-white);
}

.news-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 48px;
  margin-bottom: 48px;
  /* 无 JS 整页跳转时 #news-tabs 落在固定页头下，而不是 hero 顶 */
  scroll-margin-top: calc(var(--header-h) / var(--s) + 12px);
}

.news-tabs a {
  position: relative;
  font-size: calc(18px * var(--type-boost));
  color: var(--ink-soft);
  padding: 8px 4px;
}

.news-tabs a.is-active {
  color: var(--brand);
  font-weight: 700;
}

.news-tabs a.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--brand);
}

/* 舞台按 PAGE_SIZE=6 定高：切分类 / 末页不满时页脚不跟着跳。
   单条桌面高 = 封面 180 + padding-bottom 40 + 底边 1；条间 gap 40。 */
.news-list {
  --news-page-size: 6;
  --news-item-media: 180px;
  --news-item-pad: 40px;
  --news-item-gap: 40px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--news-item-gap);
  min-height: 0;
}

.news-list > li {
  display: grid;
  grid-template-columns: 280px calc(100px * var(--type-boost)) minmax(0, 1fr);
  gap: 28px 32px;
  align-items: start;
  padding-bottom: 40px;
  border-bottom: var(--hairline) solid var(--line);
}

.news-list__thumb {
  display: block;
  width: 280px;
  aspect-ratio: 280 / 180;
  overflow: hidden;
  background: #f5f5f5;
}

.news-list__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  .news-list__thumb img {
    transition: scale .35s cubic-bezier(.22, 1, .36, 1);
  }

  .news-list__thumb:hover img,
  .news-list__thumb:focus-visible img {
    scale: 1.08;
  }
}

.news-list__date {
  text-align: center;
  color: var(--brand);
  padding-top: 4px;
}

.news-list__date-mobile { display: none; }

.news-list__date-pc b {
  display: block;
  font-size: calc(48px * var(--type-boost));
  line-height: 1;
  font-weight: 700;
}

.news-list__date-pc span {
  display: block;
  margin-top: 8px;
  font-size: calc(14px * var(--type-boost));
  color: var(--ink-mute);
}

.news-list__body h2 {
  font-size: calc(20px * var(--type-boost));
  line-height: 1.45;
  color: var(--ink);
  font-weight: 700;
}

.news-list__body h2 a:hover { color: var(--brand); }

.news-list__body p {
  margin-top: 14px;
  font-size: calc(14px * var(--type-boost));
  line-height: 1.75;
  color: var(--ink-mute);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-list__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  padding: 6px 16px;
  border: var(--hairline) solid var(--line);
  font-size: calc(13px * var(--type-boost));
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

.news-list__more:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 分页 · design/pc/新闻资讯.jpg 实测：方块 36×36，隙 12，左缘贴 1200 版心；
   底 #EEEEEE、选中 #0064B4、数字/箭头 #777。移动稿 @2x：64×64 / 隙 16 ⇒ 32 / 8。 */
.news-pager {
  min-height: calc(36px * var(--type-boost));
  margin-top: 24px;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.pager a,
.pager span.is-disabled {
  box-sizing: border-box;
  min-width: calc(36px * var(--type-boost));
  height: calc(36px * var(--type-boost));
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #eee;
  color: #777;
  font-size: calc(14px * var(--type-boost));
  line-height: 1;
  text-decoration: none;
}

.pager a:hover,
.pager a:focus-visible {
  color: var(--brand);
}

.pager a.is-active {
  background: var(--brand);
  color: #fff;
}

.pager a.is-active:hover,
.pager a.is-active:focus-visible {
  color: #fff;
}

.pager span.is-disabled {
  cursor: default;
}

/* 769~1280 窄桌面：左图右文，封面按 280/180 同比收，不拉成通栏大图。
   日期叠在标题上，省掉桌面那列 100px。左右与页头导航齐平。
   1280 是已登记断点；这一带没有成稿，跟服务页 / 关于我们同界。 */
/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (min-width: 769px) and (max-width: 1280px)。 */
@media not all {
  .page-news .news-body.container,
  .news-article.container {
    width: calc(100% - 2 * var(--header-pad-x));
    max-width: none;
    padding-inline: 0;
    margin-inline: auto;
  }

  .news-list > li {
    grid-template-columns: clamp(200px, 36%, 280px) minmax(0, 1fr);
    grid-template-areas:
      "thumb date"
      "thumb body";
    gap: 16px 24px;
    align-items: start;
  }

  .news-list__thumb {
    grid-area: thumb;
    width: 100%;
    max-width: none;
  }

  .news-list__date {
    grid-area: date;
    text-align: left;
    padding-top: 0;
  }

  .news-list__date-pc b { font-size: 36px; }

  .news-list__body {
    grid-area: body;
    overflow-wrap: break-word;
  }

  .news-article__cover {
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/* 页头这一带是 20px 内边距，token 仍是 40；跟 layout.css / 服务页对齐，不新开变量。 */
/* 停用 2026-09-01：双稿改造后不再有中间过渡档，见 docs/14。
   复活时把条件改回 (min-width: 769px) and (max-width: 1040px)。 */
@media not all {
  .page-news .news-body.container,
  .news-article.container {
    width: calc(100% - 40px);
  }
}

html[data-layout="mobile"] {
  /* 舞台比例仍是 1920/545（375 下 ≈106，与稿 96..307@2x 一致）。
     文案随切图等比缩放，不再 HTML 叠字。 */

  /* 成稿的分类条是通栏四等分：激活项蓝下划线实测 x=0..94.5，正好是 375/4=93.75 一格，
     四格文字中心 50.5 / 144.5 / 240.5 / 335.5 ⇒ 反推格宽 95、起点 3（≈整幅铺满）。
     条底还有一条通栏 #eee，与蓝线同在 y=204。
     纵向：hero 底 154 → 页签 ink 顶 171.5、底线 204，
     16px/1.5 的半行距 5.12 ⇒ news-body 顶 4 + 链接上 8 / 下 14。
     蓝线成稿只有 1px，这里给 2px —— 1px 的选中态在手机上几乎看不出来。 */
  /* 短页走 [14] §6：main 已 flex:1，这里把 news-body 吃掉余量，
     分页 margin-top:auto 钉在页脚上方。条数够高时 auto 为 0，分页仍跟在列表后。
     底 96 是桌面量，移动收到一半，作为分页到页脚的固定距。 */
  .page-news {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
  }

  /* zoom 后 main 布局宽恒为 375，--u 应等于 1px，其它宽度只靠 --s。
     列表 .page-news 已是 container，100cqi/375 = 1px。
     内页 .news-article 自己就是 main，无祖先容器，cqi 会退回真实视口并和 zoom 叠乘。 */
  .news-body {
    --u: calc(100cqi / 375);
  }

  .news-article {
    --u: 1px;
  }

  .news-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding-top: calc(4 * var(--u));
    padding-bottom: 48px;
  }

  .news-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border-bottom: var(--hairline) solid #eee;
  }

  .news-tabs a {
    padding: calc(8 * var(--u)) 0 calc(14 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 1.5;
    text-align: center;
  }

  .news-tabs a.is-active::after {
    left: 0;
    bottom: -1px;
    width: 100%;
    height: max(2px, calc(2px / var(--s)));
    transform: none;
  }

  /* design/mobile/新闻资讯@2x + [10] 矩阵：去缩略图/MORE，标题→摘要→日期单列。
     单行标题步距 102；长标题最多两行（+24）⇒ 126。高度随条数走，
     不满页的空白由分页 auto 吃掉，不占 6 行空舞台。 */
  .news-list {
    gap: 0;
    min-height: auto;
  }

  /* 条目内部尺寸按成稿反推（÷2）：标题 ink 220.5..234.5（h 14.5 ⇒ 16px）、
     摘要两行 ink 顶 245.5 / 261.5（步距 16 ⇒ 12px/16）、日期 ink 282.5..290.5（⇒ 10px）；
     条目标题步距 102 ⇒ 上 11 / 下 12 的内边距。
     左右 20 写在 li 的 padding 里而不是给 news-list 加 padding：
     成稿的分隔线是通栏的（实测 y=612 那行 x=0..749 满铺），
     border-bottom 画在 padding 盒外缘，这样文字缩进 20、线仍然到底。
     父级 .news-body 自己把 .container 的左右 padding 清成 0，所以这 20 就是净缩进。 */
  .news-list > li {
    display: flex;
    flex-direction: column;
    gap: calc(5 * var(--u));
    padding: calc(11 * var(--u)) calc(20 * var(--u)) calc(12 * var(--u));
    border-bottom: var(--hairline) solid var(--line);
  }

  .news-list__thumb { display: none; }

  .news-list__body { order: 1; }

  .news-list__body h2 {
    font-size: calc(16 * var(--u));
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-list__body p {
    margin-top: calc(3 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(16 * var(--u));
    -webkit-line-clamp: 2;
  }

  .news-list__date {
    order: 2;
    text-align: left;
    padding-top: 0;
    color: var(--ink-mute);
  }

  .news-list__date-pc { display: none; }

  .news-list__date-mobile {
    display: block;
    font-size: calc(10 * var(--u));
    line-height: 1.4;
    color: var(--ink-mute);
  }

  .news-list__more { display: none; }

  /* F20-14：分页贴列表，短页空白落在分页下方。 */
  .news-pager {
    margin-top: 24px;
    padding-top: 0;
    padding-inline: calc(20 * var(--u));
  }

  .pager { gap: calc(8 * var(--u)); }

  .pager a,
  .pager span.is-disabled {
    min-width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    padding: 0 6px;
  }
}

/* 成稿首图在日期下、正文前；列表槽是 280×180 裁切，内页要完整出图 */
.news-article__cover {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 32px;
}

.news-article__cover + .news-article__body {
  margin-top: 24px;
}

/* 新闻内页正文图：通栏撑开，高度按固有比例自适应。
   封面已走 .news-article__cover；运营把同一张贴进正文时封面槽会跳过，
   必须让正文 img 同样铺满版心。HTML width/height 只当比例提示，不锁死显示宽。
   后台只保存 data-align 枚举，不放开任意 inline style。 */
.news-article__body img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
}

.news-article__body img[data-align="center"] {
  margin-right: auto;
  margin-left: auto;
}

.news-article__body img[data-align="right"] {
  margin-right: 0;
  margin-left: auto;
}

.news-article__body img[data-align="left"] {
  margin-right: auto;
  margin-left: 0;
}

/* 正文是后台录入的富文本，白名单放行 table/thead/tbody/tr/td/th（HtmlSanitizer），
   长 URL 和英文长词也随时可能出现 —— 这是全站唯一能造出横向滚动的入口。
   实测未加护栏时 375 下 8 列表格把 scrollWidth 顶到 1133、长 URL 顶到 469。
   表格自带横向滚动，正文层允许长串断行；只兜内容，不改版式。 */
.news-article__body {
  overflow-wrap: break-word;
  /* 成稿标题墨迹底 y=156、日期墨迹 y=186、首图约 y=220；无图时日期到正文按同一口气留白 */
  margin-top: 32px;
  font-size: calc(16px * var(--type-boost));
  /* 参考运营截图行盒 36px ⇒ 2.25；段首与标题、日期左对齐，不加空两格 */
  line-height: 2.25;
}

.news-article__body a {
  overflow-wrap: anywhere;
}

.news-article__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

.news-article__body th,
.news-article__body td {
  min-width: 88px;
  padding: 8px 12px;
  border: var(--hairline) solid var(--line);
  text-align: left;
}

/* 上下篇：成稿左右对开；长标题截断，窄屏改单列，避免挤成一行撑破版心。
   2026-08-23 按 UEmo 3585 参考补交互：默认双灰，hover/focus 的一侧切品牌蓝并显出自己的缩略图；
   成稿中右侧常驻蓝块视为“下一篇处于活动态”的静帧，几何仍以成稿为准。
   短文大屏：main 已被 base.css 撑满视口，这里把导航用 margin-top:auto 推到主栏底
  （贴页脚），空白落在正文和上下篇之间，而不是上下篇下面。长文 auto 余量为 0。 */
.news-article {
  display: flex;
  flex-direction: column;
  padding-top: 48px;
  padding-bottom: 80px;
}

/* 成稿 新闻资讯-内页.jpg 实测：标题墨迹 y=131..156（26px）→ 28px 字号。
   不写规则会吃浏览器默认 2em=32px + body 1.75 行距 */
.news-article h1 {
  font-size: calc(28px * var(--type-boost));
  line-height: 1.5;
}

.news-article__meta {
  margin-top: 16px;
  font-size: calc(14px * var(--type-boost));
  line-height: 1.5;
  color: var(--ink-mute);
}

.news-article__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 48px;
  padding-top: 48px;
  flex-shrink: 0;
}

/* 进详情页时上下篇从自身下方飘入。不用 data-reveal：site.js 会对首屏节点
   先打 is-revealed 再挂 motion-ready，短文导航已经在视口里就播不出来。
   只动 translate/opacity，终帧几何不变；减少动画时整段关掉。 */
@keyframes news-nav-in {
  from { opacity: 0; translate: 0 80px; }
  to { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .news-article__nav {
    animation: news-nav-in .72s cubic-bezier(.22, 1, .36, 1) .12s both;
  }
}

.news-article__nav-link,
.news-article__nav-spacer {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  /* 成稿 新闻资讯-内页.jpg 实测：色块 y=1918..2077，高 160；左灰 x=360..959、右蓝 x=960..1559 */
  min-height: 160px;
  padding: 20px 36px;
  background: #f5f5f5;
}

.news-article__nav-link {
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .36s ease, color .36s ease;
}

.news-article__nav-link--prev {
  /* 成稿箭头到标题留 54px，比"下一篇"缩略图那侧宽一倍 */
  padding-right: 36px;
}

.news-article__nav-link--prev .news-article__nav-dir {
  margin-right: 52px;
}

.news-article__nav-link:hover,
.news-article__nav-link:focus-visible,
.news-article__nav-link:active {
  background: var(--brand);
  color: #fff;
}

/* 成稿实测：活动态缩略图 100×60（x=996..1096，y=1968..2027）。
   两侧都先渲染各自封面，默认收起；进入 hover/focus 时只在卡片内部展开，不改变外部几何。 */
.news-article__nav-thumb {
  position: relative;
  flex: 0 0 0;
  width: 0;
  height: 60px;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  background: var(--brand);
  transition:
    flex-basis .36s cubic-bezier(.22, 1, .36, 1),
    width .36s cubic-bezier(.22, 1, .36, 1),
    margin .36s cubic-bezier(.22, 1, .36, 1),
    opacity .24s ease,
    transform .36s cubic-bezier(.22, 1, .36, 1);
}

.news-article__nav-thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: right center;
  transform: scale(1.02);
  transform-origin: center;
}

/* 宽封面的主体靠右，原图还带左/上/下白画布；在裁切窗内放大，而不是拉伸图片。
   三张旧新闻图 trim 后最大上白边为 22px，1.4 倍才能在 100×60 窗口中稳定裁净。 */
.news-article__nav-thumb--wide .news-article__nav-thumb-img {
  transform: scale(1.4);
}

.news-article__nav-link--prev .news-article__nav-thumb {
  transform: translateX(10px);
}

.news-article__nav-link--next .news-article__nav-thumb {
  transform: translateX(-10px);
}

.news-article__nav-link:hover .news-article__nav-thumb,
.news-article__nav-link:focus-visible .news-article__nav-thumb,
.news-article__nav-link:active .news-article__nav-thumb {
  flex-basis: 100px;
  width: 100px;
  opacity: 1;
  transform: none;
}

.news-article__nav-link--prev:hover .news-article__nav-thumb,
.news-article__nav-link--prev:focus-visible .news-article__nav-thumb,
.news-article__nav-link--prev:active .news-article__nav-thumb {
  margin-left: 28px;
}

.news-article__nav-link--next:hover .news-article__nav-thumb,
.news-article__nav-link--next:focus-visible .news-article__nav-thumb,
.news-article__nav-link--next:active .news-article__nav-thumb {
  margin-right: 28px;
}

.news-article__nav-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: calc(16px * var(--type-boost));
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 成稿实测：标题与箭头之间 1px×16px 的分隔线（x=1483，y=1990..2005） */
.news-article__nav-sep {
  flex-shrink: 0;
  width: var(--hairline);
  height: 16px;
  margin-left: 28px;
  background: currentColor;
  opacity: 0.5;
}

.news-article__nav-dir {
  flex-shrink: 0;
  font-size: calc(24px * var(--type-boost));
  line-height: 1;
}

.news-article__nav-link--next .news-article__nav-dir {
  margin-left: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .news-article__nav {
    animation: none;
  }

  .news-article__nav-link,
  .news-article__nav-thumb,
  .news-list__thumb img {
    transition: none;
  }

  .news-list__thumb:hover img,
  .news-list__thumb:focus-visible img {
    scale: 1;
  }
}

html[data-layout="mobile"] {
  /* 375 稿标题 15px；其它宽度跟 --u / --s 同比。不设规则时 h1 会吃浏览器默认
     2em=32px + body 1.75 行距，375 下能吃掉半屏。见 [09] Q7。 */
  .news-article h1 {
    font-size: calc(15 * var(--u));
    line-height: 1.4;
  }

  .news-article__meta {
    margin-top: calc(12 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: 1.5;
    color: var(--ink-mute);
  }

  .news-article__cover { margin-top: 24px; }

  .news-article__body {
    margin-top: 24px;
    font-size: 13px;
  }

  .news-article__cover + .news-article__body { margin-top: 20px; }

  .news-article__nav {
    grid-template-columns: 1fr 1fr;
    margin-top: 32px;
    padding-top: 0;
  }

  .news-article__nav-link,
  .news-article__nav-spacer {
    gap: calc(8 * var(--u));
    min-height: calc(64 * var(--u));
    padding: calc(12 * var(--u)) calc(10 * var(--u));
  }

  .news-article__nav-link--prev .news-article__nav-dir,
  .news-article__nav-link--next .news-article__nav-dir,
  .news-article__nav-sep {
    margin: 0;
  }

  .news-article__nav-link--prev .news-article__nav-dir {
    margin-right: calc(8 * var(--u));
  }

  .news-article__nav-sep {
    width: var(--hairline);
    height: calc(12 * var(--u));
    margin-left: calc(8 * var(--u));
  }

  .news-article__nav-link--next .news-article__nav-dir {
    margin-left: calc(8 * var(--u));
  }

  .news-article__nav-dir {
    font-size: calc(18 * var(--u));
  }

  /* 375 下 100px 缩略图会把标题挤没，标题优先 */
  .news-article__nav-thumb { display: none; }

  .news-article__nav-title {
    font-size: max(13px, calc(11px / var(--s)));
    white-space: nowrap;
  }
}