/* ============================================================================
   智海国际 · 业务集群页样式（pages.css）
   用途：/cross-border/ /hk/ /cn/ /ecom/ /sg/ /ru/ /locations/ /answers/ 全部集群页
   生成：2026-09-20　基于效果图 mock.css 生产化（剥离屏幕框/标注等展示外壳）

   设计规范（去 AI 味，与全站令牌同源）：
     主色 var(--primary) #0a2d5e｜圆角 4px｜无阴影（1px 细边框）
     渐变仅 Hero｜区块标题左对齐 + 下边框｜表格 + 编号列表 + 线性列表
     禁用 emoji（图标走 /css/icons-deai.css 线性 SVG）
   自包含：本文件不依赖 style.css，集群页只需引 pages.css + icons-deai.css
   ============================================================================ */

/* ===== 0. 令牌与基础 ===== */
:root{
  --primary:#0a2d5e;
  --primary-light:#1a4d8c;
  --primary-lighter:#2a6dbf;
  --accent:#c89b3c;
  --ink:#1f2937;
  --body:#4b5563;
  --muted:#6b7280;
  --faint:#8a94a0;
  --line:#dde3ea;
  --line-2:#edf1f5;
  --bg-soft:#f7f9fb;
  --radius:4px;
  --radius-sm:3px;
  --cw:1200px;
}







.cw{max-width:var(--cw);margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
:focus-visible{outline:2px solid var(--primary-lighter);outline-offset:2px}

/* ===== 1. 工具条（34px） ===== */
.g-bar{background:var(--bg-soft);border-bottom:1px solid var(--line);height:34px;display:flex;align-items:center;gap:14px;padding:0 22px;font-size:11.5px;color:var(--muted)}
.g-bar .lb{color:var(--faint);white-space:nowrap}
.g-bar .city{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.g-bar .city a{color:var(--body);text-decoration:none;white-space:nowrap}
.g-bar .city a:hover{color:var(--primary)}
.g-bar .sp{flex:1}
.g-bar .rgt{display:flex;align-items:center;gap:12px;white-space:nowrap}
.g-bar .rgt a{color:var(--body);text-decoration:none}
.g-bar .rgt a:hover{color:var(--primary)}
.g-bar .lang{border:1px solid #c3cdd8;border-radius:var(--radius-sm);padding:1px 7px;color:var(--primary-light);font-weight:600}
.g-bar .lang.off{color:var(--faint);border-color:#dbe2e9;cursor:default}

/* ===== 2. 主导航（64px，sticky） ===== */
.g-main{background:#fff;border-bottom:1px solid var(--line);height:64px;display:flex;align-items:center;padding:0 22px;position:relative;z-index:60}
.g-main.stuck{position:sticky;top:0;border-bottom-color:#c9d3dd}
.g-logo{display:flex;align-items:center;gap:9px;margin-right:22px;text-decoration:none;flex:0 0 auto}
.g-logo .mk{width:28px;height:28px;background:var(--primary);border-radius:var(--radius);position:relative;flex:0 0 28px}
.g-logo .mk::after{content:"";position:absolute;left:7px;top:7px;width:12px;height:12px;border:1.5px solid #fff;border-radius:2px}
.g-logo .tt b{display:block;font-size:16px;font-weight:700;color:var(--primary);letter-spacing:.5px;line-height:1.2}
.g-logo .tt em{display:block;font-size:9.5px;font-style:normal;color:var(--faint);letter-spacing:.2px;line-height:1.3}
.g-menu{display:flex;align-items:center}
.g-item{position:relative}
.g-item>a{display:flex;align-items:center;gap:0;padding:0 15px;height:64px;font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.g-item>a .cv{display:inline-block;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid #9aa5b1;margin-left:6px}
.g-item:hover>a,.g-item.on>a,.g-item:focus-within>a{color:var(--primary);font-weight:600;text-decoration:none}
.g-item.on>a::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:2px;background:var(--primary)}
.g-sp{flex:1}
.g-tel{font-size:13.5px;color:var(--primary);font-weight:600;text-decoration:none;margin-right:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
.g-cta{background:var(--primary);color:#fff;border-radius:var(--radius);padding:9px 18px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.g-cta:hover{background:var(--primary-light);text-decoration:none}

/* ===== 3. 分组面板（悬停 / 键盘展开） ===== */
.g-mega{position:absolute;left:0;right:0;top:64px;background:#fff;border-bottom:1px solid var(--line);padding:20px 22px 0;display:none;z-index:70}
.g-item:hover .g-mega,.g-item:focus-within .g-mega{display:block}
.g-cols{display:flex;gap:26px;padding-bottom:18px;max-width:var(--cw);margin:0 auto}
.g-col{flex:1;min-width:0}
.g-col .ch{font-size:13px;font-weight:700;color:var(--primary);padding-bottom:7px;border-bottom:1px solid #e3e9ef;margin-bottom:9px}
.g-col .ch em{font-style:normal;font-size:10.5px;font-weight:400;color:var(--faint);margin-left:5px}
.g-col ul{list-style:none}
.g-col li a{display:block;font-size:12.5px;color:var(--body);text-decoration:none;padding:4.5px 0;line-height:1.5}
.g-col li a:hover{color:var(--primary);text-decoration:underline}
.g-col li a.pillar{color:var(--primary);font-weight:600}
.g-col li a.pillar::before{content:"";display:inline-block;width:5px;height:5px;background:var(--primary);margin-right:7px;vertical-align:middle}
.g-col li a .kw{font-size:9.5px;border:1px solid #a9c4e0;background:#eaf2fb;color:var(--primary-light);border-radius:2px;padding:0 4px;margin-left:6px;font-weight:400;white-space:nowrap}
.g-feat{border-top:1px solid #e3e9ef;padding:12px 0 14px;display:flex;align-items:center;gap:20px;font-size:12.5px;color:var(--body);flex-wrap:wrap;max-width:var(--cw);margin:0 auto}
.g-feat b{color:var(--primary)}
.g-feat .sp{flex:1}
.g-feat .lb2{color:var(--faint);font-size:11.5px}
.g-feat .go{border:1px solid #a9c4e0;background:#eaf2fb;color:var(--primary-light);border-radius:var(--radius);padding:6px 14px;font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}

/* ===== 4. 移动端导航 ===== */
.mb-bar{display:none}
@media(max-width:900px){
  .g-bar{display:none}
  .g-main{display:none}
  .mb-bar{background:#fff;border-bottom:1px solid var(--line);height:54px;display:flex;align-items:center;padding:0 14px;gap:11px;position:sticky;top:0;z-index:60}
  .mb-burger{width:24px;height:15px;position:relative;flex:0 0 24px;background:none;border:none;cursor:pointer;padding:0}
  .mb-burger span{position:absolute;left:0;right:0;height:2px;background:var(--primary);display:block}
  .mb-burger span:nth-child(1){top:0}
  .mb-burger span:nth-child(2){top:6.5px}
  .mb-burger span:nth-child(3){top:13px}
  .mb-bar .tt{font-size:15px;font-weight:700;color:var(--primary);letter-spacing:.4px}
  .mb-bar .sp{flex:1}
  .mb-bar .call{border:1px solid #a9c4e0;background:#eaf2fb;color:var(--primary-light);border-radius:var(--radius);padding:5px 11px;font-size:12.5px;font-weight:600;white-space:nowrap;text-decoration:none}
}
.mb-panel{display:none;background:#fff;border-bottom:1px solid var(--line)}
.mb-panel.open{display:block}
.mb-item{border-bottom:1px solid var(--line-2)}
.mb-item>a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;font-size:14.5px;color:var(--ink);text-decoration:none}
.mb-item.open>a{color:var(--primary);font-weight:600;background:var(--bg-soft)}
.mb-sub{background:var(--bg-soft);border-top:1px solid var(--line-2);padding:4px 0;display:none}
.mb-item.open .mb-sub{display:block}
.mb-sub a{display:block;padding:9px 16px 9px 28px;font-size:13px;color:var(--body);text-decoration:none;border-bottom:1px solid var(--line-2)}
.mb-sub a:last-child{border-bottom:none}
.mb-sub a.on{color:var(--primary);font-weight:600}
.mb-cta{background:var(--primary);color:#fff;text-align:center;padding:13px;font-size:14.5px;font-weight:600;display:block}
.mb-utils{padding:11px 16px;font-size:12px;color:var(--muted);line-height:1.9;background:#fff;border-top:1px solid var(--line-2)}
.mb-utils a{color:var(--body)}


/* ===== 路径B 追加：工具条补齐存量页功能（浅灰底适配，勿用深底配色）===== */
.g-bar .rgt{gap:12px}
.g-bar .rgt .ml{color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.g-bar .rgt .ml:hover{color:var(--primary)}
.g-bar .rgt .adm{background:var(--primary);color:#fff;border-radius:var(--radius-sm);
padding:2px 9px;font-weight:600;text-decoration:none}
.g-bar .rgt .adm:hover{background:var(--primary-light);color:#fff}
.g-bar .rgt .lang{border:1px solid #c3cdd8;background:#fff;border-radius:var(--radius-sm);
padding:1px 7px;color:var(--primary-light);font-weight:600;text-decoration:none}
.g-bar .rgt .lang.on{background:var(--primary);border-color:var(--primary);color:#fff}
.g-bar .rgt .lang:hover{text-decoration:none}
@media(max-width:900px){.g-bar .rgt .ml,.g-bar .rgt .adm{display:none}}

/* ===== 修正：分组面板未铺满导航宽度 =====
   根因：pages.css 里 .g-item{position:relative} 使 .g-item 成为定位参照，
   而 .g-mega{position:absolute;left:0;right:0} 便只按「单个菜单项的宽度」铺开，
   面板被压成一条窄柱（线上 58 个集群页同样存在此缺陷，只是需要 hover 才看得到）。
   修法：让 .g-item 回到 static，使参照物变成 .g-main（position:relative，整条导航），
   面板即按整条导航宽度铺满。top:64px 正好落在导航条下沿。 */
.g-menu .g-item{position:static}
.g-menu .g-item>.g-mega{top:64px}


/* ===== 修正（2026-09-20）：一级菜单分组面板未铺满导航宽度 =====
   现象：鼠标移上一级菜单时，面板被压成约 98px 宽、1800+px 高的窄条，文字逐字竖排并压住正文。
   根因：本文件 .g-item{position:relative} 使 .g-mega{position:absolute;left:0;right:0} 的定位
         参照物由「整条导航 .g-main（宽 100%）」变成「单个菜单项（宽约 98px）」。
   修法：① .g-item 回到 static，参照物恢复为 .g-main，面板即按整条导航铺满；
         ② 同时给 .g-item>a 建立定位上下文，使「当前栏目」下划线 .g-item.on>a::after
            （left:15px / right:15px / bottom:0）仍以菜单项自身为参照，
            避免 .g-item 改 static 后被拉到整条导航两端。 */
.g-menu .g-item{position:static}
.g-menu .g-item>a{position:relative}