/* ============================================================
   xnn-layout-fix.css — x-new.cn 全站布局修复  2026-11-12
   独立文件（/file/css/ 目录 FTP 只读），由模板层与存量页统一引入。
   版本号：?v=20261112a
   ============================================================ */

/* ---- 1) PC 横向溢出修复 ----
   根因（浏览器实测定位）：
     uikit 的 .uk-cover{max-width:none;position:absolute;left:50%;top:50%;
     transform:translate(-50%,-50%)} 让 1920px 宽的 banner 图在 1280 视口内
     左右溢出（实测 left:-319 / right:1599）。
     更关键的是轮播切换动画期间，li 被 translateX() 位移，
     连带 .bdots（li 的子元素）一起移出视口 —— 实测
     documentElement.scrollWidth 达 2208（视口 1280），
     用户在动画期间**确实能横向拖动页面**（实测 70 次采样中 23 次可横滚）。

   修法选 .pc-only{overflow-x:clip}：
     · .pc-only 是承载 banner 轮播的容器，裁剪范围最小，
       只影响 banner 区，不动其它布局。
     · 用 clip 而非 hidden —— hidden 会创建滚动容器（会破坏 sticky 吸顶，
       实测 html{overflow-x:clip} 让导航 top 由 0 变 -1395）；
       clip 不创建滚动容器，实测 sticky 导航 top=0、fixed CTA 底栏正常。
     · 实测结果：可横向滚动次数 23/70 -> 0/70，scrollWidth 2208 -> 1280。 */
/* 承载 banner 轮播的容器有两种形态：
     · 首页    .pc-only > .banner_wrap.i_banner
     · 文章页  .banner_wrap.i_banner（无 .pc-only 包裹）
   所以两者都要裁剪。 */
.pc-only,.banner_wrap.i_banner{overflow-x:clip;overflow-y:visible}

/* ---- 2) body 兜底 ----
   其他页面（文章页等）若仍有溢出元素，body 横向裁剪作为第二道防线。
   body 而非 html：html 上的 overflow 会让 sticky 包含块变成 html 导致吸顶失效
   （实测 html{overflow-x:clip} 时 #xnnBar 吸顶 top 由 0 变 -1440）。
   body{overflow-x:hidden} 实测不影响 sticky（top 仍为 0）。 */
body{overflow-x:hidden}

/* ---- 2b) AI 徽章的相对位移归零 ----
   .xnn-aibadge 的基础规则带 left:calc(531px + max(50% - 600px, 0px))，
   即使在 position:static 的页面也会产生 531px 的相对位移；
   配合居中 margin（margin-left/right 各约 498px），
   会把 html 的 scrollWidth 撑到 1600+（实测 1633），
   而实际所有元素右边界都 ≤ 视口宽（maxR=1280）—— 溢出的是空白区。
   在无顶栏页面（html.xnn-nohdr）该徽章已退化为静态居中胶囊，
   此时 left 应归零，否则相对位移会把它推向视口右侧。 */
html.xnn-nohdr .xnn-aibadge{left:auto}

/* ---- 3) banner 图裁切兜底 ----
   把图改为 object-fit:cover 铺满，避免不同浏览器下 .uk-cover 的
   居中平移产生 1~2px 抖动，也避免 transform 位移时的溢出。 */
.banner img.uk-cover{
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;
  left:0!important;top:0!important;transform:none!important;
  object-fit:cover;object-position:center;
}
