/* ============================================================
   jsjszt-en 头部 / 导航修正层
   ------------------------------------------------------------
   原站头部由 Vue 应用在运行时做三件事，静态站里 JS 不跑，
   于是头部塌陷、Logo 不显示、导航被裁、滚动后不变实底。
   本文件把那部分运行时结果用 CSS 补齐，几何数值取自原站实测：
     .logo_wrap            display:block; zoom:0.75   → 152×54
     .jz_nav_item          min-width:105px
     .banner_pic_group     padding-bottom:41.1981%    → 593px @1440
     .header_content(滚后)  background rgba(255,255,255,.957)
     导航文字(滚后)          rgb(76,79,93) / 当前项 rgb(192,1,14)
   ============================================================ */

/* ---------- 1. Logo：原站用图片 logo，文字版始终隐藏 ---------- */
.logo_wrap {
  display: block !important;
  zoom: .75 !important;          /* 原站 JS 注入的同值缩放，还原 152×54 */
}
.website_title_content { display: none !important; }

/* 默认（透明头压在深色 banner 上）显示白色版 Logo，深色版隐藏 */
.logo_wrap .logo_img:last-child { display: none !important; }

/* ---------- 2. 头部高度变量（原站 JS 写 101px，我们静态写回） ---------- */
#jzRoot { --fixed-header-height: 101px; }

/* ---------- 3. 导航项宽度 ----------
   原站 JS 逐项注入 <style>.jz_nav_item[_colid="N"]{min-width:105px!important}</style>，
   105px = 最宽标签 + 两侧内边距。英文标签最宽更宽，这里取同一值即可让
   6 项正好铺满 730px 导航区（6×105 + 5×20 间隔），与中文站几何完全一致。 */
.jz_nav_item { min-width: 105px !important; }

/* ---------- 4. Banner 比例（原站 .banner_pic_group 的内联值） ---------- */
.banner_pic_group {
  padding-bottom: 41.1981% !important;
  height: 0 !important;
}

/* ---------- 5. 滚动后头部变实底（原站 #gridHeader 类名切到 g_header__fixed） ---------- */
#gridHeader.g_header__fixed .header_content {
  background-color: rgba(255, 255, 255, .957) !important;
}
/* 实底时切换成深色版 Logo（注意：深色版带 .hidden 类，vendor CSS 只把它设成
   opacity:0，光改 display 是不够的，必须同时把 opacity 顶回 1） */
#gridHeader.g_header__fixed .logo_wrap .logo_img:first-child { display: none !important; opacity: 1 !important; }
#gridHeader.g_header__fixed .logo_wrap .logo_img:last-child  { display: block !important; opacity: 1 !important; }

/* ---------- 6. 桌面端导航配色（窄屏交给 responsive.css 的抽屉） ---------- */
@media (min-width: 1025px) {
  /* 透明头（页顶）：当前项纯白，其余 62% 白 —— 与原站 inline 变量一致 */
  #gridHeader .jz_nav_list > li.jz_nav_item .nav_main_name { color: rgba(255, 255, 255, .62); }
  #gridHeader .jz_nav_list > li.jz_nav_item.jz_nav_item_selected .nav_main_name { color: #fff; }

  /* 实底头（已滚动）：深灰 + 当前项品牌红 —— 原站实测值 */
  #gridHeader.g_header__fixed .jz_nav_list > li.jz_nav_item .nav_main_name { color: rgb(76, 79, 93); }
  #gridHeader.g_header__fixed .jz_nav_list > li.jz_nav_item.jz_nav_item_selected .nav_main_name { color: rgb(192, 1, 14); }
}

/* ============================================================
   7. 窄屏 Banner 文案收缩
   ------------------------------------------------------------
   原站 768px 以下走另一套「移动端行」布局（row 有 mobi 版），
   我们这套静态模板只有一份桌面行，48px 大标题 + 18px 段落
   在 390px 宽屏里会一路排到 y≈1150，完全溢出 161px 高的 banner。
   所以窄屏把这三层模块整体缩放，并把 banner 比例调高给文案留位。
   桌面端 (>1024px) 不受本段任何影响。
   ============================================================ */
@media (max-width: 1024px) {
  .banner_pic_group { padding-bottom: 62% !important; }

  .banner_module_zone .jz_module[data-hero] {
    width: 82% !important;
    margin-left: 6vw !important;
  }
  /* 头部是透明压在 banner 上的（PC 端标题本来就在 y≈154，不会打架），
     窄屏得给标题让出 60px 的头高度，否则标题会穿到 Logo / 汉堡中间去 */
  .banner_module_zone .jz_module[data-hero="title"] { margin-top: 17vw !important; }

  /* 标题 / 装饰线 */
  .banner_module_zone .jz_module[data-hero="title"] .fk-editor > div { font-size: 28px !important; }
  /* 段落：行数封顶，避免把下面的按钮顶出画面 */
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor > div {
    font-size: 15px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 段落实际字号写在内层 <span style="font-size:18px"> 上，必须一起覆盖 */
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor div span,
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor div font { font-size: 15px !important; }
  .banner_module_zone .jz_module[data-hero="btn"] { margin-top: 20px !important; }
  .banner_module_zone .jz_module[data-hero="btn"] .module_button_inner { font-size: 14px !important; }
}

@media (max-width: 480px) {
  .banner_pic_group { padding-bottom: 100% !important; }

  .banner_module_zone .jz_module[data-hero] { width: 88% !important; margin-left: 6vw !important; }
  .banner_module_zone .jz_module[data-hero="title"] { margin-top: 19vw !important; }
  .banner_module_zone .jz_module[data-hero="title"] .fk-editor > div { font-size: 20px !important; }
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor > div { font-size: 13px !important; }
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor div span,
  .banner_module_zone .jz_module[data-hero="sub"] .fk-editor div font { font-size: 13px !important; }
  /* 左右箭头缩一号，别在窄屏压住文案 */
  .banner_btn_left_right_2 .pic_arrow_btn { width: 40px; height: 40px; }
}

/* ============================================================
   8. 窄屏头部：必须是一行
   ------------------------------------------------------------
   responsive.css 的 ≤768 段把「所有 .jz_web_row__content」都改成了纵向堆叠，
   头部那一行因此塌成 171px 高（Logo 上、汉堡下），首屏被顶下去一截。
   这里把头部单独拉回单行，并把导航抽屉钉在右侧（否则原站 JS 留下的
   负向定位会把抽屉推到屏幕左边外，看起来像一块空白）。
   ============================================================ */
@media (max-width: 1024px) {
  #gridHeader .jz_web_row__content {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #gridHeader .jz_web_row__content > .jz_web_col {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
  #gridHeader .jz_web_row,
  #gridHeader .jz_web_row__content,
  #gridHeader .header_content,
  #gridHeader .jz_web_rows,
  #gridHeader .jz_web_row_line {
    height: 60px !important;
    min-height: 0 !important;
    overflow: visible;
  }
  /* 导航列撑开剩余宽度，把汉堡推到右侧同行 */
  #gridHeader .jz_web_col1 { flex: 1 1 auto !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; }
  #gridHeader .jz_website_title { flex: 0 0 auto !important; }
  #gridHeader .logo_wrap { zoom: .62 !important; }

  /* 抽屉内文字左对齐（原站 PC 导航是居中，搬到抽屉里会显得散） */
  #gridHeader .jz_nav_content .nav_item_text_wrap,
  #gridHeader .jz_nav_content .nav_main_name,
  #gridHeader .jz_nav_content ul.jz_nav_list { text-align: left !important; }

  /* 抽屉钉死在窗口右侧。
     单纯写 right:0 不够：抽屉的定位父级是只有 46px 宽的 .jz_nav_wrap（汉堡所在列），
     right:0 会以那一列为基准，算出来的 left 是负值 → 抽屉跑到屏幕左外侧。
     改成 fixed 定位即可脱离该列，直接以视口为基准。 */
  #gridHeader .jz_nav_wrap .jz_nav_content,
  #gridHeader .jz_nav .jz_nav_content {
    position: fixed !important;
    left: auto !important;
    right: 0 !important;
    top: 60px !important;
    width: min(320px, 84vw) !important;
    max-height: calc(100vh - 60px) !important;
    transform: none !important;
    margin: 0 !important;
  }
}

/* ============================================================
   9. 页脚文字模块宽度
   ------------------------------------------------------------
   原站给每个文字模块写死了宽度（按中文 3~4 个字算，「应用案例」=66px）。
   换成英文后 "Applications" 在 66px 里放不下，Chrome 的
   overflow-wrap:break-word 会把它折成 "Applicat / ions"。
   这里让「不含图片」的文字模块按内容自适应宽度，不动图标模块。
   ============================================================ */
#gridFooter .jz_module.jz_module_style_6:not(:has(img)) {
  width: auto !important;
  min-width: fit-content !important;
}
#gridFooter .jz_module .fk-editor { overflow-wrap: normal !important; }

/* 页脚「关于我们」那栏的 5 个链接在原站是 5 行（中文 4 字正好被 66px 挤成竖排），
   英文一行放得下就会连成 "About UsCorporate Culture..." 一串。
   让第 2 个及之后的链接各自成行，恢复竖排列表。
   注意用 a + a 而不是 a：页脚其它地方有 3 个 <a> 被 <span> 包着做 hover 动画，
   写成 a 会把那三份叠起来。 */
#gridFooter .simple_text a + a { display: block; }

/* ============================================================
   10. tabpack 面板切换（首页「六大应用领域」/「新闻分类」）
   ------------------------------------------------------------
   原站的 tabpack 是「inline-flex 横向排列 + translateX 滑动窗口」：
   运行时只存在一个面板，点 tab 时 Vue 会新建/替换面板节点。
   静态克隆没有这个运行时，所以 build_pages.py 已把全部面板预先写进
   DOM（html_tabdump/panels_en），这里负责让非激活面板不可见。

   用绝对定位把非激活面板移出视图（它仍保留自己的 inline-flex 布局），
   激活面板回到常规流里，由它撑开容器高度 —— 这样容器高度始终等于
   当前面板高度，不会出现 6 个面板叠加把区域撑爆的问题。
   ============================================================ */
.m_tabpack_wrap .m_tabpack_content > .m_tabpack_tabarea {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease;
}
.m_tabpack_wrap .m_tabpack_content > .m_tabpack_tabarea.m_tabpack-active {
  position: relative !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* tab 上的小三角指示器：只有激活的显示（559 组） */
.m_tabpack_wrap .m_tabpack_tab .m_tabpack_triangle { visibility: hidden; }
.m_tabpack_wrap .m_tabpack_tab.m_tabpack_tab-active .m_tabpack_triangle { visibility: visible; }

/* 1048 组：激活 tab 的顶边线透明、字号略大（原站是内联在 style 里，
   切换时由 JS 套用模板还原，这里补一层 CSS 兜底，避免首帧闪动） */
.m_tabpack_wrap[projectid="1048"] .m_tabpack_tab {
  border-top-color: rgba(255, 255, 255, .67) !important;
}
.m_tabpack_wrap[projectid="1048"] .m_tabpack_tab.m_tabpack_tab-active {
  border-top-color: rgba(255, 255, 255, 0) !important;
}

/* 559 组：非激活 tab 是描边胶囊，激活 tab 是实心主题色 */
.m_tabpack_wrap[projectid="559"] .m_tabpack_tab {
  background: none !important;
  border: 1px solid rgba(204, 204, 204, 1) !important;
}
.m_tabpack_wrap[projectid="559"] .m_tabpack_tab.m_tabpack_tab-active {
  background: rgb(154, 24, 39) !important;
  border-color: rgb(154, 24, 39) !important;
}
.m_tabpack_wrap[projectid="559"] .m_tabpack_tab .m_tabpack_tabname { color: rgb(102, 102, 102) !important; font-weight: normal !important; }
.m_tabpack_wrap[projectid="559"] .m_tabpack_tab.m_tabpack_tab-active .m_tabpack_tabname { color: rgb(255, 255, 255) !important; font-weight: bold !important; }

/* 面板里的 CTA 按钮（jz_module_style_8 外层有了 min-width:fit-content，
   但英文 "Learn More" 比中文 "了解详情" 长，给内层留出内边距避免贴边） */
.m_tabpack_wrap .module_button_content .module_button_inner { padding: 0 4px; }

/* ============================================================
   11. 分类筛选条「当前项」高亮
   ------------------------------------------------------------
   products / solutions / news 三页的分类导航在原站都只是重复链接，
   现在接上了 ?cat= 参数（见 build_pages.py 的 number_cate_links），
   由 responsive.js 按 URL 给对应链接加 .cate-active。
   ============================================================ */
.cate_group_item.cate-active,
.cate_group_item.cate-active:hover {
  font-weight: bold !important;
}
/* 富文本生成的筛选条（solutions / news）链接没有 class，
   只能按 #jzWebContainer 范围统一上色 */
#jzWebContainer a.cate-active,
#jzWebContainer a.cate-active:hover,
#jzWebContainer .simple_text > div a.cate-active,
#jzWebContainer .simple_text a.cate-active {
  font-weight: bold !important;
  color: rgb(150, 14, 28) !important;
}

/* 1048 组的 tab 栏：原站每个 tab 的内联 width:479px 是运行时按「6 个铺满
   1436px 容器」算出来的（239px 左右），静态克隆拿到的是未重算的值，
   6×479 = 2874 会把最后一项挤出容器。这里改回 flex 均分。 */
.m_tabpack_wrap[projectid="1048"] .m_tabpack_tablist {
  display: flex !important;
  width: 100% !important;
}
.m_tabpack_wrap[projectid="1048"] .m_tabpack_tab {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden;
}
.m_tabpack_wrap[projectid="1048"] .m_tabpack_tab .m_tabpack_tabname {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ============================================================
   12. 页内锚点（原站 jumpToAnchor 的替代）
   ------------------------------------------------------------
   页脚 / 关于我们页的 5 个锚点链接原本是 javascript:JZ.jumpToAnchor(...)，
   静态站没有 JZ 运行时，点了毫无反应。build_pages.py 已把它们改写成
   /about.php#row471 这样的真实锚点，这里补两件事：
   平滑滚动 + 让锚点落点避开顶部固定头（header 是 101px）。
   ============================================================ */
html { scroll-behavior: smooth; }
#row471, #row472, #row473, #row474, #row475, #row476, #row477,
#row478, #row479, #row480, #row481, #row482, #row483, #row484,
#row485, #row486, #row487, #row488, #row489, #row490, #row491,
#row492, #row493, #row494 {
  scroll-margin-top: 110px;
}

/* ============================================================
   13. 二维码悬浮层（替代原站 Site.hoverQrCode）
   ============================================================ */
.js_qr_layer {
  position: fixed;
  z-index: 99999;
  padding: 10px 10px 6px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.js_qr_layer img { display: block; width: 168px; height: 168px; object-fit: contain; }
.js_qr_layer span { display: block; margin-top: 6px; text-align: center; font-size: 13px; color: #333; }

/* ============================================================
   14. 页脚 WhatsApp 二维码（窄屏可用性）
   ------------------------------------------------------------
   该 rich 模块（#module1140）在原站是「悬停弹二维码」的 4 个社交图标，
   内联宽度写死为视口宽度的 16.98%。窄屏下只剩 66px，
   里面的 flex 容器再被 rich_img_wrap 挤到 18px，
   二维码缩成 18px、caption 逐字换行，完全没法扫。
   移动态下把模块撑到可用宽度，并把二维码钉死在 132px。
   桌面端（≥769px）不受任何影响。
   ============================================================ */
@media (max-width: 768px) {
  #module1140 {
    width: auto !important;
    min-width: 160px;
  }
  #module1140 .rich_img_wrap { display: none; }
  #module1140 .rich_article_content_wrap,
  #module1140 .rich_article_wrap,
  #module1140 .rich_article_wrap_html,
  #module1140 .ue-table-wrapper { width: auto !important; min-width: 0; }
  #module1140 p { width: auto !important; }
  #module1140 img[src*="whatsapp_qr"] {
    width: 132px !important;
    height: 132px !important;
    max-width: none;
  }
  #module1140 span {
    width: 150px !important;
    white-space: normal;
  }
}

/* ============================================================
   15. 联系页第一屏 WhatsApp 二维码
   ------------------------------------------------------------
   这个位置（#module643）原来是抖音号 / 公众号 / 小红书三个二维码拼成的
   一张 783×294 长图（中文说明），英文站已换成单个 WhatsApp 二维码。
   模块沿用原定位（width 29.06vw / margin-left 10.99vw），与左侧
   Email / Address 文字列对齐，二维码左对齐、白底圆角、下方一行说明。
   ============================================================ */
.contact_qr_box { display: block; }
.contact_qr_img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: auto;
  box-sizing: border-box;
  padding: 8px;
  background: #fff;
  border-radius: 12px;
}
/* 该模块样式（jz_module_style_7）默认 text-align:center，
   说明文字会飘到模块中线上、脱离二维码，这里按二维码左边缘对齐 */
.contact_qr_caption {
  margin: 10px 0 0;
  text-align: left;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .78);
  white-space: normal;
}

/* 窄屏：联系页 hero 行高写死在 ~390px（行内容本身已占满，
   二维码放进去会溢出并压到下面的表单板块上）。
   手机端本来也没法扫自己屏幕上的二维码，页脚又已经有一张常驻的，
   所以这里直接收起，避免压版。
   （若以后要放开，需要先把 #row106 的窄屏行高与内部模块宽度一起重做） */
@media (max-width: 768px) {
  #module643 { display: none !important; }
}