/* ================================================================
   NEWS DETAIL — 新闻详情页专属样式（对照 新闻详情@2x.jpg 还原）
     · 无 hero：导航从顶部就保持白色吸附态
     · 文章头：深色标题 + 居中绿色日期
     · 正文：约 1200px 宽栏，两端对齐，含 (1)-(5) 编号列表
     · 上一篇/下一篇：白色胶囊按钮
     · 关联文章：左对齐标题 + 横向卡片（图左文右）+ 裸绿色箭头
   依赖：tokens.css、base.css、footer.css
   ================================================================ */

/* ── 无 hero 详情页：强制导航为白色吸附态（不依赖滚动） ──────────── */
body.article-page .nav {
  top: 0;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
  backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 1px 0 rgba(47, 131, 54, 0.08), 0 6px 28px -16px rgba(0, 0, 0, 0.12);
}
body.article-page .nav .nav__logo .logo--default { display: none; }
body.article-page .nav .nav__logo .logo--scrolled { display: inline-block; }
/* 用 .nav:not(.is-scrolled) 匹配 nav.css 透明态规则的特异度，确保白底上覆盖其
   「白色描边 + logo 投影」（否则绿描边被白描边盖掉、彩色 logo 仍带投影）。 */
body.article-page .nav:not(.is-scrolled) .nav__menu > a,
body.article-page .nav:not(.is-scrolled) .nav__item > a { color: var(--ink); text-shadow: none; }
body.article-page .nav:not(.is-scrolled) .nav__lang { border-color: var(--green); color: var(--green); }
body.article-page .nav:not(.is-scrolled) .nav__lang:hover { background: var(--green); color: #fff; border-color: var(--green); }
/* 去掉反白态给 logo/汉堡加的投影（白底上不需要）——本次用户报告的「logo 投影」根因。 */
body.article-page .nav:not(.is-scrolled) .nav__logo img,
body.article-page .nav:not(.is-scrolled) .nav__toggle { filter: none; }
body.article-page .nav:not(.is-scrolled) .nav__toggle span { background: var(--ink); }

/* ================================================================
   文章主体
   ================================================================ */
.article {
  position: relative;
  background: #fff;
  padding: clamp(108px, 14vh, 164px) 0 clamp(40px, 6vh, 84px);
}
.article__inner {
  max-width: 1280px;             /* 与方案：正文/配图同宽的宽栏 */
  margin: 0 auto;
  padding: 0 clamp(0px, 5vw, 0px);
}

/* ── 返回最新发展（左上角白色胶囊按钮） ──────────────────────────── */
.article__back {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 8px 30px 8px 8px;     /* 圆环贴左、文字右侧留白（参照方案比例） */
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(47, 131, 78, 0.30);
  color: var(--green);
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .06em;
  box-shadow: 0 8px 22px -16px rgba(31, 92, 54, 0.5);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.article__back .circle {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.article__back .circle svg {
  width: 17px; height: 17px; display: block;
  stroke: #fff; transition: stroke .3s var(--ease-out);
}
.article__back:hover { background: var(--green); border-color: var(--green); color: #fff; }
.article__back:hover .circle { background: #fff; transform: translateX(-3px); }
.article__back:hover .circle svg { stroke: var(--green); }

/* ── 文章头：居中（深色标题 + 绿日期） ──────────────────────────── */
.article__head {
  text-align: center;
  margin: clamp(26px, 4vh, 48px) 0 clamp(20px, 3vh, 34px);
}
.article__title {
  margin: 0 auto;
  max-width: 1280px;
  font-family: var(--font-cn);
  font-size: clamp(21px, 2.15vw, 33px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #1f1f1f;                /* 深色近黑标题 */
}
.article__date {
  margin-top: 15px;
  font-family: var(--font-en);
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: .14em;
  color: var(--green);           /* 方案：日期为绿色，居中 */
}

/* ── 主图（满栏宽，无图注） ──────────────────────────────────────── */
.article__figure {
  margin: clamp(8px, 1.5vh, 18px) 0 clamp(26px, 3.6vh, 46px);
}
.article__figure img {
  width: 100%; height: auto; display: block;
  border-radius: 8px;
  background: var(--bg-dim);
}

/* ── 正文（满栏宽，两端对齐） ────────────────────────────────────── */
.article__body p {
  font-family: var(--font-cn);
  font-size: clamp(14px, 1.02vw, 16px);
  line-height: 2;
  letter-spacing: .01em;
  color: #727272;
  text-align: justify;
  margin-bottom: 1.35em;
}
.article__body p:last-child { margin-bottom: 0; }
/* 编号列表项：(n) 悬挂缩进对齐 */
.article__li {
  padding-left: 2.4em;
  text-indent: -2.4em;
}

/* ── 上一篇 / 下一篇（白色胶囊按钮） ─────────────────────────────── */
.article__pager {
  margin-top: clamp(34px, 5vh, 62px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article__pager-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 47%;
  padding: 8px 30px 8px 8px;     /* 圆环贴左、文字右侧留白（参照方案比例） */
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(47, 131, 78, 0.28);
  box-shadow: 0 10px 30px -18px rgba(31, 92, 54, 0.45);
  font-family: var(--font-cn);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--green);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out),
              transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.article__pager-link .circle {
  flex: 0 0 auto;
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.article__pager-link .circle svg { width: 17px; height: 17px; display: block; stroke: #fff; }
.article__pager-link .txt {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden;
}
/* 下一篇：圆环在右、文字左侧留白（镜像 padding） */
.article__pager-link.next { flex-direction: row-reverse; text-align: right; padding: 8px 8px 8px 30px; }
.article__pager-link:hover {
  color: var(--red); border-color: rgba(220, 24, 24, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -18px rgba(31, 92, 54, 0.5);
}
.article__pager-link:hover .circle { background: var(--red); }
.article__pager-link.prev:hover .circle { transform: translateX(-3px); }
.article__pager-link.next:hover .circle { transform: translateX(3px); }

/* ================================================================
   关联文章（RELATED ARTICLES）—— 左对齐标题 + 横向卡片 + 裸箭头
   ================================================================ */
.related {
  position: relative;
  background: #fff;              /* 方案：关联文章区为白色背景 */
  padding: clamp(46px, 7vh, 88px) 0 clamp(54px, 8vh, 100px);
  border-top: 1px solid #ccc;
}
.related__head {
  max-width: 1280px;
  margin: 0 auto clamp(24px, 4vh, 44px);
  padding: 0 clamp(0px, 6.5vw, 0px);    /* 与下方卡片视口左缘对齐 */
  text-align: left;
  padding-left: 40px;
}
.related__head .triangle {
  display: block;
  width: 42px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 14px;
  margin-left: -40px;
}
.related__head .cn {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 36px);
  color: var(--red);
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1;
}
.related__head .en {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .25em;
  color: var(--green);                /* 方案：英文副标为中性灰 */
  font-weight: 600;
}

/* 视口：左右内边距留出裸箭头落位 */
.related__viewport {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(0px, 6.5vw, 0px);
}
/* 横向滚动轨道（原生 scroll-snap，箭头调用 scrollBy） */
.related__track {
  display: flex;
  gap: clamp(20px, 2vw, 32px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0px 10px 50px;
  margin: -5px;
}
.related__track::-webkit-scrollbar { display: none; }

/* 横向卡片：图左 + 文右 */
.relcard {
  flex: 0 0 calc((100% - clamp(20px, 2vw, 32px)) / 2);   /* 一屏 2 张 */
  height: clamp(188px, 15.5vw, 232px);   /* 固定卡片高 → 正方形缩略图边长 */
  scroll-snap-align: start;
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 7px 14px rgb(31 92 54 / 10%);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.relcard:hover { transform: translateY(-6px); box-shadow: 0 8px 16px rgba(31, 92, 54, 0.24); }
.relcard__pic {
  flex: 0 0 auto;
  height: 100%;                 /* = 卡片固定高 */
  aspect-ratio: 1 / 1;          /* 方案：正方形缩略图（宽=高） */
  display: block;
  overflow: hidden;
  background: var(--bg-dim);
}
.relcard__pic img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .9s var(--ease-out);
}
.relcard:hover .relcard__pic img { transform: scale(1.06); }
.relcard__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: clamp(18px, 1.7vw, 28px);
}
.relcard__title {
  font-family: var(--font-cn);
  font-size: clamp(14.5px, 1.05vw, 17px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--green-deep);
  letter-spacing: .01em;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.relcard__date {
  margin-top: 10px;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--red);
  font-weight: 600;
}
.relcard__excerpt {
  margin-top: 11px;
  font-family: var(--font-cn);
  font-size: 12.5px;
  line-height: 1.8;
  color: #A5A5A5;
  text-align: justify;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; overflow: hidden;
}
.relcard__more {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  font-family: var(--font-cn);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--green);
}
.relcard__more .circle {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.relcard__more .circle svg { width: 11px; height: 11px; display: block; }
.relcard:hover .relcard__more .circle { background: var(--red); transform: translateX(3px); }

/* 裸绿色箭头（无圆底）—— 落在视口左右水槽内 */
.related__nav {
  position: absolute; top: 43%; transform: translateY(-50%);
  width: 46px; height: 72px;
  border: 0; background: transparent; padding: 0;
  display: grid; place-items: center;
  cursor: pointer; z-index: 3;
  color: var(--green);
  transition: transform .25s var(--ease-out), opacity .25s var(--ease-out), color .25s;
}
.related__nav svg { width: 42px; height: 42px; display: block; stroke-width: 1.8; }
.related__nav--prev { left: clamp(-80px, -4vw, 28px); }
.related__nav--next { right: clamp(-50px, -4vw, 28px); }
.related__nav:hover { color: var(--red); transform: translateY(-50%) scale(1.14); }
.related__nav:active { transform: translateY(-50%) scale(0.94); }
.related__nav:disabled { opacity: .28; cursor: default; color: var(--green); transform: translateY(-50%); }

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 900px) {
  /* 关联卡片改为竖排（图上文下），一屏 1 张 */
  .relcard { flex: 0 0 84%; flex-direction: column; height: auto; }
  .relcard__pic { flex: none; height: auto; width: 100%; aspect-ratio: 16 / 10; }
  .related__head { padding: 0 clamp(40px, 6vw, 72px); }
  .related__viewport { padding: 0 clamp(34px, 5vw, 60px); }
}
@media (max-width: 600px) {
  .article__title { font-size: clamp(19px, 5.4vw, 26px); }
  .article__pager { flex-direction: column; align-items: stretch; gap: 14px; }
  .article__pager-link { max-width: none; justify-content: center; }
  .article__pager-link.next { flex-direction: row; }
  .relcard { flex: 0 0 88%; }
  .related__nav { display: none; }     /* 移动端用滑动 */
}