/* ============================================================
   XGM 官网 Vue 版 · 追加样式
   只做三件事：①视频背景层 ②整页滚动（一次滑动翻一页）③对应的移动端适配。
   原 style.css / refinements.css / 各详情页 css 保持原样，视觉规则未改动。
   ============================================================ */

/* ---------- 1. 视频背景层 ---------- */
/* 板块原有的背景图保留，作为视频加载前的兜底画面；
   视频铺在背景图之上、渐变遮罩(::before)与文案之下，视觉层次与原来一致。 */
.hero,.computer,.scene,.news{isolation:isolate}
/* inset 的逐边写法（老内核 Chromium<87 不支持 inset 简写） */
.bg-video{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}

/* ---------- 2. 整页滚动（Swiper：桌面 transform 翻页 / 手机 cssMode 原生吸附） ---------- */
/* ≥601px：Swiper 接管滚轮/键盘，一次一页；每屏定高，内容超出时本屏内部滚动，
   滚到边缘再翻页。
   ≤600px：cssMode 原生滚动 + scroll-snap，触屏一次轻扫吸附一屏，超高板块分段浏览。 */
body.fp-active{overflow:hidden}
.fp-swiper{height:100vh;height:100svh;height:100dvh}
/* overflow-anchor:none：防止 Chrome 在 transform 翻页时对滑块内部滚动位置做锚定校正 */
.fp-swiper .swiper-slide{height:auto;scroll-snap-stop:always;overflow-anchor:none}
/* 包4 home-layout.css 把各板块定高 max(760px,63.818vw)（特异性 0,2,3，压过上面 0,2,0）：
   提高特异性重申整页滚动高度——桌面每屏撑满视口，手机按内容自然撑高 */
.fp-swiper .swiper-wrapper .swiper-slide{height:100%}
@media(max-width:600px){
  .fp-swiper .swiper-wrapper .swiper-slide{height:auto}
  .fp-swiper .swiper-wrapper .hero{height:100vh;height:100svh}
}
/* Swiper 自带的 .swiper-slide{display:block} 会按加载顺序盖掉原站的 flex 布局（原样式表
   同为 0,1,0 但加载在前），各板块文字因此全部顶到页首。这里按原样恢复 display:flex；
   对齐属性（align-items / justify-content）原样式表从未被覆盖、一直生效，无需重写。
   （0,2,0 的特异性必然压过 Swiper 的 0,1,0，与加载顺序无关。） */
.fp-swiper .hero,.fp-swiper .scene,.fp-swiper .computer,.fp-swiper .partners,.fp-swiper #footer{display:flex}
/* 覆盖 Swiper 默认的 height:100%，手机端各屏按内容自然撑高 */

@media(min-width:601px){
  .fp-swiper .swiper-slide{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .fp-swiper .swiper-slide::-webkit-scrollbar{display:none}
  /* 新闻轮播自带 clamp 高度（可能高于视口），整页模式下以视口为准，避免底部分页 tab 被裁掉 */
  .fp-swiper #news.news-carousel{height:100%}
  /* 小窗口内容放不下时居中会裁掉顶部且滚不回来：safe 让其退回顶对齐（不支持的浏览器仍为居中） */
  .fp-swiper .hero,.fp-swiper .scene,.fp-swiper .computer{align-items:safe center}
}
@media(max-width:600px){
  .fp-swiper .swiper-wrapper{overscroll-behavior:none}
  /* 板块高度参差：不足一屏的撑满，避免吸停止后露出下一屏背景 */
  .fp-swiper .swiper-slide{min-height:100vh;min-height:100svh}
  /* 亚像素取整会让邻屏边缘在屏顶/屏底漏出一条细线：给每屏一圈 1px 深色描边盖住缝隙（不影响布局） */
  .fp-swiper .swiper-slide{box-shadow:0 0 0 1px #05090d}
  /* 新闻屏手机端转常规流式布局：包里是 850px 定高 + 全绝对定位（标题区/故事区/横滑 tab 条），
     装不下两列新闻卡会被裁掉。改为高度自适应：标题区→激活的故事面板（照片带内）→两列新闻卡。 */
  .fp-swiper #news.news-carousel{height:auto;padding-bottom:24px}
  .fp-swiper #news .news-section-heading{position:absolute;top:calc(var(--xgm-nav-h) + 14px);padding:0}
  .fp-swiper #news .news-stage{position:static}
  .fp-swiper #news .news-slide{position:relative;inset:auto;min-height:600px}
  .fp-swiper #news .news-story{position:relative;top:auto;left:auto;z-index:2;width:auto;padding:170px 7% 0}
  /* tab 条恢复包设计的横滑卡片（76% 宽卡 + x 向吸附）：竖排两列会撑破一屏 */
  /* 卡条只显示当前那张卡（非当前整卡隐藏但保留占位，高度不变） */
  .fp-swiper #news .news-tabs{position:static;margin:22px 7% 0;width:auto;padding:0 5px 10px}
  .fp-swiper #news .news-tab:not(.is-active){visibility:hidden}
  /* 吸附恢复 swiper 默认 mandatory：各屏内容已压进一屏，一次轻扫吸附一屏；
     结尾长页（伙伴+页脚）关闭自身的吸附点，作为可自由滚动的收尾段 */
  .fp-swiper #partners.partners{scroll-snap-align:start end}
  /* 结尾同屏：伙伴区按交付包手机端原尺寸（min-height 100svh + 65px 7% 内边距），页脚原样顺排其后 */
  .fp-swiper #partners.partners{padding:0}
  .fp-swiper .partners-body{justify-content:flex-start;min-height:100vh;min-height:100svh;padding:65px 7%}
  /* 板块视频带收紧：一屏能看到更多正文，减少纵向截断 */
  .fp-swiper .computer .bg-video,.fp-swiper .scene .bg-video{height:340px}
  .fp-swiper .scene,.fp-swiper .computer{background-size:auto 340px;padding-top:238px}
  .fp-swiper .computer .bg-video{object-position:68% center}
  /* 测控板块照片为竖图：手机端改通栏带，避免两侧留黑 */
  .fp-swiper .scene.control::before{height:360px;inset:0 0 auto 0;background-size:cover;background-position:60% top}
  .fp-swiper .scene{padding-bottom:20px}
  .fp-swiper .computer{padding-top:200px;padding-bottom:14px}
  .fp-swiper .computer-copy p{margin:10px 0 12px}
  .fp-swiper .computer-copy{padding:22px 0 12px}
  .fp-swiper .computer-copy .more{min-height:50px;min-width:0;padding:10px 20px;margin-bottom:10px}
  .fp-swiper #computer-specs th,.fp-swiper #computer-specs td{padding-top:4px;padding-bottom:4px}
  #computer-specs th,#computer-specs td{padding-top:8px;padding-bottom:8px}
}

/* ---------- 3. 移动端视频带状显示 ---------- */
/* 对应原背景图在手机端 background-size:auto 480px / 520px 的铺法：
   视频只显示顶部等高的带状区域，下方仍为深色底，保持原手机版式。 */
@media(max-width:760px){
  .computer .bg-video{height:520px;inset:0 0 auto 0;object-position:center top}
}
@media(max-width:600px){
  .computer .bg-video{height:480px}
  .scene .bg-video{height:480px;inset:0 0 auto 0;object-position:center top}
  .hero .bg-video{object-position:55% center}
}

/* ---------- 4. 旧内核兼容 ----------
   微信 X5 等旧内核不认识 svh：height:100svh 整条被丢弃，hero 会塌到
   min-height:660px。先声明 100vh 兜底，支持 svh 的浏览器用后面的覆盖。 */
@media(max-width:600px){
  .fp-swiper .hero{height:100vh;height:100svh}
  .fp-swiper .partners{min-height:100vh;min-height:100svh}
  body.careers-detail .careers-hero.hero{height:100vh;height:100svh}
}
.news-dialog{max-height:85vh;max-height:85svh}
/* <dialog> 旧内核兜底：固定定位浮层 + 遮罩 */
.news-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;z-index:998}
.news-dialog.news-dialog--fallback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;z-index:999;display:block}

/* ---------- 7. 全局吸顶导航（App.vue 挂载，全站固定） ---------- */
/* 桌面端横向时间轴/Logo 墙板块：高度跟随视口（设计稿定高假设不适用于整页滑动） */
@media(min-width:601px){
  .fp-swiper #strategy{height:100%;min-height:0;padding:max(min(5vw,4.5vh),96px) 8.5%;justify-content:safe center}
  /* 结尾同屏：生态伙伴与页脚按交付包原尺寸顺排（伙伴区 64.864vw 高、页脚原 490px），
     合计约 1420px 超出一屏：超出部分在本屏内部滚动（滚轮先滚本屏，滚到边缘再交给
     Swiper —— 由 HomePage 捕获阶段的 wheel 监听放行）。
     clip-path：本屏内部滚动的内容不应钻进吸顶导航（高 70px）底下。 */
  .fp-swiper #partners.partners{height:auto;min-height:0;padding:0;justify-content:flex-start;clip-path:inset(var(--xgm-nav-h) 0 0 0)}
  .fp-swiper .partners-body{min-height:max(64.864vw,760px);display:flex;flex-direction:column;justify-content:flex-start;padding:max(5vw,90px) 8.5% 5vw}
  /* 包里标题是 #partners 的直接子级（#partners>h2{margin:0}）；迁移后包在 .partners-body 内，需在此恢复 */
  .fp-swiper .partners-body>h2{margin:0}
}
/* 背景照片跟随内容：#partners::before 是 inset:0，只盖住滑块可视高，
   内部滚过一屏后下方露出纯色断层。改铺到随内容走高的 .partners-body 上。 */
.fp-swiper #partners::before,.fp-swiper #partners::after{content:none}
.fp-swiper .partners-body{position:relative;isolation:isolate;background:#05090d}
.fp-swiper .partners-body::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;background-image:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.83) 48%,rgba(0,0,0,.86)),url('assets/partners-d.png');background-size:cover;background-position:center;filter:saturate(.72) contrast(1.06) brightness(.94)}
.fp-swiper .partners-body::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background:linear-gradient(135deg,rgba(23,43,62,.20),rgba(8,16,24,.08) 55%,rgba(69,52,35,.08));mix-blend-mode:soft-light}
/* 导航实际高度（含 22px 上下内边距），结尾页 clip-path 与板块顶部留白引用此值 */
:root{--xgm-nav-h:88px}
@media(max-width:640px){:root{--xgm-nav-h:49px}}
/* site-updates.css 在 ≤1100px 把导航设为可换行（包里是随页滚动的静态页头，换行无妨）；
   本站导航是固定悬浮，换行会翻倍高度盖住内容：一律单行 + 横向滚动 */
@media(max-width:1100px){
  header.app-nav nav{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  header.app-nav nav::-webkit-scrollbar{display:none}
  header.app-nav nav>*{white-space:nowrap;flex:none}
}
header.app-nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:6%;padding:22px 4%;background:rgba(5,9,13,0.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
header.app-nav img{width:82px}
/* 详情页首屏：包里 hero 定高 62.5~66.75vw，宽屏下超过视口，首屏文案被压到屏幕下部
   （测控最重：标题中心在视口 93% 处）。统一收紧为一屏高，文案垂直居中；
   背景改 cover 避免把 1.56:1 的底图竖向拉伸变形。 */
@media(min-width:601px){
  body.detail-page .hero{height:100vh;height:100svh;min-height:640px;background-size:cover;background-position:center}
}
header.app-nav nav{flex:1}
header.app-nav nav a{font-size:17px}
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #ffffff3b;border-radius:6px;color:#c9d7e6;font-size:14px}
.btn-back:hover{color:#fff;border-color:#ffffff8a}
/* 页内锚点 / scrollIntoView 的落点预留吸顶导航高度（招聘岗位、新闻详情目录等）。
   !important：覆盖包里 news-detail/careers-detail 的旧 35px/30px 值（那是在固定导航之前定的） */
[id]{scroll-margin-top:calc(var(--xgm-nav-h) + 14px) !important}
/* 新闻中心列表可点行：版式与纯文本行一致，悬停提示可点 */
.news-row-link{color:inherit;text-decoration:none}
.news-row-link:hover{color:#c5a173}
/* 新闻中心标题横幅：包里页面顶部有 130px 静态页头，SPA 用固定导航盖在横幅上，
   标题需下移避开导航（横幅照片仍从页顶铺起，导航半透明压在上面） */
.news-index .news-list-heading{padding-top:calc(var(--xgm-nav-h) + 40px)}
/* 新闻板块内容下移，避开吸顶导航（仅桌面，手机端导航更矮不遮挡） */
@media(min-width:601px){
  .fp-swiper #news .news-section-heading{top:150px}
  .fp-swiper #news .news-story{top:250px}
}
/* 手机端汉堡折叠菜单：导航按钮在 ≤640 显示，菜单收进下拉面板 */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:36px;padding:7px 9px;margin-left:auto;background:transparent;border:0;cursor:pointer}
.nav-burger span{display:block;height:2px;background:#e8edf3;border-radius:1px;transition:transform .25s,opacity .25s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:641px){.nav-burger{display:none}}
@media(max-width:640px){
  .nav-burger{display:flex}
  header.app-nav{padding:12px 16px;gap:12px;background:rgba(5,9,13,.85)}
  header.app-nav img{width:52px}
  header.app-nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px 0 10px;background:rgba(5,9,13,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 14px 28px #000a;max-height:calc(100vh - var(--xgm-nav-h));overflow-y:auto}
  header.app-nav nav.open{display:flex}
  header.app-nav nav a{font-size:16px;padding:13px 24px;border-bottom:1px solid #ffffff10}
  header.app-nav nav .nav-explore{margin:10px 24px 4px;padding:11px 16px;border:1px solid #996424aa;text-align:center}
  .btn-back{padding:5px 10px;font-size:13px}
}
/* ---------- 2026-10-28 体验巡检 ---------- */
/* 菜单在平板宽度折叠，让所有入口直接可见；高度由 SiteNav 实测同步。 */
@media(max-width:1100px){
  header.app-nav{padding:12px 20px;gap:16px}
  header.app-nav img{width:64px;display:block}
  header.app-nav .nav-burger{display:flex;min-width:44px;height:44px}
  header.app-nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px;background:rgba(5,9,13,.98);box-shadow:0 14px 28px #000a;max-height:calc(100vh - var(--xgm-nav-h));max-height:calc(100dvh - var(--xgm-nav-h));overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  header.app-nav nav.open{display:flex}
  header.app-nav nav a{font-size:16px;padding:13px 24px;border-bottom:1px solid #ffffff10}
  header.app-nav nav .nav-explore{margin:10px 24px 4px;padding:11px 16px;text-align:center}
}
@media(max-width:640px){
  header.app-nav{padding:8px 16px}
  header.app-nav img{width:52px}
}
header.app-nav>a{flex-shrink:0}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #c5a173;outline-offset:4px}
.news-controls button{min-width:44px;min-height:44px}
/* 联系页是咨询入口，保留设计稿的短横幅比例，尽早露出表单。 */
@media(min-width:601px){body.contact-detail .contact-hero.hero{height:32vw;min-height:400px;max-height:560px}}
.news-empty{padding:36px 0;color:#b8bdc5}
/* 小高度桌面新闻屏：收紧固定定位区的间距，避免正文与卡条相撞。 */
@media(min-width:601px){
  .fp-swiper #news.news-carousel{min-height:0}
  .fp-swiper #news .news-section-heading{top:calc(var(--xgm-nav-h) + 28px)}
}
@media(min-width:601px) and (max-height:700px){
  .fp-swiper #news .news-story{top:calc(var(--xgm-nav-h) + 110px);width:60%}
  .fp-swiper #news .news-category{margin-bottom:12px}
  .fp-swiper #news .news-story h3{font-size:30px;line-height:1.4;margin-bottom:16px}
  .fp-swiper #news .news-description{font-size:16px;line-height:1.8;margin-bottom:18px}
  .fp-swiper #news .news-tabs{bottom:22px}
  .fp-swiper #news .news-tab-title{font-size:14px}
}
@media(max-width:600px){
  .fp-swiper #news .news-controls{gap:2px}
  .fp-swiper #news .news-section-heading{gap:8px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}
.news-empty-carousel{position:relative;padding:200px 8.5% 60px;color:#b8bdc5}
@media(max-width:600px){
  /* 尾部留出滚动空间，最后一张新闻卡也能与正文左边缘对齐。 */
  .fp-swiper #news .news-tabs{grid-template-columns:repeat(6,76%) 24%}
  .fp-swiper #news .news-tabs::after{content:'';grid-column:7;grid-row:1;height:1px}
}

/* Node1 2026-10-31: static delivery adapted to fixed nav + Swiper. */
header.app-nav nav .nav-explore{font-size:16px;justify-self:end}
@media(min-width:1200px){header.app-nav nav{display:grid;grid-template-columns:repeat(8,minmax(0,1fr)) minmax(150px,1.6fr);gap:8px}}
@media(min-width:1101px) and (max-width:1199px){header.app-nav{gap:3%}header.app-nav nav{gap:12px}header.app-nav nav a{font-size:15px}}
.privacy-page .privacy-layout{padding-top:calc(var(--xgm-nav-h) + 40px)}
.fp-swiper .news-end{display:block}
.fp-swiper .news-end #footer{display:block}
.fp-swiper .partners-body::before{background-image:linear-gradient(90deg,#000e,#000d 65%,#000d),url('assets/partners-d.png')}
@media(min-width:601px){
 .fp-swiper #strategy{padding:calc(var(--xgm-nav-h) + 32px) 8.5% 32px}
 .fp-swiper .partners-body{padding-top:calc(var(--xgm-nav-h) + 32px)}
}
@media(max-width:600px){
 .fp-swiper .news-end{scroll-snap-align:start end}
 .fp-swiper .partners-body{padding-top:calc(var(--xgm-nav-h) + 24px)}
 .fp-swiper #chip.scene .copy{align-items:flex-end;text-align:right}
}

/* Restored scene videos retain the new node's typography and fallback pictures. */
.fp-swiper #home.has-scene-video::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#000e,#000b 35%,#0005 62%,transparent 85%)}

/* Keep macOS edge overscroll from moving the document behind full-page slides. */
html.fp-active,body.fp-active{overscroll-behavior-y:none}

/* The same authorized video moves between these absolute scene mounts. */
.scene-video-slot{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none}