/* ============================================================
   即刻智能 · 国内主流内核（含移动端）兼容样式
   ⚠ 本文件由 .workbuddy/build-compat-css.js 自动生成，请勿手改。
   重新生成：node .workbuddy/build-compat-css.js

   全部规则都限定在 .jk-noflexgap / .jk-has-vh 之下，
   这两个类由 assets/jk-compat.js 做特性检测后按需添加，
   现代浏览器永远不会命中 → 本文件对它们零影响。
   ============================================================ */

/* ---------- 1. flex gap 兜底 · Tailwind 工具类（24 条） ---------- */
.jk-noflexgap .gap-0\.5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.125rem}
.jk-noflexgap .gap-0\.5.flex-col > * + *, .jk-noflexgap .gap-0\.5.flex-col-reverse > * + *{margin-top:.125rem}
.jk-noflexgap .gap-1:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.25rem}
.jk-noflexgap .gap-1.flex-col > * + *, .jk-noflexgap .gap-1.flex-col-reverse > * + *{margin-top:.25rem}
.jk-noflexgap .gap-1\.5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.375rem}
.jk-noflexgap .gap-1\.5.flex-col > * + *, .jk-noflexgap .gap-1\.5.flex-col-reverse > * + *{margin-top:.375rem}
.jk-noflexgap .gap-2:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.5rem}
.jk-noflexgap .gap-2.flex-col > * + *, .jk-noflexgap .gap-2.flex-col-reverse > * + *{margin-top:.5rem}
.jk-noflexgap .gap-2\.5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.625rem}
.jk-noflexgap .gap-2\.5.flex-col > * + *, .jk-noflexgap .gap-2\.5.flex-col-reverse > * + *{margin-top:.625rem}
.jk-noflexgap .gap-3:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.75rem}
.jk-noflexgap .gap-3.flex-col > * + *, .jk-noflexgap .gap-3.flex-col-reverse > * + *{margin-top:.75rem}
.jk-noflexgap .gap-4:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1rem}
.jk-noflexgap .gap-4.flex-col > * + *, .jk-noflexgap .gap-4.flex-col-reverse > * + *{margin-top:1rem}
.jk-noflexgap .gap-5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.25rem}
.jk-noflexgap .gap-5.flex-col > * + *, .jk-noflexgap .gap-5.flex-col-reverse > * + *{margin-top:1.25rem}
.jk-noflexgap .gap-6:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.5rem}
.jk-noflexgap .gap-6.flex-col > * + *, .jk-noflexgap .gap-6.flex-col-reverse > * + *{margin-top:1.5rem}
.jk-noflexgap .gap-7:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.75rem}
.jk-noflexgap .gap-7.flex-col > * + *, .jk-noflexgap .gap-7.flex-col-reverse > * + *{margin-top:1.75rem}
.jk-noflexgap .gap-8:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:2rem}
.jk-noflexgap .gap-8.flex-col > * + *, .jk-noflexgap .gap-8.flex-col-reverse > * + *{margin-top:2rem}
@media(min-width:640px){
.jk-noflexgap .sm\:gap-2\.5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.625rem}
.jk-noflexgap .sm\:gap-2\.5.flex-col > * + *, .jk-noflexgap .sm\:gap-2\.5.flex-col-reverse > * + *{margin-top:.625rem}
.jk-noflexgap .sm\:gap-3:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.75rem}
.jk-noflexgap .sm\:gap-3.flex-col > * + *, .jk-noflexgap .sm\:gap-3.flex-col-reverse > * + *{margin-top:.75rem}
.jk-noflexgap .sm\:gap-4:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1rem}
.jk-noflexgap .sm\:gap-4.flex-col > * + *, .jk-noflexgap .sm\:gap-4.flex-col-reverse > * + *{margin-top:1rem}
.jk-noflexgap .sm\:gap-6:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.5rem}
.jk-noflexgap .sm\:gap-6.flex-col > * + *, .jk-noflexgap .sm\:gap-6.flex-col-reverse > * + *{margin-top:1.5rem}
}
@media(min-width:768px){
.jk-noflexgap .md\:gap-1\.5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.375rem}
.jk-noflexgap .md\:gap-1\.5.flex-col > * + *, .jk-noflexgap .md\:gap-1\.5.flex-col-reverse > * + *{margin-top:.375rem}
}
@media(min-width:1024px){
.jk-noflexgap .lg\:gap-10:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:2.5rem}
.jk-noflexgap .lg\:gap-10.flex-col > * + *, .jk-noflexgap .lg\:gap-10.flex-col-reverse > * + *{margin-top:2.5rem}
.jk-noflexgap .lg\:gap-16:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:4rem}
.jk-noflexgap .lg\:gap-16.flex-col > * + *, .jk-noflexgap .lg\:gap-16.flex-col-reverse > * + *{margin-top:4rem}
.jk-noflexgap .lg\:gap-3:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:.75rem}
.jk-noflexgap .lg\:gap-3.flex-col > * + *, .jk-noflexgap .lg\:gap-3.flex-col-reverse > * + *{margin-top:.75rem}
.jk-noflexgap .lg\:gap-4:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1rem}
.jk-noflexgap .lg\:gap-4.flex-col > * + *, .jk-noflexgap .lg\:gap-4.flex-col-reverse > * + *{margin-top:1rem}
.jk-noflexgap .lg\:gap-5:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.25rem}
.jk-noflexgap .lg\:gap-5.flex-col > * + *, .jk-noflexgap .lg\:gap-5.flex-col-reverse > * + *{margin-top:1.25rem}
.jk-noflexgap .lg\:gap-6:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.5rem}
.jk-noflexgap .lg\:gap-6.flex-col > * + *, .jk-noflexgap .lg\:gap-6.flex-col-reverse > * + *{margin-top:1.5rem}
.jk-noflexgap .lg\:gap-7:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:1.75rem}
.jk-noflexgap .lg\:gap-7.flex-col > * + *, .jk-noflexgap .lg\:gap-7.flex-col-reverse > * + *{margin-top:1.75rem}
.jk-noflexgap .lg\:gap-8:not(.grid):not(.inline-grid):not(.flex-col):not(.flex-col-reverse) > * + *{margin-left:2rem}
.jk-noflexgap .lg\:gap-8.flex-col > * + *, .jk-noflexgap .lg\:gap-8.flex-col-reverse > * + *{margin-top:2rem}
}

/* ---------- 1b. grid 降级 · Chromium < 57（24 条） ----------
   这些内核对 display:grid 整条声明失效，元素回落为 block、子元素纵排，
   但 gap 同时失效 → 卡片贴死。@supports not (display:grid) 在现代内核
   上直接跳过整块，保证零影响。
   （不能用 @supports 判 flex gap：内核从 57 起就「认识」gap 属性，
     只是不作用于 flex，@supports (gap:1px) 恒为真，只能靠 JS 实测。）
   ------------------------------------------------------------ */
@supports not (display: grid){
  .gap-0\.5.grid > * + *, .gap-0\.5.inline-grid > * + *{margin-top:.125rem}
  .gap-1.grid > * + *, .gap-1.inline-grid > * + *{margin-top:.25rem}
  .gap-1\.5.grid > * + *, .gap-1\.5.inline-grid > * + *{margin-top:.375rem}
  .gap-2.grid > * + *, .gap-2.inline-grid > * + *{margin-top:.5rem}
  .gap-2\.5.grid > * + *, .gap-2\.5.inline-grid > * + *{margin-top:.625rem}
  .gap-3.grid > * + *, .gap-3.inline-grid > * + *{margin-top:.75rem}
  .gap-4.grid > * + *, .gap-4.inline-grid > * + *{margin-top:1rem}
  .gap-5.grid > * + *, .gap-5.inline-grid > * + *{margin-top:1.25rem}
  .gap-6.grid > * + *, .gap-6.inline-grid > * + *{margin-top:1.5rem}
  .gap-7.grid > * + *, .gap-7.inline-grid > * + *{margin-top:1.75rem}
  .gap-8.grid > * + *, .gap-8.inline-grid > * + *{margin-top:2rem}
  @media(min-width:640px){
    .sm\:gap-2\.5.grid > * + *, .sm\:gap-2\.5.inline-grid > * + *{margin-top:.625rem}
    .sm\:gap-3.grid > * + *, .sm\:gap-3.inline-grid > * + *{margin-top:.75rem}
    .sm\:gap-4.grid > * + *, .sm\:gap-4.inline-grid > * + *{margin-top:1rem}
    .sm\:gap-6.grid > * + *, .sm\:gap-6.inline-grid > * + *{margin-top:1.5rem}
  }
  @media(min-width:768px){
    .md\:gap-1\.5.grid > * + *, .md\:gap-1\.5.inline-grid > * + *{margin-top:.375rem}
  }
  @media(min-width:1024px){
    .lg\:gap-10.grid > * + *, .lg\:gap-10.inline-grid > * + *{margin-top:2.5rem}
    .lg\:gap-16.grid > * + *, .lg\:gap-16.inline-grid > * + *{margin-top:4rem}
    .lg\:gap-3.grid > * + *, .lg\:gap-3.inline-grid > * + *{margin-top:.75rem}
    .lg\:gap-4.grid > * + *, .lg\:gap-4.inline-grid > * + *{margin-top:1rem}
    .lg\:gap-5.grid > * + *, .lg\:gap-5.inline-grid > * + *{margin-top:1.25rem}
    .lg\:gap-6.grid > * + *, .lg\:gap-6.inline-grid > * + *{margin-top:1.5rem}
    .lg\:gap-7.grid > * + *, .lg\:gap-7.inline-grid > * + *{margin-top:1.75rem}
    .lg\:gap-8.grid > * + *, .lg\:gap-8.inline-grid > * + *{margin-top:2rem}
  }
}

/* ---------- 2. flex gap 兜底 · 产品页/案例页手写样式（23 条） ---------- */
/* 产品页（products/product.css） */
.jk-noflexgap .jk-logo > * + *{margin-left:12px}
.jk-noflexgap .jk-menu > * + *{margin-left:32px}
.jk-noflexgap .jk-right > * + *{margin-left:12px}
.jk-noflexgap .jk-cta > * + *{margin-left:8px}
.jk-noflexgap .jk-burger > * + *{margin-top:6px}
.jk-noflexgap .jk-mobile-in > * + *{margin-top:12px}
.jk-noflexgap .crumb > * + *{margin-left:8px}
.jk-noflexgap .ph-actions > * + *{margin-left:14px}
.jk-noflexgap .btn > * + *{margin-left:8px}
.jk-noflexgap .vals > * + *{margin-left:24px}
.jk-noflexgap .faq summary > * + *{margin-left:12px}
@media (max-width: 560px){
.jk-noflexgap .path-step > * + *{margin-left:18px}
}

/* 案例页（cases/case.css） */
.jk-noflexgap .jk-logo > * + *{margin-left:12px}
.jk-noflexgap .jk-menu > * + *{margin-left:32px}
.jk-noflexgap .jk-right > * + *{margin-left:12px}
.jk-noflexgap .jk-cta > * + *{margin-left:8px}
.jk-noflexgap .jk-burger > * + *{margin-top:6px}
.jk-noflexgap .jk-mobile-in > * + *{margin-top:12px}
.jk-noflexgap .crumb > * + *{margin-left:8px}
.jk-noflexgap .cs-meta > * + *{margin-left:10px}
.jk-noflexgap .cs-links > * + *{margin-left:10px}
.jk-noflexgap .ci-body > * + *{margin-top:10px}
.jk-noflexgap .ci-meta > * + *{margin-left:8px}

/* ---------- 2b. 老内核静默丢弃的声明 ---------- */
/* ------------------------------------------------------------
   4.1  inset 简写（Chrome 87+）
   Tailwind 的 .inset-0 编译成 inset:0，<87 整条丢弃 →
   absolute/fixed 元素失去偏移量，回落到 static 位置。
   受影响：加载遮罩 .fixed.inset-0（不再铺满视口）、
          Hero 视频上的渐变/扫描线覆盖层（尺寸塌成 0）。
   注：.inset-x-0 / .inset-y-0 编译成 left/right、top/bottom，不受影响。
   ------------------------------------------------------------ */
@supports not (inset: 0){
  .inset-0{top:0;right:0;bottom:0;left:0}
}

/* ------------------------------------------------------------
   4.2  clamp()（Chrome 79+）
   首页 Hero 的 padding 是 React 内联的
     clamp(100px, 15vh, 140px) 5vw 80px
   <79 整条 padding 失效 → padding 归零。移动端 Hero 里视频是 order-1
   （排在文字前面），于是视频直接顶到 y=0，被 72px 的固定导航压住 ——
   这正是「手机上百度的视频排版不对」的直接原因（实测 top: 0）。
   内联样式权重最高，正常内核下本规则会被内联值盖过，不会打架。
   ------------------------------------------------------------ */
@supports not (padding: clamp(1px, 1px, 1px)){
  #root section.min-h-screen{padding:110px 5vw 80px}
}

/* ------------------------------------------------------------
   4.3  aspect-ratio（Chrome 88+）
   .hero-video 容器【没有任何高度类】，高度完全由内联的
   aspect-ratio:16/10 提供。<88 丢弃后容器高度塌成 auto，
   视频退回自身比例（实测 219px → 198px，且宽度约束一并失效）。
   这里用 padding-top 撑出 16:10，再把视频绝对定位填满。
   ------------------------------------------------------------ */
@supports not (aspect-ratio: 16 / 10){
  .hero-video::before{content:'';display:block;padding-top:62.5%}
  .hero-video > video{position:absolute;top:0;left:0;right:0;bottom:0}
}

/* ------------------------------------------------------------
   4.4  视频层级防抢占（百度 T7 内核 / 腾讯 X5 内核）—— 辅助手段
   症状：视频「悬浮在页面中间、处于最前面一层」，脱离卡片位置遮挡整页。
   机理：安卓国产内核用宿主自己的原生播放器接管 <video>，那是 WebView
        之外的独立 view，层级最高，无视页面的 position / z-index /
        overflow —— 纯 CSS 无法约束它。

   因此主修复不在这里，而在两处：
     · index.html  VIDEO_CFG 全部改为同域视频地址
       （百度浏览器检测到跨域视频源会直接强制全屏置顶）
     · jk-compat.js 抢在视频播放前写入
       t7-video-player-type="inline" / x5-video-player-type="h5-page"
       / x5-video-player-fullscreen="false"

   本规则只做补充：给视频容器建立独立层叠上下文，把视频渲染限制在
   容器内部。仅作用于自有容器类名，不改全站 video —— 否则会给
   背景视频的渐变遮罩层带来叠放顺序回归。
   ------------------------------------------------------------ */
.hero-video{isolation:isolate}

/* ============================================================
   百度系内核的 canvas 视频层（2026-09-14 新增）
   ------------------------------------------------------------
   背景：百度 T7 内核对「正在播放的 <video>」会用宿主原生播放器接管，
   层级最高、CSS 拦不住。故对百度系改为：原 <video> 摘源并 display:none
   （内核无可接管），画面由 <canvas> 绘制，帧源是一个从不插入文档的
   <video>（内核没有它的渲染面）。

   下面这条规则让 canvas 铺满父容器。三个使用点的父容器都是有定位的
   确定尺寸盒子（.hero-video / div.absolute.inset-0），且原 <video>
   是 w-full h-full 填充 —— 因此绝对定位的 canvas 与之完全等价。
   用绝对定位还有一个好处：老内核上没有 aspect-ratio 时，.hero-video
   靠 padding-top 撑高度（原 video 由 `.hero-video > video` 规则绝对定位），
   绝对定位的 canvas 同样能正确铺满，无需再加针对 canvas 的补丁。
   ============================================================ */
canvas.jk-cvideo{
  position:absolute;top:0;left:0;right:0;bottom:0;
  width:100%;height:100%;display:block;pointer-events:none;
}

/* ---------- 3. 其它兼容规则 ---------- */
/* ------------------------------------------------------------
   移动端 100vh 修正
   手机上 100vh 大于可视高度（含地址栏），区块底部会被顶出屏幕。
   jk-compat.js 写入 --jk-vh 后才挂 .jk-has-vh，JS 未执行时
   下面的 calc 不会生效，min-height 回落到上一行的 100vh。

   仅限 ≤1024px：桌面端 100vh 本来就是可视高度，不必参与，
   也避免窗口缩放时 --jk-vh 短暂过期带来跳动。
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  .jk-has-vh .min-h-screen{min-height:100vh;min-height:calc(var(--jk-vh) * 100)}
  .jk-has-vh .h-screen{height:100vh;height:calc(var(--jk-vh) * 100)}
  /* iOS 上让滚动更顺滑 */
  .jk-has-vh body{-webkit-overflow-scrolling:touch}
}