/* ==========================================================================
   common/nav3.css — 三级导航下拉（左侧二级竖排 + 右侧三级卡片）
   --------------------------------------------------------------------------
   只负责「一级 → 二级 → 三级」这一种下拉形态；二级平铺仍然走 nav.css 原来那套。
   载入位置：public/header.html 的 <head> 之后（见该文件里 nav3.css 那行 link）

   结构（照参考图）：
     左栏  #f6f8fa 底 — 一级标题 + 二级竖排列表
                        当前项：品牌蓝字 + 2px 下划线（只压在文字宽度上）+ 可带角标
     右栏  白底       — 顶部「搜索框 + 推荐词条（紧贴搜索框左对齐排开）+ 关闭按钮」
                        下方三级卡片栅格：图标 + 名称 + 角标 + 两行描述
     面板  全宽铺满，左栏底色一直延伸到视口左边，右栏白底延伸到视口右边

   ★ 尺寸基准（2026-10-18 放大一档）：
     参考图里标题 ≈ 二级项的 2 倍字号，卡片也比原版宽松。
     原来 26/13 + 240px 卡片显得小气，这里统一按「标题30 / 二级15 / 卡片300」
     放大，行距同步拉开，字号比例关系保持不变。

   ★ 为什么不复用 nav.css 的 .page_services（www 原版三级结构）：
     那套左栏是 42px 行高、下划线落在行框底部（离文字将近 10px），
     右侧卡片只有标题 + 描述，没有图标位，也没有顶部工具条。
     要改的地方比另写一份还多，而且以后升级 nav.css 会互相打架。
     所以这里另起 .nav3__* 命名空间，两边互不影响。

   ★ 左右两侧「铺到视口边缘」靠的是 nav.css 里
     .Submenu-container::before / ::after（z-index:-1，画在容器盒子外侧），
     所以外层必须保留 .Submenu-container 这个类，不能只写 .nav3。
   ========================================================================== */

.nav3 {
  display: flex;
  align-items: stretch;
  /* ★ 2026-10-19 从 560 改成 200。
     原来写死 560 是为了「内容少时也撑出参考图那种高度」，副作用是：
     只要栏目配了三级，面板就比纯二级的高出一大截（200 → 560），
     点开「解决方案」这种只有一张卡的栏目，下面三分之二全是空白。
     现在高度交给内容：默认 280 兜底（二级继承同一个值），
     条目多了自然往下长 —— 用户要的是「加内容才变高」，不是「有三级就变高」。
     ★ 2026-10-19 两次上调：200 → 240 → 280。200 贴着上下沿太局促，
       240 还是显得短，280 之后内容与面板上下沿之间留白接近参考图。 */
  min-height: 280px;
  background: var(--navright_color, #fff);
}

/* 左栏原有的底色是 nav.css 用 .Submenu-container::before 铺到视口左边的。
   现在灰底只包二级菜单（见 .nav3__tabs），左栏外侧要跟右侧一样白，
   否则视口左边会留一条突兀的灰带。 */
.nav3::before {
  /* 容器左侧到视口边缘这一段（nav.css 的 .Submenu-container::before 铺的）：
     用比左栏灰块(#f6f8fa)再浅一档的灰，让「左侧留白」也有底色，和右栏纯白区分开。
     ★ 这里必须给不透明色：底层是页面自身的浅蓝白（实测叠 2% 黑后反而比左栏更深），
       写半透明会得到「左侧比右侧还深」的反效果。 */
  background-color: #fafbfc;
}

/* ---------- 左栏：一级标题 + 二级列表 ---------- */
/* 整个左栏就是「一块灰」：标题和菜单共用同一个背景（参考图里标题是压在灰底上的）。
   灰块从容器最左边一直铺到 292px，不再分「浅灰列 / 白分隔 / 灰块」三层，
   所以只剩两层背景：斜切渐变（上层）+ 灰块底色（下层）。
   宽度 292 = 原来 340 - 左内距 48：整块左移 48，宽度不拉伸，右栏起点也随之左移。 */
.nav3__side {
  /* 内容块左内距（标题 / 介绍 / 二级列表共用一条竖线）。
     抽成变量是因为三个响应式分支（1440 / 1200）都要跟着收，
     分散写 9 处 padding 迟早有一条忘改、文字就错位 4px。 */
  --nav3-pad: 36px;
  display: flex;
  flex-direction: column;
  flex: 0 0 292px;
  max-width: 292px;
  padding: 0;
  background-image:
    linear-gradient(
      146deg,
      rgba(255, 255, 255, 0) 0 70%,
      rgba(255, 255, 255, 0.42) 73.4%,
      rgba(255, 255, 255, 0.9) 74.2% 74.55%,
      rgba(22, 24, 26, 0.055) 74.75% 100%
    ),
    linear-gradient(var(--navleft_color, #f6f8fa), var(--navleft_color, #f6f8fa));
  background-origin: border-box, border-box;
  background-clip: border-box, border-box;
  background-repeat: no-repeat, no-repeat;
  overflow-y: auto;
}

.nav3__title {
  /* 内容块靠左：左内距 36（原来是「居中」的 72）。
     参考图里标题/说明/菜单离灰块左边缘约 36~40，而 72 会让整块看着「缩在中间」。
     2026-10-18 按用户标注改：整块左移 36px，标题、介绍、二级列表共用同一条竖线。
     右侧给 40 只为防后台配超长名称时贴边，不参与对齐。 */
  margin: 0;
  padding: 28px 40px 22px var(--nav3-pad, 36px);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tc-ink, #16181a);
}

/* 一级介绍：标题下面那句说明（后台「一级介绍」填了才输出）。
   ------------------------------------------------------------
   ★ 左边内距必须和 .nav3__title 一致（36），否则文字和标题不在同一条
     竖线上，看着像两个不相干的块。
   ★ 右边留 48：行宽 = 292-36-48 = 208。参考图那句「特殊需求定制，适配千万
     行业应用场景」是在「应用」后面断行（第一行 15 字 / 第二行 2 字）。
     13.5px 下 15 字 ≈ 202、16 字 ≈ 216，所以行宽必须落在 202~215 之间，
     208 正好；行宽再宽一点就会变成「…应用场 / 景」，末行只剩一个字。
   ★ 负的 margin-top 用来吃掉标题的 padding-bottom（22）：
     标题和介绍是一组，间距只留 10px；不这么写的话两者会被 22px 拉开，
     读起来像两段并列的内容。
   ★ 不给固定高度、也不做 line-clamp：后台写的字多就多占一行，
     左栏是 flex 列，撑高由内容决定，写死行数反而会截字。 */
.nav3__intro {
  margin: -12px 0 18px;
  padding: 0 48px 0 var(--nav3-pad, 36px);
  font-size: 13.5px;
  line-height: 22px;
  color: #6b7280;
  /* 不用 text-wrap: balance。它会把两行长度拉平（实测 9 字 / 8 字），
     而参考图是「长第一行 + 短末行」的自然断法；两边一对比就是「形状不一样」。
     行宽已经按上面算好的 208 卡住了断点，不需要 balance 再插手。 */
}

/* 列表本身不再上色，背景已经在 .nav3__side 上（标题要和它连成一块）；
   flex 撑满剩余高度，让灰块一直铺到栏底。
   左内距与标题一致（36），三项文字落在同一条竖线上。 */
.nav3__tabs {
  flex: 1 0 auto;
  margin: 0;
  padding: 0 var(--nav3-pad, 36px) 44px;
  list-style: none;
}

.nav3__tab {
  display: flex;
  align-items: center;
  /* 行距 = 行高 24 + 下划线 4 + 这段 margin。
     2026-10-19 10 → 18：10 的时候 7 项挤成一坨，扫视时容易点错行
     （用户标了每一行下方的空隙说「上下间距大一些」）。
     18 之后行距 46，接近参考站的呼吸感，又不会把左栏拉得过长。 */
  margin-bottom: 18px;
}

/* 下划线用伪元素做**横向展开**（0 → 100%），和源站一致：
   源站 .Submenu-product-name a::after 就是 width:0 → 100% + 0.5s ease-out。
   早先用的是 border-bottom-color 变色，切换时是「整条突然亮起」，
   没有源站那种从左往右划过去的过程。
   ★ 位置仍要留 padding-bottom:4px 的占位，否则 hover 时行高会跳 2px。 */
.nav3__tab > a {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-size: 15px;
  line-height: 24px;
  color: var(--txtcl, #41464f);
  text-decoration: none;
  /* 0.5s：与源站 transition: all 0.5s ease-out 同值 */
  transition: color 0.5s ease-out;
}

.nav3__tab > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--Original, #206fed);
  transition: width 0.5s ease-out;
}

.nav3__tab:hover > a,
.nav3__tab.is-active > a {
  color: var(--Original, #206fed);
}

.nav3__tab:hover > a::after,
.nav3__tab.is-active > a::after {
  width: 100%;
}

/* 角标（HOT 之类）：颜色由模板内联 style 给，这里只管尺寸形状 */
.nav3__hot {
  margin-left: 6px;
  padding: 0 4px;
  border-radius: 2px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
  white-space: nowrap;
}

/* ---------- 右栏 ---------- */
.nav3__main {
  flex: 1 1 auto;
  min-width: 0;
  /* 底内距 40 → 28：三级面板只放一行卡片时，底部那段空白把它撑到 234，
     比二级面板（200）高出一截。收到 28 之后两者基本齐平，
     内容多了照样往下长（高度由内容决定，不是靠 padding 兜）。 */
  padding: 26px 40px 28px 36px;
}

/* 顶部工具条：搜索 + 推荐词条 + 关闭按钮（只在产品服务输出，见模板）
   ----------------------------------------------------------------------------
   ★ 2026-10-19 按源站 www.jingyueyun.com 重做（用户给的两张对比图）。
     改之前是「300 宽描边白框 + 描边药丸 chip」，源站是：
       · 搜索框**吃掉剩余宽度**（源站 .Submenu-middle-search-flex 里
         .Submenu-middle-search-box 是 flex-grow:1，实测占 627/1024），
         浅灰底、**没有边框**、圆角 1px、高 34、内距 0 10、放大镜 25px 品牌蓝、
         输入字 12px；
       · 推荐词是**灰色实心方块**（#f1f2f5、圆角 1px、高 35、内距 0 17、
         12px/500 黑字），hover 整块变品牌蓝 + 白字（源站 :hover 只换背景色）。
     所以这一条不再用「描边」表达层次，全部靠底色区分 —— 描边 + 灰底叠在一起
     会显得脏，而且和源站差得最明显的就是那圈边。
   关闭按钮是 nav.css 里那条 .menu-dropdown-close（absolute，right:32px，
   padding:20px 撑出点击区），所以这里给它留 48px 右内边距，别被压住。 */
.nav3__bar {
  display: flex;
  align-items: center;
  /* 源站 = .search-right-content 的 margin-left 20 + 每个 li 的 margin-left 10 = 30 */
  gap: 30px;
  margin-bottom: 20px;
  padding-right: 48px;
}

/* 搜索框：**固定 540 宽**，不再吃掉左侧全部剩余空间。
   ★ 2026-10-19 从 `flex: 1 1 auto`（1920 下实测 867 宽）改成 540 ——
     flex:1 时它几乎横跨半个面板，跟右侧四个推荐词之间拉出一大片空白，
     整条搜索区看着像两截断开的东西；收到 540 之后「搜索框 + 推荐词」
     才是紧凑的一组，右边留白交给面板自己承担。
   ★ flex-grow 必须为 0：留 1 的话多余空间又会灌回搜索框，改了等于没改。
     flex-shrink 保留 1（窄屏 1200 以下虽然不显示面板，但 1440 档
     内容区只有 1134，540 + 30 + 推荐词 485 ≈ 1055 还放得下，不会挤）。
   ★ 必须写 min-width:0，否则 input 的默认宽度会把这条 flex 撑破。 */
.nav3__search {
  display: flex;
  flex: 0 1 540px;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 1px;
  background: #f5f6f8;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* 源站没有 focus 态；这里只加一层极淡的底变白 + 1px 内描边，
   不然点进输入框完全没有反馈。用 inset 阴影而不是 border，
   改了边框会让 34px 的盒子变高 1px、整行跟着抖。 */
.nav3__search:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 86, 255, 0.35);
}
/* 源站 .Submenu-middle-search-icon：font-size 25 / color var(--Original) / margin-right 5。
   25 是照抄值：`.sk-sousuo1` 的字形只占 em 框的一部分，20 号渲染出来墨迹只有
   13px 左右，比参考图上的放大镜小一圈。34 高的框里放 25 号仍然安全
   （line-height 已压成 1，不会把这一行撑高）。 */
.nav3__search .search-icon {
  flex: 0 0 auto;
  font-size: 25px;
  color: var(--Original, #0056ff);
  line-height: 1;
}
.nav3__search-input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 12px;
  line-height: 34px;
  height: 34px;
  color: var(--tc-ink, #16181a);
}
.nav3__search-input::placeholder {
  color: #9aa1ab;
}

.nav3__chips {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav3__chips::-webkit-scrollbar {
  display: none;
}

/* 推荐词：源站 .search-right-content li（30 行那块）
   —— 灰底 #f1f2f5、radius 1、line-height 34（实测盒子高 35）、padding 0 17、
      margin-left 10（这里用父级的 gap 顶替）、12px/500 黑字。
   hover 只换背景和文字色，不做位移/描边。 */
.nav3__chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 35px;
  padding: 0 17px;
  border: 0;
  border-radius: 1px;
  background: #f1f2f5;
  font-size: 12px;
  font-weight: 500;
  line-height: 35px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}
.nav3__chip:hover {
  background: var(--Original, #0056ff);
  color: #fff;
}

/* ---------- 三级卡片 ---------- */
/* 换栏时面板容器要当定位参照（高度过渡 / 绝对定位的兜底层都用得上）。 */
.nav3__panels {
  position: relative;
}
.nav3__panel {
  display: none;
}
/* 换栏效果：内容**瞬时**替换（源站 .menu-product-content.active 只有
   display:flex，没有过渡也没有动画；容器高度由 min/max-height 锁死，
   换内容不会改变面板高度）。所以这里只做显示切换，不做位移动画。 */
.nav3__panel.is-active {
  display: block;
}

/* ---------- 产品服务：所有二级菜单的右栏长度统一（2026-10-23 用户要求）----------
   ★ 问题：切二级菜单时下拉面板一长一短。实测「精选推荐」那块 558 高（三行商品卡 +
     产品动态 + 广告列），切到「国内云服务器」这类只剩两张卡的面板时整条下拉从
     663 塌到 477，鼠标横着扫一遍二级项，面板会跟着一下一下地抽。
   ★ 做法：把 .nav3__panels 变成 grid，所有面板都钉在**同一个格子**（grid-area:1/1）
     里叠着，靠 visibility 而不是 display 控制显隐 —— 不显示的panel 仍然参与布局，
     于是容器高度 = 所有面板里最高的那块，切谁都不变。
   ★ 为什么不用写死 min-height：写死一个数字，后台以后加商品/加广告就会顶破它，
     又得回来重新量。叠格子的高度由内容自己算，加多少都自动跟着走。
   ★ 只对「产品服务」生效（和下面那条灰底选择器同一套栏目名约定）。如果以后
     其它栏目（解决方案 / 生态合作 …）也要统一，把这四条的 [data-nav="产品服务"]
     去掉即可。
   ★ visibility 而不是 opacity：hidden 的元素不接收鼠标事件，隐藏面板里的卡片
     不会被误 hover；opacity:0 还会留在可点击、可 tab 聚焦的状态。 */
.Submenu-container.nav3[data-nav="产品服务"] .nav3__panels {
  display: grid;
}
.Submenu-container.nav3[data-nav="产品服务"] .nav3__panel {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
}
.Submenu-container.nav3[data-nav="产品服务"] .nav3__panel.is-active {
  visibility: visible;
}
/* 系统开了「减少动态效果」时同样不做位移（tab 下划线也不再展开） */
@media (prefers-reduced-motion: reduce) {
  .nav3__tab > a,
  .nav3__tab > a::after {
    transition: none;
  }
}

/* 右栏栅格：源站两条不同的规则，按栏目分开用 ——
   · 普通栏目（.Submenu-middle-content）：minmax(230px,1fr) + gap 4/28
   · 产品服务（.Submenu-product-content-list）：minmax(230px,1fr) + gap 28/20
   所以这里默认取 4/28（绝大多数栏目），产品服务单独覆写成 28/20。
   列数都是 5：1920 下右栏内容宽 1312，(1312-4×28)/5 = 240。 */
.nav3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 28px;
}
/* 产品服务的卡片行距大：卡片有底色和高度，4px 会让两块灰几乎贴在一起 */
.Submenu-container.nav3[data-nav="产品服务"] .nav3__grid {
  gap: 28px 20px;
}

/* 三级条目：**无底色的纯文字块**（源站 .Submenu-item）
   ----------------------------------------------------------------------------
   ★ 2026-10-19 大改：从「白底/浅蓝底卡片 + 88 高 + 描边悬停」改成源站那张纯文字列。
     用户的参考图（解决方案面板）里，右栏就是一列列「标题 + 两行灰描述」，
     条目本身没有任何底色或边框，只有鼠标悬停时浮出一层极淡的投影。
     · padding 20px 36px 20px 20px：右边 36 是给长标题留的呼吸位（源站同款）
     · border-radius 4：没有底色时看不出来，但 hover 的投影需要它才是圆角矩形
     · 默认 box-shadow 写成 alpha=0 的同一层，hover 才能插值（层数不同会跳变）
     · hover 的 background 在纯白底上 rgba(255,255,255,.08) 是看不见的，
       只起「压在源站同一条规则上」的作用；真正被看见的是那 1px 3px 的投影。 */
.nav3__card {
  display: block;
  /* 123 = 上内距 20 + 标题行高 21 + 标题下间距 10 + 两行描述 52 + 下内距 20。
     ★ 为什么要这个下限：没有写描述的条目（如「网站解决方案」）内容只有一行标题，
       盒子会塌成 71px —— 同一栏里有的条目 123、有的 71，悬停时浮出来的那块
       大小不一，看着像两套组件。补上「两行描述」的空间后，写不写描述、
       写一行还是两行，盒子都一般高，格子才会整齐。
     ★ 描述本身仍是 line-clamp:2，多余的行照旧截断，不会撑破这个高度。
     ★ 改字号/行高时这里要跟着改（标题 lh21、描述 lh26 是公式里的数）。
     ★ box-sizing 显式写死：全局没有统一的 border-box 声明，万一这层是
       content-box，min-height 会只作用于内容区，盒子变成 123+40=163。 */
  box-sizing: border-box;
  min-height: 123px;
  padding: 20px 36px 20px 20px;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0);
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav3__card:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.12);
}

/* ---------- 产品服务：这里的条目仍是「有底色的商品卡」（源站那套） ----------
   ★ 和其他栏目唯一的差别就是这一块：源站 .list-product-content 有
     `padding:20 + radius:4 + 浅灰底 + min/max-height:124 + 0 1px 3px .02 的静止投影`，
     hover 底色转白、投影加重到 .12。
   ★ 底色不用源站的 rgba(240,244,255,.24)（叠白之后几乎看不出来），
     取一张肉眼可辨的中性浅灰 #f6f7f9 —— 参考图上的卡片就是这个灰度。
   ★ 选择器 0,4,0，会压过 .nav3__card / .nav3__card:hover(0,2,0)，
     所以 hover 的背景和投影都必须在这里再写一遍。 */
.Submenu-container.nav3[data-nav="产品服务"] .nav3__card {
  min-height: 124px;
  padding: 20px;
  background: #f6f7f9;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.02);
}
.Submenu-container.nav3[data-nav="产品服务"] .nav3__card:hover {
  background: #fff;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.12);
}

.nav3__card-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nav3__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* 地区旗：源站 .list-product-img-country 是 34x22、radius 2、contain。
   2026-10-19 从 24x16 放大 —— 产品服务卡片的内距已经是 20，
   小旗压在 14px 标题左边会显得脱节。 */
.nav3__flag {
  flex: 0 0 auto;
  width: 34px;
  height: 22px;
  object-fit: contain;
  border-radius: 2px;
}

/* 条目标题：**二级和三级必须是同一套字**（用户反复强调「字体大小也相同」）。
   ★ 2026-10-19 从 15px 收到 14px，与源站 .Submenu-title 一致；
     描述同步从 13.5/22 收到 13/26（源站 .Submenu-desc）。
     改字号时 .nav3__subitem-name / .nav3__desc / .nav3__subitem-desc 一起改。 */
.nav3__name {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--tc-ink, #16181a);
  transition: color 0.2s ease;
}
.nav3__card:hover .nav3__name {
  color: var(--Original, #0056ff);
}

/* 三级角标：描边小药丸（与二级的实心 HOT 区分开，避免两处抢眼） */
.nav3__badge {
  flex: 0 0 auto;
  padding: 0 5px;
  border: 1px solid #ff2626;
  border-radius: 2px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

/* 条目描述：源站 13px / line-height 26 / rgba(0,0,0,.65) / 两行截断 */
.nav3__desc {
  margin: 0;
  font-size: 13px;
  line-height: 26px;
  color: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 搜索无结果时的空态（由 js/nav.js 往 grid 上挂 .is-empty） */
.nav3__grid.is-empty::after {
  content: "没有匹配的内容";
  grid-column: 1 / -1;
  padding: 28px 0;
  font-size: 14px;
  color: #9aa1ab;
}

/* ==========================================================================
   二级下拉（.nav3--sub）— 左栏沿用标题区，右侧换成无底色条目
   --------------------------------------------------------------------------
   参考图：一级项悬停后，左边一块灰底，压着「一级大标题 + 一句介绍」；
   右边是若干「标题（可带角标）+ 两行描述」的条目，条目本身没有底色。

   ★ 为什么不复用 nav.css 原生的 .Submenu-left：
     那套左栏宽度是 var(--navleft_height)=260，三级这边是新写的 292，
     鼠标横扫一级项时左栏会一宽一窄地跳。视觉上「同一个壳」比「各自贴合源站」
     重要，所以二级直接套 .nav3__side，只在右侧做减法。
   ========================================================================== */
/* ★ 2026-10-19 起二级条目也带 padding-top 20（与三级条目同一套盒子），
   所以这里不再需要单独补上内距 —— 直接继承 .nav3__main 的 26，
   两级的**第一行文字**都落在「面板顶 + 26 + 20」，横扫栏目时不会上下跳。
   （高度不在这里设：二级和三级共用 .nav3 的 min-height，
     两边下限不同的话，横扫一级项时面板底边会一跳一跳。） */

/* 栅格与三级完全同参：源站二级/三级共用 .Submenu-middle-content 那一条
   （minmax(230px,1fr) + gap 4/28）。两边的列数、列宽、行距都一样，
   切栏目时右栏的竖向节奏才是一致的。
   ★ 只剩 align-content:start，其余全部继承 .nav3__grid —— 别再单独写 gap，
     写了就和三级差 6px 列宽（240 vs 246），两栏的列线对不上。 */
.nav3__grid--sub {
  align-content: start;
}

/* 二级条目：**与三级条目同一套盒子**（padding / radius / hover 全部对齐）。
   ★ 上一版只补了 padding-left 20（为了让文字和三级卡片对齐），
     上下没有内距，条目之间靠 grid 的 26px 行距；
     现在条目自带 20 上下内距，行距回到源站的 4px。 */
.nav3__subitem {
  display: block;
  /* 与 .nav3__card 同一套盒子：内距、圆角、最小高度、悬停全部对齐，
     所以二级里「百站赞助」这种没写描述的条目，也不会比旁边带描述的矮一截。
     123 的公式见 .nav3__card 上方的注释（20+21+10+52+20）。 */
  box-sizing: border-box;
  min-height: 123px;
  padding: 20px 36px 20px 20px;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0);
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.nav3__subitem:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.12);
}

.nav3__subitem-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* 与 .nav3__name 完全同参（14px/500/21） */
.nav3__subitem-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--tc-ink, #16181a);
  transition: color 0.2s ease;
}

/* 条目整体是链接，hover 反馈只落在标题上（描述保持灰，不要跟着变蓝抢焦点） */
.nav3__subitem:hover .nav3__subitem-name {
  color: var(--Original, #0056ff);
}

/* 与 .nav3__desc 完全同参（13px/26/rgba(0,0,0,.65)） */
.nav3__subitem-desc {
  margin: 0;
  font-size: 13px;
  line-height: 26px;
  color: rgba(0, 0, 0, 0.65);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 响应式 ----------
   断点跟 common/mobile.css 的壳层断点分开：这里只管下拉内部的两栏比例，
   1200px 以下整个 PC 导航都会被抽屉取代，所以到 1200 为止。 */
@media (max-width: 1440px) {
  .nav3__side {
    /* 290 - 44 = 246：整块左移，宽度不拉伸 */
    --nav3-pad: 32px;
    flex-basis: 246px;
    max-width: 246px;
    padding: 0;
  }
  .nav3__title {
    font-size: 26px;
    padding: 24px 40px 18px var(--nav3-pad, 32px);
  }
  .nav3__tabs {
    padding: 0 var(--nav3-pad, 32px) 34px;
  }
  .nav3__main {
    padding: 22px 28px 28px 28px;
  }
  /* ★ 这里原来把栅格下限收到 210（为了在 1436 下仍排 5 列），副作用是
     产品服务（gap 20）正好挤下 5 列、其它栏目（gap 28）只剩 4 列 ——
     横扫栏目时列线左右跳。源站没有这个断点，全程一个 230，
     所以这里删掉，让列数在每一档都自然一致（1436 下两级都是 4 列）。 */
}

@media (max-width: 1200px) {
  /* 原来这里写 min-height:0，窄屏下把下限完全去掉 —— 面板塌成内容高（~120），
     比宽屏矮一半，切栏目时一高一矮。现在跟宽屏用同一个下限。 */
  .nav3 {
    min-height: 280px;
  }
  .nav3__side {
    /* 240 - 36 = 204：同上 */
    --nav3-pad: 28px;
    flex-basis: 204px;
    max-width: 204px;
    padding: 0;
  }
  .nav3__tabs {
    padding: 0 var(--nav3-pad, 28px) 26px;
  }
  .nav3__title {
    font-size: 23px;
    padding: 20px 40px 16px var(--nav3-pad, 28px);
  }
  .nav3__tab > a {
    font-size: 14px;
  }
  .nav3__bar {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* 窄屏时搜索框不再吃满：chips 换行后它独占一行，flex:1 会把那一行
     压得只剩几十像素，输入区根本点不进去。 */
  .nav3__search {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   一级导航角标（HOT）位置：从「贴在文字右侧居中」改为「悬在标题右上角」
   --------------------------------------------------------------------------
   外观全部沿用 nav.css:244-260 的原生规则（6px 圆角、左下角切平、10px 白字、
   后台配的 tagcolor）。这里只调**位置**和**盒高**。

   ★ 关键坑一：.navbar-menu-tag 是 span，行内元素会继承 a 的 line-height(62px)，
     盒子被撑到 62 高，里面的 i 再按基线往下掉，视觉上永远贴在字中间。
     必须 display:block + line-height:0 把行框压平，top 才真的等于「盒顶」。

   ★ 关键坑二（2026-10-22）：i 一旦被设成 inline-block，盒高就改由 line-height(10)
     决定 → 14px（10 + 上下 padding 4）。源站 i 是 inline，高度取**字体度量**：
     13 + 4 = 17px。两者差 3px，6px 圆角在 14px 的扁盒上已经接近半高，
     渲染出来就是「胶囊」，而源站看着是方一点的气泡 —— 这就是角标观感的差别来源。
     所以 inline-block 必须补 line-height:13px 把盒高补回 17。
   ========================================================================== */
body .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li a .navbar-menu-tag {
  /* 源站 i 顶 = a.top + 2（tag top:6 + i 在行框里的偏移）；本地 tag 高 = i 高，
     没有那层偏移，所以 top 直接写 2 才对得上。 */
  top: 2px;
  /* 源站的 left 取静态位置 = a 的内容宽（a 宽 - 右 padding 10）。不同栏目宽度不同，
     必须用 calc(100% - 10px) 而不是固定值。 */
  left: calc(100% - 10px);
  right: auto;
  margin-left: 0;
  z-index: 2;
  display: block;
  line-height: 0;
  pointer-events: none;
}

/* i 是行内元素，行高被压到 0 后高度会塌掉，给它 inline-block 撑住原生 padding；
   line-height 补到 13（字体度量高度），盒高才和源站的 17 一致 */
body .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li a .navbar-menu-tag i {
  display: inline-block;
  line-height: 13px;
}

/* 角标悬在 a 外面，不给这一项补位会压住下一项字头。
   ★ 16 → 9：源站实测就是 9px（`li:has(.navbar-menu-tag){margin-right:9px}`），
     16px 时「产品服务 | 解决方案」之间比源站宽 7px，看着像空了一格。 */
body .horizontal-menu-navbar .horizontal-menu-navbar-container .horizontal-container-navbar .horizontal-menu-navbar-menu-container .horizontal-menu-navbar-menu li:has(> a > .navbar-menu-tag) {
  margin-right: 9px;
}

/* ==========================================================================
   精品推荐（「产品服务」下拉面板的第一个 tab）
   --------------------------------------------------------------------------
   ★ 2026-10-22 第三次改版：**照源站样式表逐条搬**，不再靠截图目测。
     源站模板 common/header/nav/ProductsAndServices.html
     源站样式 static/css/nav.css  (搜 .Submenu-container.product_services)
     结构 .recommend-product / .recommend-news / .Submenu-right / .advertisement-content
     → 这里一一对应成 .jp-*，数值原样保留：
       产品 40% + 动态自适应（margin-left 20）/ 广告列 280（padding-left 20）
       大卡 padding 18/20、间距 10、底 #fbfcff（= --navright_block）、圆角 8
       编号 22px DINAlternate-Bold、渐变文字 + text-shadow
       小卡两列 gap 12/20、名字 32px 行高、描述 13/24 截两行
       动态两列 gap 0/20、底色块 padding 20、行高 42
       广告卡 = 图片整张打底 + 文字绝对定位居中（padding 0 20 0 30，标题 16/500 + 10，描述 12）
   ★ 顶部广告 + 产品 + 文章在同一个滚动容器里（`.jp-scroll`）**只有一条滚动条**；
     右侧广告列在滚动容器外面，内容再长它也不动。产品和文章不再各自滚动。
   ========================================================================== */
.jp {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
/* 唯一的滚动容器。
   ★ 2026-10-22 定高（用户要求）：**不跟着视口拉伸**，高度上限固定 668px
     （= 源站 `.Submenu-container` 内联的 min/max-height:668），内容超长才在内部滚。
   ★ max-height 让面板贴合内容（不满时底边就压在第 3 张大卡下方，不留大块空白）；
     min-height 558 是用户两次划线后的定稿（478 + 再拉长 80）：第 3 张卡底（634）往下留 117，
     底边正好压到下方 hero 标题那一行。两级都用 min() 兜住小视口。
   ★ 668 是容器高度上限；顶部广告那 140（120 图高 + 20 下间距）也在这容器里，
     所以「有顶部广告」档给 808，好让下方产品区露出的行数与无广告档完全一致。
   ★ 小视口兜底：calc(100vh - 220px)（面板顶约 193 + 底部留白），
     否则面板会顶出窗口，滚动条跑到浏览器窗口上去（正是之前的问题）。 */
.jp-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: min(558px, calc(100vh - 220px));
  max-height: min(668px, calc(100vh - 220px));
  overflow-y: auto;
  overflow-x: hidden;
}
.jp:has(.jp-top) .jp-scroll {
  max-height: min(808px, calc(100vh - 220px));
}

/* ---------- 顶部横排广告（AD 位置选「顶部」才有） ----------
   ★ 源站 `.Submenu-upper .Submenu-advertisement{grid-template-columns:repeat(4,1fr); gap:20px}`
     —— **固定 4 列**，不是「有几张排几列」。
     1600 视口源站实测：容器 1234 → 每张 293.5×139.2（高 = 该行最高的那张图按自然比例撑开，
     由 `.advertisement-content img{height:100%}` 拉齐），4 列留 1 个空位。
     我们先前写成 repeat(3) → 每张 394×157.6，比源站宽 34%，看着「变大」了。 */
.jp-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 20px;
  margin-bottom: 20px;
}
/* 同源站 .advertisement-content：图片整张打底，文字绝对定位压在左侧 */
.jp-top-card {
  position: relative;
  display: block;
  min-height: 120px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.1);
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}
.jp-top-card:hover {
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.32);
}
.jp-top-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 120px;
  /* 源站 `.Submenu-upper ... img{height:100%;object-fit:fill}`：同一行按最高那张拉齐，
     图片直接拉伸铺满（会有轻微变形，源站就是 fill，不是 cover）。 */
  object-fit: fill;
}
.jp-top-text {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 20px 0 30px;
  transform: translateY(-50%);
}
.jp-top-title {
  max-width: calc(100% - 50px);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
  word-wrap: break-word;
}
.jp-top-desc {
  max-width: calc(100% - 50px);
  font-size: 12px;
  font-style: normal;
  color: #585859;
  word-wrap: break-word;
}

/* ---------- 主体：内容区（产品 40% + 动态）+ 右侧广告列 ---------- */
/* 源站 .Submenu-middle 的 flex-grow:1 + padding-right:20 —— 40% 是内宽的比例，
   所以 20 的右内距必须落在「产品 + 动态」这个组上，不能加在含广告列的外层。 */
.jp-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  align-items: flex-start;
  min-width: 0;
  padding-right: 20px;
}
/* 源站 .Submenu-selected-content.about .recommend-product{min/max-width:40%} */
.jp-products {
  flex: 0 0 40%;
  max-width: 40%;
  min-width: 40%;
}
/* 源站 .about .recommend-news{flex-grow:1; margin-left:20px} */
.jp-news {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 20px;
}
/* 源站 .Submenu-right{min/max-width:280; padding:0 4px 60px 20px}
   可见宽 = 280 - 20 - 4 = 256；顶部不额外让位（参考图里广告卡与区块标题同一水平线起）。
   ★ 底部 60 是源站给「可滚动右栏」留的余量，我们这栏不滚动 → 去掉。
   ★ 这一列在 .jp-scroll 外面（兄弟节点），所以左侧内容再长它也不跟着滚；
     自身也不设 max-height/overflow，永远不出现第二条滚动条。 */
.jp-ads {
  display: flex;
  flex: 0 0 280px;
  flex-direction: column;
  max-width: 280px;
  min-width: 280px;
  padding: 0 4px 0 20px;
}

/* ---------- 区块标题（源站 .Submenu-blockTitle） ---------- */
.jp-hd {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.jp-hd-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #181818;
}
.jp-hd-title > i {
  font-size: 16px;
  color: #f44336;
}
/* 「查看全部」：源站是 #ccc + padding-right 8，hover 变品牌蓝 */
.jp-more {
  padding-right: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #ccc;
  text-decoration: none;
}
.jp-more:hover {
  color: var(--Original, #0056ff);
}

/* ---------- 推荐产品 ---------- */
/* 不设 max-height：产品和文章都只是高度不受限的内容，溢出交给外层 .jp-scroll 统一滚，
   否则会像之前那样在列表内部再冒出一条独立的小滚动条。 */
.jp-list {
  overflow: visible;
}
/* 源站 .recommend-product-hot：底 --navright_block(#fbfcff)、内距 18/20、间距 10 */
.jp-hot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
  padding: 18px 20px;
  /* 2026-10-22：8 → 4，用户要「只要一点点圆角」，与广告卡同一口径 */
  border-radius: 4px;
  background-color: #fbfcff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.jp-hot:hover {
  background-color: #f4f8ff;
}
/* 编号：源站 22px DINAlternate-Bold + 渐变文字 + 阴影。源站那套字体在 Windows 上不存在，
   实际渲染会回退成 Arial 系（源站实测数字盒 26 × 32）。
   ★ 2026-10-22 比例修正：原先用 Bahnschrift（DIN 血统但**字身偏窄**），
     24px 时「01」只有 21.2 × 24，比源站 26 × 32 明显瘦小 → 换成 Arial 24px + 行高 32，
     实测 26.7 × 32，与源站几乎重合。
   ★ --gradient1 取参考图实测：顶部 #0759df、底部 #0f60e5，几乎是纯色，
     所以渐变区间收得很窄，别写成亮蓝到深蓝那种大跨度。 */
.jp-num {
  flex: none;
  margin-right: 10px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  color: transparent;
  background-image: linear-gradient(180deg, #0759df 0%, #0f60e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
}
.jp-hot-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
/* 标题行 padding 10 上下 = 源站留白（大卡高度正是靠它 + 描述 min-height 52 撑到 126） */
.jp-hot-title {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: #181818;
}
.jp-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* 橙框标签：1px 橙边 + 橙字、无底色（源站 .recommend-hot-product-label） */
.jp-label {
  flex: none;
  margin-left: 8px;
  padding: 0 6px;
  border: 1px solid #ff9800;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #ff9800;
}
.jp-label--red {
  border-color: #ff2626;
  color: #ff2626;
}
/* 大卡描述：13px、min-height 52（源站就是这么撑高度的，别改成 padding） */
.jp-desc {
  min-height: 52px;
  font-size: 13px;
  font-weight: 400;
  color: #585859;
}
/* 第 4 条起的小卡：两列、编号一行 + 名字一行（参考图就是这个排法） */
.jp-ordinary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px 20px;
}
/* 只有 3 条产品时这个容器是空的，别让它的行距白占高度 */
.jp-ordinary:empty {
  display: none;
}
.jp-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-decoration: none;
}
/* 编号与标签同一行（标签跟在编号右侧，原来它单独占一行把卡片撑高了） */
.jp-item-head {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
}
.jp-item-head .jp-label {
  flex: none;
  margin-left: 8px;
  padding: 0 5px;
  line-height: 15px;
}
.jp-item-no {
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  color: #181818;
}
.jp-item-name {
  max-width: 100%;
  /* 名称与上面那行（编号 + 标签）拉开 8px，墨迹间隙约 12px，对齐参考图 */
  margin-top: 8px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 17px;
  color: #585859;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.jp-item:hover .jp-item-name {
  color: var(--Original, #0056ff);
}
.jp-item-desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 24px;
  color: #585859;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ---------- 产品动态 ---------- */
/* 底色块挂在列表上（不是外层）：源站标题与区块左边齐平，列表文字才缩进 20。
   同样不设 max-height（不再单独滚动），高度由条数撑开，交给 .jp-scroll 统一滚。 */
.jp-news-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0 20px;
  padding: 20px;
  /* 2026-10-22：8 → 4，和大卡一样只留一点点圆角 */
  border-radius: 4px;
  background-color: #fbfcff;
  overflow: hidden;
}
/* 行高 42、单行截断（源站 -webkit-line-clamp:1），编号直接跟在标题前面 */
.jp-news-item {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 400;
  line-height: 42px;
  color: #181818;
  text-decoration: none;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.jp-news-item:hover {
  color: var(--Original, #0056ff);
}

/* ---------- 右侧竖排广告（3 张：图片整张打底 + 左侧文字） ----------
   ★ 圆角按要求改成「微微的角」= 4px（源站 8）。顶部那排 `.jp-top-card` 同为 4。 */
.jp-ad {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
  margin-bottom: 28px;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.1);
  text-align: center;
  text-decoration: none;
  transition: box-shadow 0.3s ease;
}
.jp-ad:hover {
  box-shadow: 0 1px 3px rgba(49, 49, 49, 0.32);
}
.jp-ad-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  border-radius: 4px;
  object-fit: cover;
}
.jp-ad-text {
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 20px 0 30px;
  transform: translateY(-50%);
  text-align: left;
}
.jp-ad-title {
  max-width: calc(100% - 50px);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #181818;
  word-wrap: break-word;
}
.jp-ad-desc {
  max-width: calc(100% - 50px);
  font-size: 12px;
  font-style: normal;
  color: #585859;
  word-wrap: break-word;
}

/* ---------- 滚动条（只有 .jp-scroll 这一条，细一点别抢眼） ---------- */
.jp-scroll::-webkit-scrollbar {
  width: 4px;
}
.jp-scroll::-webkit-scrollbar-thumb {
  border-radius: 2px;
  background-color: #dfe2e8;
}
.jp-scroll::-webkit-scrollbar-track {
  background-color: transparent;
}