/* pages/news-detail.css — 新闻详情页（bundle 4:168「NEWS-detail」，1920×4904）
   断点：base 移动流式（相关阅读随流后置）；≥768 加大留白；≥1280 按 1920 设计稿精确几何（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 news.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent;
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1);
}

/* ---------- 面包屑（4:169：x=82，y=146；三级起 flex-wrap） ---------- */
.pnd-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.pnd-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .625rem;
}

.pnd-crumbs svg {
  flex: none;
}

.pnd-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 文章头（4:180：标题 y=265 居中 1008 宽；日期 y=405） ---------- */
.pnd-head__title {
  /* 2026-09-23 用户要求：俄语标题不再 3 行、品牌名不被拆。
     原设计稿宽度装不下首句「…XITEC Технолоджи:」的 997.2px（Manrope 48px），
     软换行后标题变 3 行、断在 XITEC / Технолоджи 之间；
     现配合删除 HTML 里的硬 <br>，放宽到 1008（997.2 + 10px 余量）。
     有效区间约 998–1200，再宽会吃进下一个词「прямой」。 */
  max-width: 63rem; /* 1008 */
  margin: 6.25rem auto 0; /* 面包屑底 165 → 265 */
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.pnd-head__date {
  margin-top: 1.25rem; /* y=405（标题底 385 + 20） */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  color: var(--color-text-2);
  text-align: center;
}

/* ---------- 红黑同位分隔线（4:178/4:182：黑线 y=487 x=50–1870，红段 300 居中） ---------- */
.pnd-rule {
  position: relative;
  height: 1px;
  margin: 3.125rem 3.125rem 0; /* 日期底 437 + 50 */
  background: var(--color-text-1);
}

.pnd-rule::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18.75rem; /* 300 */
  /* 2026-09-20 用户要求「日期下方短红线太细」→ 1px 加粗到 3px。
     写法与 products-sub.css:167 / solutions.css:208 / solutions-detail.css:270 三处红段完全一致：
     **上下居中覆于 1px 黑线、上下各探 1px**（那三处早就是 3px，本页是唯一漏网的）。
     ⚠ ::after 是绝对定位 → 改高度**零布局影响**，不需要像 solutions-detail 的 .psold-hero__rule
       那样补 margin（「上减 1、下 -1」只对流内盒子才需要）。
     ⚠ 黑线本身仍是 1px（用户只点名短红线；设计稿黑线 y=487 与红段同位）。 */
  height: 3px;
  transform: translate(-50%, -50%);
  background: var(--color-primary);
}

/* 正文 → Prev/Next 之间的分隔线（2026-09-20 用户要求）：与顶部「日期→正文」那条**完全一致**
   （1px 黑、x=50–1870、无红段），所以复用 `.pnd-rule` 的全部几何，只用 --plain 关掉红段。
   ⚠ 选择器必须写成 (0,2,0)：与 `.pnd-rule::after` (0,1,0) 打平时要靠文件顺序决胜，
     文件一重排就静默失效（本项目对「靠顺序决胜」有过代价）。
   ⚠ 别在这里重复写 height / margin / background —— 重复写就与 `.pnd-rule` 脱钩，
     日后改顶部那条会漏掉这条（与坑 29「页面 CSS 与组件 CSS 抢同一属性」同型）。 */
.pnd-rule.pnd-rule--plain::after {
  content: none;
}

/* ---------- 主体两列（4:183+：左文 1200 x=120；右相关阅读 450 x=1400，顶对齐 y=567） ---------- */
.pnd-layout {
  display: grid;
  margin-top: 4.9375rem; /* 线底 488 → 567 */
  padding-inline: var(--space-6);
}

/* 导语灰条（4:183：1200×150，左红条 15，文字 24/32 缩进 45） */
.pnd-lead {
  position: relative;
  padding: 1.6875rem 2.1875rem 1.6875rem 2.8125rem; /* 上 27 / 右 35 / 左 45 */
  background: var(--color-gray-100);
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  color: var(--color-text-2);
}

.pnd-lead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: .9375rem; /* 15 */
  background: var(--color-primary);
}

.pnd-post__p,
.pnd-post__body p {
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  color: var(--color-text-2);
}

.pnd-post__p {
  margin-top: 3.125rem; /* 导语底 717 → 767 */
}

.pnd-post__media {
  margin-top: 3.125rem; /* 段落底 927 → 图 977 */
}

.pnd-post__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 771;
  object-fit: cover;
}

.pnd-post__body {
  margin-top: 3.125rem; /* 图底 1748 → 1798 */
}

.pnd-post__body p + p {
  margin-top: 2rem; /* 段间一个空行（设计稿 \n\n = 32px） */
}

/* ---------- 相关阅读（4:213-4:224：图 449×288 + 4 项列表，项间距 30） ---------- */
.pnd-rel__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 449 / 288;
  object-fit: cover;
}

.pnd-rel__list {
  margin-top: .9375rem; /* 图底 856 → 871 */
  list-style: none;
}

.pnd-rel__list li + li {
  margin-top: 1.875rem; /* 30 */
}

.pnd-rel__list a {
  position: relative;
  display: block;
  padding-left: 1rem; /* 文字 x=16 */
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
  color: var(--color-text-2);
  transition: color .2s ease-out;
}

.pnd-rel__list a::before {
  content: "";
  position: absolute;
  top: .4375rem; /* 圆点中心对首行中心（y=12） */
  left: 0;
  width: .375rem; /* 6 */
  height: .375rem;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* 设计稿首项（红字 + 底线）即 hover/当前态 mock，四项统一实现为 hover/focus-within */
.pnd-rel__list a::after {
  content: "";
  position: absolute;
  top: calc(100% + .9375rem); /* 底线距文字底 15（项 1 y=934-919） */
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease-out;
}

.pnd-rel__list a:hover,
.pnd-rel__list a:focus-visible {
  color: var(--color-primary);
}

.pnd-rel__list a:hover::after,
.pnd-rel__list a:focus-visible::after {
  opacity: 1;
}

/* ---------- 上一篇 / 下一篇（4:190：y=4148 x=50–1870；盒 35，文字 20px） ---------- */
.pnd-pn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.6875rem; /* 正文底 4038 → 线 4088（其上 50）→ 线底 4089 + 59 = 4148 */
  padding-inline: 3.125rem;
}

/* 2026-09-20 用户要求「动态效果参考下方 Contact Us」→ 两个按钮改用全站 .btn-more 组件
   （图标方块内双箭头跑马灯 + 文字 hover/focus 滑出下划线）。本文件只保留「布局 + 静态配色差异」：
   · display / align-items / 图标方块尺寸圆角底色 / 箭头跑马灯 / 文字下划线动效 → 全由 components.css 提供
   · gap / 字号 / 行高 / 文字色 → 沿用本页设计值
   ⚠ 文字下划线由 `.btn-more:not(.btn-more--glass) > span:not(.btn-more__icon)::after` 代发，
     与「图标在前还是后」无关（该选择器用 :not 而非 :first-child）→ Previous（图标在前）同样命中。
   ⚠ .pnd-pn__next 原有一条**常驻下划线**（设计稿的「有下一篇」状态提示），
     已按用户 2026-09-20 的决定移除，改为与 Contact Us 一致的 hover 滑出下划线。 */
.pnd-pn__prev,
.pnd-pn__next {
  gap: 1.25rem; /* 20 */
  font-size: var(--font-size-body-lg);
  line-height: 1.8125rem; /* 29 */
  color: var(--color-text-1);
}

/* 图标方块：视觉规格（35×35 / --radius-sm / gray-300 底）与 .btn-more__icon 完全一致，
   只把箭头色改为 text-1（设计稿 Previous 盒内是黑色箭头；.btn-more__icon 默认 text-2）。
   ⚠ 本条 (0,1,0) 与 components.css 的 .btn-more__icon (0,1,0) 打平，靠本文件后加载生效；
     hover 态由 .btn-more:hover .btn-more__icon / .btn-more--red:hover…（(0,2,0)）接管 → 红底白箭头。
   ⚠ 别在这里重复写 width / height / border-radius / background / overflow —— 那些由组件提供。
     重复写会掩盖组件的后续改动（与坑 29「页面 CSS 与组件 CSS 抢同一属性」同型）。 */
.pnd-pn__box {
  color: var(--color-text-1);
}

/* Previous 箭头镜像。⚠ 必须用「方块内所有 svg」这个后代选择器：
   双箭头跑马灯有 --in / --out 两层，只镜像一层会出现一个正一个反。 */
.pnd-pn__prev .pnd-pn__box svg {
  transform: scaleX(-1);
}

/* ---------- 页尾标语（4:205：导航底 4183 → 4283 间距 100；底 4412 → 页脚 4492 间距 80） ---------- */
.pnd-slogan {
  margin: 6.25rem auto 5rem;
  padding: 0 var(--space-6);
  text-align: center;
}

.pnd-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.pnd-slogan .btn-more {
  margin-top: 1.875rem;
}

/* ---------- 平板档（768–1279：加大留白） ---------- */
@media (min-width: 768px) {
  .pnd-crumbs {
    margin-inline: var(--space-10);
  }

  .pnd-layout {
    padding-inline: var(--space-10);
  }

  .pnd-pn {
    padding-inline: var(--space-10);
  }

  .pnd-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pnd-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146) */
  }

  .pnd-layout {
    grid-template-columns: 69.3642% 25.954%; /* 1200 / 449 */
    column-gap: 4.6243%; /* 80 */
    /* ⚠ 分母是**内容盒 1730**（1920 − 左 120 − 右 70），不是画板宽 1920。
       旧值 62.5%/23.4375% 按 1920 算 → 实测只有 1081.25 / 405.47（设计 1200 / 449），
       正文列窄 9.9% → 同样的文字多折 7 行、整页高出 183。 */
    padding-inline: 6.25% 3.6458%; /* 左 120 / 右 70 */
  }

  /* 相关阅读右列吸附跟随（2026-09-20 用户要求「随滑动一起上下滑」）。
     正文列 3471px 而右列内容仅 561px → 不吸附时卡片滚出视野后右列留白约 2900px。
     ⚠ **align-self: start 是必需的**：grid 默认 align-items:stretch 会把 .pnd-rel
       拉成整行高（实测 3471）→ 元素与包含块等高时 sticky **没有任何可移动余量、完全失效**。
     ⚠ top 必须让开子页导航（.page-sub .site-nav 也是 sticky、高 96）→ 96 + 24 间隙 = 120。
     ⚠ **只在 ≥1280 生效**：<1280 是单列（相关阅读随流后置），吸附会把它钉在页尾附近。
     ⚠ 祖先链已实测无 overflow:hidden（.pnd-layout / main / .page / body 全 visible）——
       本项目有过「.section 的 overflow:hidden 让 sticky 彻底失效」的前车之鉴，改结构时勿加。 */
  .pnd-rel {
    position: sticky;
    top: 7.5rem; /* 120 = 导航 96 + 24 */
    align-self: start;
  }

  .pnd-pn {
    padding-inline: 3.125rem; /* 恢复 x=50（md 档泄漏） */
  }

  .pnd-head__title {
    font-size: var(--font-size-h1);
  }

  .pnd-slogan {
    margin: 6.25rem auto 5rem;
  }

  .pnd-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem;
  }
}

/* ---------- 移动端档（<768）：正文 / 导语字号统一 18/26 ----------
   全站规则：**区块导语与正文在移动端统一 18/26**（与各列表页导语一致，见 handoff.md
   「全站区块导语字号」、index-exp.md §17/§18/§19）。
   本页 base 里 .pnd-lead / .pnd-post__p / .pnd-post__body p 仍是 1920 设计值 24/32
   （--font-size-h3）→ 375 下一行只放得下 13 个字符、正文观感明显过大。
   ≥768 / ≥1280 档不动（设计值 24/32 保留）。 */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .pnd-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 面包屑 → 标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     本页标题的 y 由 .pnd-head__title 自己的 margin-top 决定（.pnd-head 上外边距为 0），
     base 6.25rem(100) 是 1920 设计值 → 移动端按 60 收窄。 */
  .pnd-head__title {
    margin-top: 3.75rem; /* 60 */
  }

  .pnd-lead,
  .pnd-post__p,
  .pnd-post__body p {
    font-size: var(--font-size-body-md); /* 18 */
    line-height: 1.625rem;               /* 26 */
  }

  /* 段间距：设计意图是「段间一个空行」（原注：设计稿 \n\n = 32px = 当时的行高）。
     行高降到 26 后，同步为 26 才仍是「恰好一个空行」；不改会变成 1.23 行、显得松散。 */
  .pnd-post__body p + p {
    margin-top: 1.625rem; /* 26 */
  }

  /* ---------- 推荐新闻卡片移到 Previous/Next 下方（2026-09-20 用户要求，仅 <768）----------
     ⚠ 只靠 order 做不到：.pnd-rel 与 .pnd-pn **不是兄弟**（前者在 .pnd-layout 内、后者是
       .pnd-layout 的后置兄弟），而 order 只在同一 flex/grid 容器内生效。
       → 必须让 .pnd-layout 退化为 display: contents（不生成盒子），把 .pnd-post / .pnd-rel
         提升为 <main> 的 flex 项，order 才有作用。
     ⚠ display: contents 会丢掉 .pnd-layout 自身的 margin-top: 79 与 padding-inline: 24
       → 原样补到子项：margin-top 只给 .pnd-post，24 两侧都要。漏补会把文章拉宽到满宽 375，
         且「黑线 → 文章」的 79 会归零。
     ⚠ main 变 flex 后，子项建立独立格式化上下文 → 外边距不再与兄弟/父级折叠，三处「只改盒、
       不改可见位置」：① .pnd-crumbs 的 18px 上边距不再穿透 main（main 盒顶 114 → 96，
       面包屑位置不变）；② .pnd-head__title 的 60px 上边距不再穿透 .pnd-head（head 盒顶
       241.6 → 181.6、高 +60，标题与日期 y 不变）；③ .pnd-slogan 的 80px 下边距不再穿透 main
       （main 盒底仍 = 页脚顶 7171.4）。
     ⚠ .pnd-slogan 的 `margin: 6.25rem auto 5rem` 里 auto 横向外边距会让它**不被拉伸**
       （stretch 在 cross 轴存在 auto 外边距时失效）→ 显式归零，保持块级时的满宽行为。
     间距：nav 底 → 卡顶 = 80（用户规格）；卡 → 标语区维持 100（设计值，未动）。
     验收：.workbuddy-ai/tmp/_verify-pnd-rel-order.js check */
  main {
    display: flex;
    flex-direction: column;
  }

  .pnd-layout {
    display: contents; /* 退化为「透明」→ 子项成为 main 的 flex 项 */
  }

  .pnd-post {
    margin-top: 4.9375rem;          /* 79：承接 .pnd-layout 的上外边距（黑线底 → 文章顶） */
    margin-inline: var(--space-6);  /* 24：承接 .pnd-layout 的 padding-inline */
  }

  .pnd-rel {
    order: 1;                       /* 排到 .pnd-pn 之后 */
    margin-top: var(--space-20);    /* 80：nav 底 → 推荐卡顶（用户规格） */
    margin-inline: var(--space-6);  /* 24：承接 .pnd-layout 的 padding-inline */
  }

  .pnd-slogan {
    order: 2;                       /* 仍居最后（否则 order:1 的 .pnd-rel 会跑到标语区之后） */
    margin-inline: 0;               /* 覆盖 base 的 auto（flex 项有 auto 横向外边距时不被拉伸） */
  }
}