/* ==========================================================================
   custom.css —— 本站补丁样式（加载在所有框架层与 demo 皮肤之后）
   --------------------------------------------------------------------------
   只放「框架层缺失或错误」的必要修正，不改动 demo 皮肤文件本身。
   每条规则都要写清：问题现象 → 实测数据 → 为什么这样修。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 首屏高度跟随真实视口
   --------------------------------------------------------------------------
   问题：/css/responsive.css 用两条 !important 把首屏写死成固定像素
         .md-h-600px  ->  height:600px  !important   （768–991 生效）
         .sm-h-650px  ->  height:650px  !important   （≤767   生效）
        而本页 hero 的 margin-top 已经让出了页头高度（移动端 81px、平板/桌面 126px），
        于是「页头 + hero」永远不等于一屏。

   实测（修复前，CDP 钉视口）：
         375x667  → heroTop 81  + heroH 650 = 731，超出视口 64px，
                    "Get a Quote"/"Tour our factory" 被推出首屏（截图确认按钮被切）
         414x896  → heroBottom 731，反而比视口短 165px
         768x1024 → heroBottom 726，比视口短 298px
         991x768  → heroBottom 726，比视口短 42px

   修正：高度 = 视口高 − 页头高，让「页头 + hero」精确等于一屏。
         · 用 svh 而不是 vh：移动浏览器地址栏收起/展开时 vh 恒为最大值，
           会导致首屏在滚动瞬间"跳"一下；svh 取最小视口高，更稳定。
         · 先写 vh 再写 svh：不支持 svh 的老浏览器拿 vh 版本，不会比原来更差。
         · 不写 height:auto —— hero 内部是
           .swiper.h-100 > .container.h-100 > .row.h-100 的百分比高度链，
           父级一旦 auto，整条链会塌成 0 高度。

   实测（修复后）：375x667 / 414x896 / 768x1024 / 991x768 / 320x568 / 360x640
         全部 heroBottom == 视口高，横向溢出 0，CTA 完整落在首屏内。
         内容自然高度（CDP 实测）：375 宽需 583px、可用 586px，居中后 CTA 底边
         在 665.5px，恰好进屏。

   优先级说明：框架用单类名 + !important，这里用「元素 + 3 个类」+ !important，
         特异性必然更高，无需依赖加载顺序。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  section.full-screen.top-space-margin {
    height: calc(100vh - 81px) !important;
    height: calc(100svh - 81px) !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  section.full-screen.top-space-margin {
    height: calc(100vh - 126px) !important;
    height: calc(100svh - 126px) !important;
  }
}

/* --------------------------------------------------------------------------
   2) 超矮屏兜底：保证首屏内容不被裁掉
   --------------------------------------------------------------------------
   承上。下列是「视口高 − 页头高」之后，内容余量（CDP 实测 slack，
   负数代表最后一行 CTA 被 hero 底边裁掉）：
         414x896  → 余 150px   OK
         375x667  → 余  35px   OK
         360x640  → 余   7px   OK
         320x568  → 余 −89px   被裁 ← 需要兜底

   320x568 属老设备，无论怎么设高度都装不下（内容自然需 576px，可用仅 487px）。
   取舍：宁可让首屏比视口高、用户滚一下，也不要让「Get a Quote」被永久裁掉。
   故仅在视口高 ≤600px 时给一个 600px 下限；主流机型（≥640 高）不触发，
   依然保持「页头 + 首屏」精确一屏。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) and (max-height: 600px) {
  section.full-screen.top-space-margin {
    min-height: 600px !important;
  }
}
