/* ==========================================================================
   腾远官网 · 手机端阅读体验修复层   mobile-fix-v1.css
   --------------------------------------------------------------------------
   本文件是「一层」，不是改动：
     · 不碰 382 KB 生产包、102 KB 样式表、任何图片与文案
     · 不想要了 → 删 mobile-fix-v1.css + mobile-fix-v1.js + index.html 里那两行引用
     · URL 加 ?mfix=off 可整体关闭，用来和原版逐字节对比

   设计原则（三条，都为了「可控」）：
     1) 全部规则限定在 ≤1023px —— 桌面端保持原样，零回归风险
     2) 字号用 clamp(min, vw, 桌面原值)：在 1023px 处正好饱和到桌面值，
        所以 1023 → 1024px 之间不会有跳变
     3) 只覆盖「工具类」，不覆盖标签。因为站点用的是 Tailwind 默认字阶
        （text-sm / text-lg / text-4xl …），类名与字号是一一对应的，
        按类名覆盖既能精确命中，也便于日后逐条回退

   ★ 依赖一个前提：本文件必须排在 index-603fa2f9.css 之后加载。
     Tailwind 工具类的特异度是 (0,1,0)，本文件用同特异度 + 后加载获胜。
     index.html 里已把它放在最后一行 link。
   ========================================================================== */

/* ==========================================================================
   一、显示字号：给手机缩档（clamp 上界 = 桌面原值，无缝衔接）
   --------------------------------------------------------------------------
   实测原状（390px 视口，与 1440px 逐档完全一致）：
     58px 首屏主标 / 48px 内页主标 / 36px 区块标题 / 30px / 24px / 20px / 18px
   vw 系数的选法：让 clamp 的上界在 1023px 之前刚好被触到，
     即 系数 × 1023 / 100 ≥ 桌面原值 —— 这样 1023px 时取到的就是桌面值。
   ========================================================================== */
@media (max-width: 1023px) {

  /* 首屏主标 58px —— 手机上占宽 326px、折两行、吃掉 1/5 屏，是"读不下去"的第一元凶 */
  html.mfix [class~="text-[58px]"] {
    /* 系数 8vw + 下限 26px 是算出来的，不是拍的：
       标题可用宽度 ≈ 视口宽 − 64（外层 p-4 各 16 + 内层 px-4 各 16），
       "常州腾远电杆有限公司" 10 个字，要一行放下就需 字号 ≤ (W−64)/10 = 0.1W − 6.4。
       8vw 在 360~1023px 全区间都压在这条线以下 → 标题始终一行。
       实测：360px→28.8px(288≤296 ✓) 390→31.2 414→33.1 430→34.4 768/1023→封顶 58
       （原先 9.2vw 会得到 "常州腾远电杆有限" + "公司" 的孤字断行） */
    font-size: clamp(26px, 8vw, 58px) !important;
    line-height: 1.15 !important;      /* 原 1.5 → 87px 行高，中文两行之间空得像两段 */
    /* 原来 h1 是 mb-0，它和下面的英文副标之间的间距全靠两行字的半行距凑，
       字号缩到 31px 之后就只剩 4~5px，两行字贴在一起。这里单独给一点下间距 */
    margin-bottom: 12px !important;
    letter-spacing: .01em;
    text-wrap: balance;                 /* 320px 这类极窄屏若仍折行，也会均分而不是留孤字 */
  }
  /* 首屏英文副标 28px Arial —— 顺带换回中文字体栈，Arial 做英文主视觉偏"说明书感" */
  html.mfix [class~="text-[28px]"] {
    font-size: clamp(14px, 3.3vw, 28px) !important;
    line-height: 1.35 !important;
    font-family: var(--ty-font-cn) !important;
    letter-spacing: .02em;
    opacity: .92;
  }

  /* 内页主标 48px —— 行高原来是 48px，比值 1.00，中文标题会"顶格" */
  html.mfix [class~="text-5xl"] {
    font-size: clamp(28px, 7.6vw, 48px) !important;
    line-height: 1.2 !important;
  }
  /* 区块标题 36px —— 原行高 40px（1.11） */
  html.mfix [class~="text-4xl"] {
    font-size: clamp(24px, 5.7vw, 36px) !important;
    line-height: 1.25 !important;
  }
  /* 30px —— 原行高 36px（1.2） */
  html.mfix [class~="text-3xl"] {
    font-size: clamp(21px, 4.8vw, 30px) !important;
    line-height: 1.3 !important;
  }
  /* 卡片标题 24px —— 原行高 32px（1.33） */
  html.mfix [class~="text-2xl"] {
    font-size: clamp(19px, 3.1vw, 24px) !important;
    line-height: 1.35 !important;
  }
  /* 20px —— 原行高 28px（1.4） */
  html.mfix [class~="text-xl"] {
    font-size: clamp(17px, 1.7vw + 11px, 20px) !important;
    line-height: 1.5 !important;
  }

  /* ------------------------------------------------------------------------
     二、正文与小字：手机端要比桌面「更大」，不是更小
     ------------------------------------------------------------------------
     这两条是唯一「反方向」的规则（手机值 > 桌面值），clamp 表达不了，
     所以直接给固定值。因此 1023 → 1024px 之间会有一个小台阶
     （14 → 15.5 / 12 → 13）。桌面端不改是本次的刻意取舍：先只动手机，降回归风险。

     顺带说明一个此前报告里的表述需要订正：
       "正文只有 14px" 不准确 —— 实测正文段落多数是 16px + leading-relaxed(1.625)，
       14px 是**文本节点数量的高频值**（大量卡片描述、标签、辅助信息）。
       真正偏小的是 text-xs(12px) 与这些 14px 卡片文字，两条都在这里补上。
     ------------------------------------------------------------------------ */
  html.mfix [class~="text-sm"] {
    font-size: 15.5px !important;
    line-height: 1.7 !important;       /* 原 1.43（20px） */
  }
  html.mfix [class~="text-xs"] {
    font-size: 13px !important;
    line-height: 1.6 !important;       /* 原 1.33（16px） */
  }

  /* ------------------------------------------------------------------------
     三、触控目标补到 44px
     ------------------------------------------------------------------------
     只挑「独立成块」的可点元素下手，绝不动正文里的行内链接，
     否则会把一句话中间的链接撑成 44px 高的块，版式会散。
     实测不达标清单：footer li 内 7 个链接（56×20）、页脚备案号（153×40）、
     汉堡按钮（40×40）、卡片「查看详情」（88×24，class 含 inline-flex）、
     公司概况页标签按钮（114×36，class 含 rounded-md）。
     ------------------------------------------------------------------------ */
  html.mfix footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  html.mfix header button {
    min-width: 44px;
    min-height: 44px;
  }
  html.mfix main a[class~="inline-flex"],
  html.mfix main button[class~="rounded-md"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ------------------------------------------------------------------------
     四、首页产品区：跑马灯 → 静态单列列表
     ------------------------------------------------------------------------
     原状（实测）：容器是 <div class="flex" style="transform:translateX(-264px);
     transition:none; width:5504px">，里面 16 个子项 = 8 个产品 × 复制 2 份，
     每张卡 flex-shrink-0 w-80（320px 固定宽）。390px 视口下卡片横坐标
     x = −255 / 65 / 385 …，任何一帧都只有 0 或 1 张完整 —— 客户无法比较产品。

     覆盖点：
       ① transform / width 是**内联样式**，必须用 !important 才能压住
       ② w-80 的固定宽度在 grid 里不生效于 flex 属性，但要单独压 width
       ③ ★ 载掉复制出来的后半段。当前数据是 8 个产品 → 隐藏 :nth-child(n+9)。
          如果产品数据以后变了，这里要同步改（改法见手机端修复说明.html）。
            为什么会这样：源码里写的是 children:[...s, ...s]，即把列表拼两遍
            来实现无缝循环。改成静态列表后就会出现 8 个产品显示两遍。
     ------------------------------------------------------------------------ */
  html.mfix [class~="flex"][style*="translateX"] {
    transform: none !important;                 /* 停掉自动滚动 */
    width: auto !important;                     /* 原内联 width:5504px */
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  html.mfix [class~="flex"][style*="translateX"] > * {
    width: auto !important;                     /* 压掉 w-80 = 320px */
    max-width: 100% !important;
    margin: 0 !important;
  }
  html.mfix [class~="flex"][style*="translateX"] > :nth-child(n + 9) {
    display: none !important;                   /* 隐藏复制出来的后半段（8 产品） */
  }

  /* 卡片标题/描述原本被 line-clamp-1 / line-clamp-2 截断，
     手机端既然一屏只有一张卡，就不该再截 */
  html.mfix [class*="line-clamp"] {
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  /* ------------------------------------------------------------------------
     五、平台自带缺陷：装饰角块渲染成不透明近白块（8 处）
     ------------------------------------------------------------------------
     源码写的是 from-[#DC6A1B]/8（8% 透明度的橙），但这条 Tailwind 类
     在**当前样式表与原始平台样式表里都没有被生成**（各搜 0 处）。
     于是该元素继承到祖先 SECTION 的 --tw-gradient-stops（#EEF2F7 → 透明），
     渲染成一块不透明的近白色圆角方块，压在产品/新闻/实景图上。

     已核实：原始平台 index.js 里同样 8 处、原始 index.css 里同样没生成
     → 不是本地化引入的，是平台自带的。一行修掉。

     ↳ 若不想让这一条混在手机端修复里，单独删掉这个 (五) 块即可，其余不受影响。
     ------------------------------------------------------------------------ */
  html.mfix [class*="from-[#DC6A1B]/8"] {
    background-image: linear-gradient(to bottom right,
        rgba(220, 106, 27, .08), transparent) !important;
  }

  /* ------------------------------------------------------------------------
     六、模块标题：手机端左对齐
     ------------------------------------------------------------------------
     原状是「居中标题 + 一根橙色短横线」（经典企业模板两件套）。手机屏窄，
     居中的大标题每行字数少、断行位置随机，左对齐更稳。
     这里只去掉居中与装饰横线，不动标题字号（字号已在第一、二节处理）。
     ------------------------------------------------------------------------ */
  html.mfix main section > div > div > h2[class~="text-4xl"],
  html.mfix main h2[class~="text-4xl"] {
    text-align: left !important;
  }
  /* ------------------------------------------------------------------------
     七、区块边缘渐隐遮罩：手机端整体隐藏
     ------------------------------------------------------------------------
     这类元素是 `absolute left-0/right-0 top-0 bottom-0 w-32 z-10 pointer-events-none`
     配 `bg-gradient-to-r/l from-[#xxx] to-transparent` —— 128px 宽、**区块全高**、
     z-index:10 盖在内容之上。原意是给"横向滚动条"的两端做柔化。

     实测它有两个问题（前者是我改跑马灯带出来的，后者是平台自带的）：

     ① **我引入的**：首页产品区原本是横向跑马灯，改成静态栅格后，
        这两个 128px 遮罩被从"一行高 356px"拉伸成"整个列表高 3145px"，
        而卡片宽只有 358px —— 于是每张卡左右各 128px 被深蓝渐变冲白，
        相当于 2/3 张卡看不清。必须隐藏。

     ② **平台自带**：/about 上有 6 个（3 对）同样的遮罩，但所在的 section
        里**根本没有横向滚动容器**（逐个实测 scrollWidth == clientWidth）。
        它们没有可淡化的对象，纯粹在冲淡区块左右各 128px 的内容
        （证书/专利栅格是 2 列各 134px、横跨 x≈16–300，两列都落在遮罩带里）。
        原始平台源码同样的写法 → 不是本地化引入。

     只在 ≤1023px 隐藏：桌面端首页的跑马灯还在横向滚动，那两个遮罩是有用的，
     不动它（桌面零回归）。
     ------------------------------------------------------------------------ */
  html.mfix div[class~="w-32"][class~="pointer-events-none"][class~="z-10"] {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     八、区块垂直留白：手机端按比例收窄
     ------------------------------------------------------------------------
     实测 main 直接子 section 的 padding-top 分布：80px 占 64%（14/22 个区块），
     48px 占 23%。80px 在 390px 宽的屏上等于「近 1/5 个视口高」的空白，
     是"每屏之间空一大块"的观感来源，也让 /about 这类长页无谓变长。
     这里只收 py-20(80px) 一档到 56px，48px 那档不动。
     （用特异度而非 !important：main > section[class~="py-20"] 是 0,1,2，
       天然高于工具类 .py-20 的 0,1,0，留出后续覆盖的余地。）
     ------------------------------------------------------------------------ */
  html.mfix main > section[class~="py-20"] {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  /* ------------------------------------------------------------------------
     九、首屏：照片带 + 深蓝面板
     ------------------------------------------------------------------------
     【问题】首屏三张背景图是 1600×757 / 1600×800（约 2:1 超宽全景），
     而手机上容器是 390×844（0.46 竖版）。bg-cover 的算法取
       scale = max(390/1600, 844/800) = 1.055
       → 图片被放大到 1688×844，横向只能看到 390/1688 = 23%
     结果：厂房全在画面外，只剩中间一条竖缝 —— 旗杆 + 天空。
     "背景图比例问题很大"就是这一条。

     【为什么不能靠裁图解决】2:1 的图裁成竖版，横竖都只能取中间 39%，
     依然是旗杆加天空，且分辨率不够（原图只有 1600 宽）。
     素材库里也没有可用的竖版厂区照（竖版全是证书 / 产品 / 二维码）。

     【做法】把首屏拆成两段：
       上：60vw 高的照片带 —— 原图 83% 的宽度可见，厂房、影壁、石象都进画面
       下：深蓝面板承载 中国·江苏 / 标题 / 英文副标 / 两个按钮
     为什么正好是 60vw：可见比例 = 390 / (2H)，H 越大裁得越多。
       H=195(50vw) → 100% 可见但只有一条
       H=234(60vw) → 83% 可见   ← 采用
       H=390(100vw) → 50% 可见
     60vw 是"看得见厂房"与"够高不像条幅"的平衡点；因为带高与宽度成比例，
     这个 83% 在 390 / 768 / 1023 三档下都一样。
     ------------------------------------------------------------------------ */
  html.mfix main > section[class~="h-screen"] {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    /* 面板底色。
       2026-09-27 曾改成更深一档的 #0A1F3D（想跟后面的区块分层），
       但 2026-09-28 用户看实际效果后反馈「这个标题下的颜色太深了不太适配」——
       改回**品牌主深色 #153E72**，与紧跟其后的内容区块同色，整块连贯不跳。
       用变量写是为了跟着配色方案走（pal-b 会换成石墨灰）。 */
    background-color: var(--pal-dark, #153E72);
  }

  /* 三张轮播图 → 顶部横幅 */
  html.mfix main > section[class~="h-screen"] > [class~="bg-cover"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 60vw !important;
    /* 轮播的 Ken Burns 缩放是**内联样式**写的，只能用 !important 压掉；
       不压掉的话放大 8% 的图会从带子里溢出来、盖到下面的面板上 */
    transform: none !important;
    background-position: center center !important;
    /* 把照片放回遮罩下面，好让下面那层"底部渐隐"能盖住它、做出照片→面板的过渡。
       motion.css 原本给的是 z-index:1!important（三层统一，为了消除暗闪），
       这里改成 auto 对三层是同样的效果，暗闪不会再出现。 */
    z-index: auto !important;
  }

  /* ★ 照片 → 面板的过渡
     原来这层是「整幅压暗 80% 的深蓝」，用途只是给白字做底；
     现在首屏文字已经挪到下面的面板上，这层压暗就没必要了 —— 改成
     「上 55% 完全透明、下 45% 渐渐变成面板色」，照片的下缘就化进了面板里，
     不再是一条硬邦邦的直线。
     做法上没新增元素，就是把这层已有的遮罩换个用法。 */
  html.mfix main > section[class~="h-screen"] > [class*="bg-gradient-to-b"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: 60vw !important;
    z-index: 2 !important;
    /* ★ 渐隐的终点色**必须与上面面板底色一致**，否则照片下缘会露出一道色差接缝 */
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 55%,
        color-mix(in srgb, var(--pal-dark, #153E72) 45%, transparent) 78%,
        color-mix(in srgb, var(--pal-dark, #153E72) 88%, transparent) 94%,
        var(--pal-dark, #153E72) 100%) !important;
  }

  /* 首屏底部那层 96px 白色渐隐（from-[#FCFDFE]）本来是往白色区块过渡用的，
     但首屏下面就是深蓝 —— 压在照片上就是一块白雾，手机端关掉 */
  html.mfix main > section[class~="h-screen"] > [class~="h-24"] {
    display: none !important;
  }

  /* 文字整体推到照片带下方 */
  html.mfix main > section[class~="h-screen"] > div[class~="z-10"] {
    padding-top: calc(60vw + 30px) !important;
    padding-bottom: 46px !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   十一、公司概况：把静态栅格改成左右循环走马灯（?carousel=1 开启，默认关闭）
   --------------------------------------------------------------------------
   参照「全套资质荣誉」已有的做法：容器是 width:max-content 的 flex 轨道，
   外层 overflow:hidden 当取景框，transform 平移。区别是它用 JS 定时器驱动，
   这里改用 CSS animation —— 更顺、不占主线程，也不会像定时器那样掉帧。

   无缝的关键：JS 把子项**复制了一份**接在后面，所以 translateX(-50%)
   正好是一份的宽度，回头衔接看不出接缝。
   ========================================================================== */
@keyframes mfc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

html.carousel [data-mfc="1"] {
  animation: mfc-marquee linear infinite;
}

/* 鼠标停在上面就暂停 —— 方便看清某一项 */
html.carousel [data-mfc="1"]:hover {
  animation-play-state: paused;
}

/* 端点柔化：用父级的伪元素做左右渐隐，颜色取区块底色 */
html.carousel [data-mfc="1"] { padding-bottom: 2px; }

/* 无障碍：系统开了「减少动态效果」就整条停住、不做循环 */
@media (prefers-reduced-motion: reduce) {
  html.carousel [data-mfc="1"] { animation: none !important; }
}

/* 打印时不要走马灯（否则会打出被裁一半的卡片） */
@media print {
  html.carousel [data-mfc="1"] { animation: none !important; width: auto !important; }
  html.carousel [data-mfc="1"] > [data-mfc-clone="1"] { display: none !important; }
}

/* ==========================================================================
   十二、首页产品中心的展示动画（?anim=focus|expand|float 切换，默认 focus）
   ★ 本段规则**只作用于首页那个产品跑马灯** —— 靠 JS 打的 data-mfm 标记精确定位，
     公司概况「全套资质荣誉」自带的 3 条走马灯不受影响（见段首说明）
   --------------------------------------------------------------------------
   除 marquee 外的三个方案，都要先做同一件事：**把自动滚动停掉、改成静态一排**，
   所以下面这一段是所有非 marquee 方案共用的"底座"。
   注意：这些规则**不在媒体查询里** —— 用户要的是 PC 和手机通用。
   -------------------------------------------------------------------------- */
/* ★ 2026-09-28：这个"底座"现在**只给 expand / float 用** ——
   它俩的设计前提是"一排静态卡片"。focus 已按用户要求改成
   「自动轮播 + 悬停聚焦」，不能停轮播、也不能藏后半段（见下面 focus 那一段）。 */
/* ★★ 2026-09-28 收窄：本段选择器只认 `[data-mfm="1"]`，不再认
   `[class~="flex"][style*="translateX"]`。原因：后者会命中 /about
   「全套资质荣誉」自己的 3 条走马灯（实测 18 / 18 / 5 项），其中 5 项那条是
   可拖拽的手动轮播、**没有复制半份** —— translateX(-50%) 的无缝位移假设对它
   不成立（会露出半屏空白），固定 30s 也配不上它的宽度。
   → 改由 mobile-fix-v1.js 的 markFocusTrack() 按路由精确打标记。 */
html:is(.anim-expand, .anim-float) [data-mfm="1"] {
  /* 内联的 transform / width 只能用 !important 压住 */
  transform: none !important;
  width: auto !important;
  display: flex !important;
  gap: 20px !important;
  justify-content: center;
  padding: 6px 0;
}
/* 列表被复制了一份（16 项 = 8 产品 × 2），静态展示时要把后半段藏起来 */
html:is(.anim-expand, .anim-float) [data-mfm="1"] > :nth-child(n + 9) {
  display: none !important;
}
html:is(.anim-expand, .anim-float) [data-mfm="1"] > * {
  width: auto !important;
  min-width: 0;
}

/* ---------- 方案一 · focus｜自动轮播 + 悬停聚焦 ----------
   2026-09-28 按用户反馈改造。原来的 focus 是"把轮播停掉、改成一排静态卡"，
   结果 8 个产品一屏摆不下（每张 320px × 8 = 2560px，1440 屏只能看到 4 张），
   用户反馈"展示的产品不全"。现在改成：**轮播照常跑，指针进来才聚焦**。

   指针落到某张卡时：① 轮播就地暂停（停住不动，不会跳回起点）
                     ② 那张放大提亮、其余缩小降透明去饱和
   指针移开：恢复轮播。

   ★ 为什么能接管轮播、而且不需要 !important：
     原站点的轮播是 **JS 定时器改内联 transform**（实测 ≈93px/s，
     内联写的是 `transform: translateX(-271.5px); transition: none; width: 5504px`），
     而 CSS 级联顺序里 **「animation 产生的值」高于「内联普通声明」** ——
     所以这里加的 animation 会自动压住 JS 每帧写进来的 translateX。

   ★ 位移为什么取 -50%：轨道是 [8 个产品 × 复制 1 份] = 16 项，
     -50% 正好等于"一份"的宽度，首尾严丝合缝。
     也正因如此，下面**绝不能改卡片宽度** —— 轨道的内联 width 是照着
     原卡宽 320px 算的，改宽度会让 -50% 对不上，接缝处会跳。
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html.anim-focus [data-mfm="1"] {
    animation: mfm-track 30s linear infinite;
  }
  /* 指针进入这一片 → 就地暂停 */
  html.anim-focus [data-mfm="1"]:hover {
    animation-play-state: paused;
  }
}
@keyframes mfm-track {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 聚焦效果本身（不改宽度，理由见上） */
html.anim-focus [data-mfm="1"] > * {
  transition: transform .45s cubic-bezier(.22,.61,.36,1),
              opacity .45s ease, filter .45s ease;
}
html.anim-focus [data-mfm="1"]:hover > * {
  transform: scale(.925);
  opacity: .5;
  filter: saturate(.45) brightness(.94);
}
html.anim-focus [data-mfm="1"] > *:hover {
  transform: scale(1.055) translateY(-4px);
  opacity: 1;
  filter: none;
  z-index: 2;
  position: relative;
}

/* ---------- 方案二 · expand｜横排大图展开 ----------
   默认每张卡都收成窄条（只露图片），指针停在哪张，哪张横向展开成大图、露出文字。
   像画廊里"抽出一幅画"，是整个展厅的节奏都跟着变。纯 CSS。 */
html.anim-expand [data-mfm="1"] > * {
  flex: 1 1 0 !important;
  max-width: 168px;
  transition: flex-grow .55s cubic-bezier(.22,.61,.36,1),
              max-width .55s cubic-bezier(.22,.61,.36,1);
}
html.anim-expand [data-mfm="1"]:hover > * {
  max-width: 116px;
}
html.anim-expand [data-mfm="1"] > *:hover {
  flex-grow: 6 !important;
  max-width: 460px;
}
/* 收窄时把文字区收掉，只留图片；避免 100px 宽里塞中文挤成一团 */
html.anim-expand [data-mfm="1"] > * [class~="p-4"] {
  transition: opacity .3s ease;
}
html.anim-expand [data-mfm="1"]:hover > *:not(:hover) [class~="p-4"] {
  opacity: 0;
}

/* ---------- 方案三 · float｜交错浮起 + 轻 3D 跟随 ----------
   滚动到这一区时卡片依次浮起（错开 70ms）；
   鼠标在这片上移动时，整排像一块板子一样轻微跟着倾斜（±4°）。
   倾角由 JS 写进 --mfc-rx / --mfc-ry 两个变量。 */
html.anim-float [data-mfm="1"] {
  transform: perspective(1200px)
             rotateX(var(--mfc-rx, 0deg))
             rotateY(var(--mfc-ry, 0deg)) !important;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
  transform-style: preserve-3d;
}
html.anim-float [data-mfm="1"] > * {
  flex: 0 0 292px;
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: transform .7s cubic-bezier(.22,.61,.36,1),
              opacity .7s ease,
              box-shadow .4s ease;
  transition-delay: var(--mfc-d, 0ms);
}
html.anim-float [data-mfm="1"].mfc-in > * {
  opacity: 1;
  transform: none;
}
html.anim-float [data-mfm="1"] > *:hover {
  box-shadow: 0 18px 40px -12px rgba(15, 30, 55, .35);
}
@media (prefers-reduced-motion: reduce) {
  html.anim-float [data-mfm="1"] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  html.anim-float [data-mfm="1"] { transform: none !important; }
}

/* 窄屏（≤1023px）三个方案都要收成竖向排布，横排一列放不下 */
@media (max-width: 1023px) {
  html[class*="anim-"] [data-mfm="1"] {
    flex-direction: column;
    gap: 18px !important;
    align-items: stretch;
  }
  html.anim-focus [data-mfm="1"] > *,
  html.anim-float [data-mfm="1"] > * { flex: 0 0 auto !important; }
  /* 触屏没有 hover，聚焦/展开那套在手机上退回普通列表 */
  html.anim-focus [data-mfm="1"]:hover > * {
    transform: none; opacity: 1; filter: none;
  }
  html.anim-expand [data-mfm="1"] > *,
  html.anim-expand [data-mfm="1"]:hover > * { max-width: none !important; flex: 0 0 auto !important; }
  html.anim-expand [data-mfm="1"]:hover > *:not(:hover) [class~="p-4"] { opacity: 1; }
}

/* ==========================================================================
   十三、卡片圆角统一（PC + 手机通用）
   --------------------------------------------------------------------------
   2026-09-28 用户反馈：「企业核心数据」那 6 个白框的直角太硬，要圆润些。
   实测卡片类名 = `text-center p-6 bg-white rounded-md shadow-md hover:shadow-lg ...`，
   而 Tailwind 的 rounded-md 只有 6px —— 在 243×132 的卡上接近直角。

   ★ 只针对**这一类白卡**（同时有 text-center + bg-white + rounded-md + shadow-md），
     不碰按钮 / 标签 / 输入框等其它用 rounded-md 的元素。
     原因：rounded-md 全站用得很广，直接改它是"广谱"操作，会连带影响一堆控件。
     用类名组合精确限定，是这里唯一安全的做法。
   ========================================================================== */
main [class~="text-center"][class~="bg-white"][class~="rounded-md"][class~="shadow-md"] {
  border-radius: 14px !important;
}

/* ==========================================================================
   十五、走马灯里的卡片必须可见（修一个真缺陷）
   --------------------------------------------------------------------------
   motion.js 的「滚动出现」给元素挂 .fx-el + .fx-hide（opacity:0 + 下移 26px），
   靠 IntersectionObserver 进入视口才解除。
   而走马灯的子项是**复制一份接在后面**的，横向排在视口之外 → 永远进不了视口 →
   那半份克隆一直是透明的。

   实测（2026-09-28）：「企业核心实力」12 项里 6 项、3 条轨道共 **17 项**长期不可见；
   把轨道定格到循环后半程，那一整片区域是**空白**。用户报的"断层"很可能就是它。

   修法有两道：JS 在构建轨道时把 fx-hide 清掉（settleReveal），
   这里再兜一道底 —— 万一 motion.js 之后又标记上，也不至于变透明。
   特异度 0,4,1 高于 motion.css 里 `html.fx-motion .fx-el.fx-hide` 的 0,3,1，
   不靠 !important 也能压住；!important 只是为了保险。
   ========================================================================== */
html.carousel [data-mfc] .fx-el.fx-hide,
html.carousel [data-mfc].fx-el.fx-hide {
  opacity: 1 !important;
  transform: none !important;
}

/* 转成横向轮播后没有意义的装饰：
   · 时间轴那条竖向橙色线
   · 每个年份条目左侧的橙色方块圆点（-left-8，横排后会压到前一张卡上）
   用属性标记而不是内联 display:none —— 这样 destroyCarousels 能精确还原。 */
@media (max-width: 1023px) {
  html.carousel [data-mfc-hide="1"] {
    display: none !important;
  }
}

/* ==========================================================================
   十六、公司概况 · 顶部板块导航（手机端）
   --------------------------------------------------------------------------
   容器是 `flex items-center justify-center ... overflow-x-auto`。
   6 个标签合计约 724px，容器只有 358px（390 − 两侧各 16）。
   ★ 关键陷阱：`justify-content: center` + 溢出时，内容会**两端同时溢出**，
     而左侧溢出的那部分**永远滚不到** —— scrollLeft 最小为 0，内容起点却在负坐标。
   实测标签 x = −167 / −45 / 77 / 199 / 321 / 443（容器可视区 16~374）：
   第一个「发展历程」整块在屏幕外、第二个只剩半截。这就是用户说的"显示不全"。

   改回 flex-start 后内容从左边排起，可以完整滑到底。
   顺带：原标签高 36px，低于 44px 触控下限，一并补上（贴合本项目 P0 的触控标准）。
   ========================================================================== */
@media (max-width: 1023px) {
  html.amfix [class~="sticky"][class~="z-40"] [class~="overflow-x-auto"][class~="justify-center"] {
    justify-content: flex-start !important;
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;            /* 手机上不显示横条，但保留滑动能力 */
  }
  html.amfix [class~="sticky"][class~="z-40"] [class~="overflow-x-auto"][class~="justify-center"]::-webkit-scrollbar {
    display: none;
  }
  html.amfix [class~="sticky"][class~="z-40"] [class~="overflow-x-auto"][class~="justify-center"] > * {
    min-height: 44px;
    flex-shrink: 0;                   /* 别被压缩 —— 压窄会让标签里的文字换行 */
  }
}

/* ==========================================================================
   十七、打印时全部还原（避免打印出被裁过的列表）
   ========================================================================== */
@media print {
  html.mfix [class~="flex"][style*="translateX"] > :nth-child(n + 9) {
    display: block !important;
  }
  /* 走马灯的克隆半份与时间轴被隐起来的装饰，打印时都还原 */
  html.carousel [data-mfc] > [data-mfc-clone="1"] { display: none !important; }
  html.carousel [data-mfc-hide="1"] { display: block !important; }
}

/* ==========================================================================
   十八、证书走马灯：手机端改为「原生连续滚动」（2026-10-09 · 二次修订）
   --------------------------------------------------------------------------
   初版是"松手翻页"的跳页式，用户实测反馈：有断点、停下时卡片不居中；
   要求改为**平滑不间断**地滑。
   做法（≤767px）：把溢出容器转成**原生横向滚动条**——
   · 惯性滚动由系统提供：跟手、连续、无断点；
   · track 上 React 的 translateX 与固定宽度被覆盖（transform:none / width:max-content），
     宽度回到"卡片自然总宽"，横向滚动范围才正确；
   · 不用声明 touch-action —— 原生可滚容器会自动做轴向锁定（横划滚它、竖划滚页面）；
   · 箭头按钮与页码圆点整行隐藏（自由滚动没有"页"的概念）；
   · 只在 html.carousel 下生效：?carousel=0 即整层回退原样（桌面 >767px 完全不变）。
   ========================================================================== */
@media (max-width: 767px) {
  html.carousel [data-cs="1"] button[aria-label="上一页"],
  html.carousel [data-cs="1"] button[aria-label="下一页"] {
    display: none !important;
  }
  html.carousel [data-cs="1"] [data-cs-dots="1"] {
    display: none !important;
  }
  html.carousel [data-cs-track="1"] {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* iOS 惯性滚动 */
    scrollbar-width: none;               /* Firefox 隐藏滚动条 */
    overscroll-behavior-x: contain;      /* 到头别带着整页横滑 */
  }
  html.carousel [data-cs-track="1"]::-webkit-scrollbar {
    display: none;
  }
  html.carousel [data-cs-track="1"] > * {
    transform: none !important;          /* 杀掉 React 的 translateX 分页位移 */
    width: max-content !important;       /* 宽度回到卡片自然总宽 */
    transition: none !important;
  }
}