/* =========================================================
   ARTICLE INNER PAGE  (template/article.shtml)
   Reading-column layout for the English news / feature pages
   ========================================================= */

/* No-hero nav color is now handled globally in style.css / style-cn.css
   (see the body.no-hero rules there) - do not duplicate here. */

/* ---------- HEADER BLOCK (no hero image) ---------- */
.article-head{padding:104px 0 30px}
.article-head .breadcrumb{
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;
  color:var(--muted);margin-bottom:22px;
}
.article-head .breadcrumb a{color:var(--accent);text-decoration:none}
.article-head .breadcrumb a:hover{text-decoration:underline}
.article-head .breadcrumb .sep{margin:0 9px;color:#c4c8c6}

.article-cat{
  display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:rgba(29,115,186,.10);padding:5px 12px;border-radius:999px;margin-bottom:16px;
}
.article-title{
  font-size:clamp(28px,4.2vw,46px);font-weight:800;line-height:1.18;
  letter-spacing:-.01em;color:var(--ink);
}
.article-sub{
  font-size:clamp(17px,2.2vw,21px);font-weight:400;color:var(--muted);
  max-width:900px;margin:12px 0 0;line-height:1.5;
}
.article-topic{margin-top:28px}
.article-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin-top:22px;font-family:var(--sans);font-size:14px;color:var(--muted);
}
.article-meta .item{display:inline-flex;align-items:center;gap:7px}
.article-meta .item b{color:var(--ink);font-weight:700}
.article-meta .dot{width:4px;height:4px;border-radius:50%;background:#cfd3d1}

/* ---------- COVER IMAGE ---------- */
.article-cover{max-width:800px;margin:30px auto 6px}
.article-cover img{width:100%;max-height:480px;object-fit:cover;display:block;border-radius:var(--radius)}
.article-cover figcaption{
  font-family:var(--sans);font-size:13.5px;color:var(--muted);
  margin-top:10px;line-height:1.5;
}

/* ---------- READING COLUMN ---------- */
.article-col{max-width:760px;margin:0 auto}

.article-lead{
  font-size:20px;line-height:1.72;color:#3a3f44;font-weight:500;
  margin:34px 0 0;padding-left:18px;border-left:3px solid var(--accent);
}

.article-body{font-size:18px;line-height:1.85;color:#23262b;margin-top:28px}
.article-body p{margin:0 0 24px}
.article-body h2{font-size:25px;font-weight:700;margin:42px 0 16px;color:var(--ink);line-height:1.3}
.article-body figure{margin:34px 0}
.article-body figure img{width:100%;border-radius:12px;display:block}
.article-body figure figcaption{
  font-family:var(--sans);font-size:13.5px;color:var(--muted);
  margin-top:10px;line-height:1.5;
}

/* ---------- BODY IMAGES ----------
   Keep any image inside the article body within the reading column
   (760px). Figure images are already width:100%; this also caps
   standalone <img> the editor may insert directly (often inside <p>). */
.article-body img{max-width:100%;height:auto}
.article-body > img,
.article-body p img{display:block;margin:34px auto}
.article-body blockquote{
  margin:32px 0;padding:18px 26px;border-left:4px solid var(--accent-ink);
  background:var(--bg2);border-radius:0 12px 12px 0;
  font-size:21px;line-height:1.6;font-style:italic;color:var(--accent-ink);
}

/* ---------- RESPONSIBILITY / CREDITS ---------- */
.article-credits{
  max-width:760px;margin:46px auto 0;padding-top:22px;
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 26px;
}
.article-credits .cred{font-family:var(--sans);font-size:13px}
.article-credits .cred .k{
  display:block;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;font-size:11px;margin-bottom:3px;
}
.article-credits .cred .v{color:var(--ink);font-weight:600}

/* ---------- RELATED NEWS ---------- */
.related{background:var(--bg2);padding:60px 0;margin-top:64px}
.related h2{font-size:23px;font-weight:700;margin-bottom:26px;color:var(--ink)}
.related .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.related .card .body h3{font-size:16px}

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed;right:26px;bottom:26px;width:48px;height:48px;border-radius:50%;
  border:none;background:var(--accent);color:#fff;cursor:pointer;z-index:40;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(29,115,186,.40);
  opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s;
}
.to-top.show{opacity:1;transform:translateY(0);pointer-events:auto}
.to-top:hover{background:var(--accent-ink)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:920px){
  .related .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .article-head{padding:86px 0 22px}
  .article-body{font-size:17px}
  .article-lead{font-size:18px}
  .related .grid{grid-template-columns:1fr}
  .to-top{right:16px;bottom:16px}
}

/* =========================================================
   原生视频播放器（文章详情页 .video-box）—— 纯 sticky 稳定版
   - 桌面端：占满阅读栏宽度，竖屏视频自动限高 + 黑边
   - 手机端(<=768px)：视频框宽度 = 父容器宽度（不撑出），永远不会
                     超出屏幕；用 CSS position:sticky 在滚动到顶时
                     吸顶悬浮（不会被父级夹紧、不闪动）
   - 用 CSS 原生 sticky，不用 JS 切换 position，绝对不会"闪动"
   - JS 只在吸顶瞬间加 .is-stuck class 用于压缩视频高度
   - 将本段追加到 css/article.css 末尾即可
   ========================================================= */

/* ---------- 基础样式（桌面 + 手机共用） ---------- */
.video-box{margin:34px auto;max-width:100%;}
.video-box video{
  display:block;width:100%;height:auto;
  max-height:70vh;        /* 竖屏视频限高：最高不超过视口70%，避免整屏都是视频 */
  background:#000;        /* 限高后画面比例不变，多余部分自动留黑边 */
  border-radius:var(--radius);
}

/* ---------- 手机端：CSS 原生 sticky，无 JS 切换，无闪动 ---------- */
@media(max-width:768px){

  /* 兜底：任何意外溢出都裁掉，绝不产生横向滚动 */
  html,body{overflow-x:clip;}

  /* 视频框：跟随父容器宽度，不会撑出，永远不超屏 */
  .video-box{
    width:100%;
    margin-top:22px;
    margin-bottom:22px;
    background:#000;
    /* 原生 sticky：top:70px = 固定导航栏高度，贴在导航正下方。
       z-index 低于导航(100)和下拉菜单(60)，高于正文。
       sticky 元素始终在父容器宽度内，不会再被夹紧出怪事 */
    position:sticky;
    top:70px;
    z-index:50;
  }
  .video-box video{border-radius:0;width:100%;}

  /* 已吸顶(JS 加 .is-stuck)：压缩高度到 38vh，给正文留出空间 */
  .video-box.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.28);}

  /* 横屏视频：吸顶后压缩 */
  .video-box.video-landscape.is-stuck video{max-height:38vh;}

  /* 竖屏视频：未吸顶时按 70vh 高、宽度按比例自适应居中 */
  .video-box.video-portrait video{
    width:auto;max-width:none;height:70vh;margin:0 auto;
  }
  /* 竖屏视频：吸顶后缩为 38vh 高的居中小窗 */
  .video-box.video-portrait.is-stuck video{
    width:auto;height:38vh;margin:0 auto;
  }
}

/* ---------- 可选：兼容旧稿 ----------
   旧新闻是模板直接输出 <video>（无 .video-box 包装、内联 width:80%），
   这条让它们在手机端至少不超屏（不会吸顶）。不需要可删除。 */
@media(max-width:768px){
  .article-body > video{
    max-width:100% !important;width:100% !important;
    height:auto !important;margin:22px auto !important;border-radius:0;
  }
}