/* ==========================================================================
   雅之林® 首页「九宫格导航」(.home-nav) 增补 —— 单一真源
   ──────────────────────────────────────────────────────────────────────────
   🔴🔴🔴 2026-10-21 夜 用户令（原文，针对手机版官网首页截图）：
     「手机页面中，2排导航按钮要**上提**，**下面加上AI健康顾问的按钮**。
       按钮可以居中但是**最好不要把横条拉到左右两边到头**那样不好看。
       所有页面，逐页检查并修复。」

   本文件只做这几件事（其余外观仍由各站自己的 style.css / 内联样式决定）：
     ① `.home-nav-call`：九宫格**下方**新增的「AI健康顾问」居中按钮（不是第 9 格）
     ② 手机端上提：`margin-top` 从 −56px 提到 −72px（多吃 16px 首屏深色留白）
     ③ 手机端收窄：`.home-nav-inner` 限宽居中 ⇒ 卡片不再从左边 14px 顶到右边 14px
     ⑤ 长条按钮两行排版：中文 + 金色英文（类名沿用 `.hn-cn` / `.hn-en`，白拿各站口径）

   ⚠️ 为什么单独一个文件而不是改各站 CSS：
      `.home-nav` 在 **4 个站、22 个页面**上都有（group 15 / case 5 / news 1 / edu 1），
      而且 group 与 case 写在 `assets/style.css`、news 与 edu 写在页面内联 `<style>` 里
      —— 四处各改一遍必然漂移（这正是本项目反复吃过的「两套方案」坑）。
      ⇒ 统一放这里，由 `run_deploy.py` 复制到各站根，各页 `<link>` 引用。

   ⚠️ 加载顺序陷阱（实测踩过，务必看）：
      - group / case：样式在外部 `assets/style.css`，`<link>` 在 head 里 ⇒
        本文件放 `</head>` 前**天然在后面**，同优先级即可压住。
      - news / edu：样式写在**页面 body 里的** `<style id="homeNavCss">`（第 43 轮之前遗留），
        它出现在 head 之后 ⇒ **同优先级下它反而赢**，本文件写了也没用！
      ⇒ 所以本文件一律用**提高选择器权重**的写法，不靠加载顺序：
        `.home-nav.home-nav`（0,2,0）压 `.home-nav`（0,1,0）／
        `.home-nav .home-nav-inner`（0,2,0）压 `.home-nav-inner`（0,1,0）。
      ⛔ 别改成单个类名 + 依赖顺序 —— news/edu 会静默失效，而且**页面不报错**。
      ⛔ 也别用 !important：本站铁律，压不住说明选择器写错了。
   ========================================================================== */

/* ── ① 九宫格下方：AI健康顾问 **长条按钮**（占 2 格）─────────────────────────
   🔴🔴 2026-10-22 用户令（原文，附手机截图）：
     「所有页面的AI健康顾问，用**长条状**，**高度跟上面的导航按钮高度一致**，
       **占2个位置**，**去掉AI健康顾问前面的·**。」
   ⇒ 从"居中胶囊按钮"改成"和宫格同一套几何的长条"：
      · 「占 2 个位置」＝宽度**恰好等于 2 张卡 + 1 个间距**，左边缘**正好压在第 2 张卡的左边**。
      · 高度逐档跟卡片一致：72px / ≤640 60px / ≤360 56px（group/case 的定高锁就是这个数）。
      · 去掉 `::before` 金色圆点（用户明确要）。
      · 圆角跟卡片同档（12 / ≤640 10），这样才像同一组按钮里的一个，而不是另贴的胶囊。

   🔴🔴🔴 为什么用 **flex + flex-basis 算**，而不是"4 列 grid + grid-column:2/span 2"（第一版写法，真机实测偏 1.5px / 宽多 3px）：
      `.home-nav-inner` **本身不是 grid**，它是
        `display:flex; flex-wrap:wrap; justify-content:center; gap:14px`（≤640 gap 8、≤360 gap 6），
        卡片 `flex:0 0 calc((100% - 42px)/4)`，≤640 与 ≤360 **都是减 24px**。
      三档里只有桌面与 ≤640 满足"卡片总宽 = 容器宽"；**≤360 那档不满足**：
        gap 被 `!important` 压成 6px，卡片基宽却还在减 24px（本该减 18）
        ⇒ 4 张卡总宽 4×71 + 3×6 = 302 < 容器 308 ⇒ 卡片组整体居中、左右各空 3px。
      第一版用 4 列 grid 铺满 308：第 2 格起点 = 26+72.5+6 = 104.5，
        而真实第 2 张卡起点 = 29+71+6 = 106 ⇒ 左偏 1.5px、宽多 3px（360px 真机量出来的）。
      ⇒ 改成 flex：按钮 `flex:0 0 calc((100% - X)/2 + G)`，
        X＝该档卡片基宽里减掉的常数、G＝该档真实 gap ⇒ 三档**逐档精确相等**，不靠猜。
        （推导：2×(100%−X)/4 + G ＝ (100%−X)/2 + G）
   ⚠️ 三档的 X/G 必须与各站 `.home-nav-inner a` 的基宽、`.home-nav-inner` 的 gap **同时**改，否则又错位。

   ⚠️ 它是 `.home-nav` 的后代 ⇒ 各站那条 `.home-nav a{...}`（把 <a> 画成卡片）会命中它，
      所以这里必须**逐项覆盖**：display / flex-direction / 宽高 / 背景 / 边框 / 圆角 / 阴影。
   ⚠️ 用 `.home-nav .home-nav-call > a`（0,2,1）压 `.home-nav a`（0,1,1），不靠 !important。 */
.home-nav-call{
  max-width:1200px;margin:14px auto 0;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px;                        /* 与桌面端 .home-nav-inner 的 gap 一致 */
  box-sizing:border-box;
}
.home-nav .home-nav-call > a{
  flex:0 0 calc((100% - 42px) / 2 + 14px);   /* ← 「占 2 个位置」＝2 张卡 + 1 个间距（见上方推导） */
  display:flex;flex-direction:column;  /* ← 两行（中文 + 金色英文），见下方 ⑤ */
  align-items:center;justify-content:center;gap:0;
  width:auto;min-width:0;
  height:72px;                     /* 与宫格卡片同高（桌面档） */
  padding:0 10px;
  border-radius:12px;              /* 与宫格卡片同圆角 */
  background:rgba(255,255,255,.10);
  border:1px solid rgba(201,162,74,.85);
  box-shadow:0 6px 18px rgba(0,15,60,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;text-decoration:none;font-size:15px;font-weight:800;letter-spacing:1px;
  line-height:1.25;white-space:nowrap;
  transform:none;
  transition:transform .25s,background .25s,border-color .25s,box-shadow .25s,color .25s;
}
.home-nav .home-nav-call > a:hover,
.home-nav .home-nav-call > a:focus-visible{
  background:#C9A24A;border-color:#C9A24A;color:#001a63;
  transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,15,60,.42);
}

/* ── ⑤ 长条按钮里的两行：中文 + 金色英文（2026-10-22 第 48 轮）─────────────
   🔴🔴 用户令（原文，附手机截图）：
     「所有页面的AI健康顾问下面加上**金色英文**，跟其他的按钮格式一样。」
   ⇒ 宫格卡片的结构是 `<a><span class="hn-cn">中文</span><span class="hn-en">English</span></a>`，
      所以这里**照抄同一套类名**——这正是"跟其他按钮格式一样"的实现方式：
      四个站各写了一份 `.hn-cn` / `.hn-en` 规则，用了同样的类名就**自动继承各站口径**
      （group/case 15px+9px、news/edu 16px+9.5px，≤640 一律 12px+8px），
      不用在本文件里再猜一遍数值、也不会跟各站漂移。

   ⚠️ 下面两条是**兜底**，不是主样式：`.home-nav-call .hn-cn` 的权重是 (0,2,0)，
      低于各站的 `.home-nav a .hn-cn` (0,2,1) ⇒ 有各站规则时**一定是各站的赢**；
      只有哪个页面漏了规则时才由它接住（否则会继承 `a` 的 15px/字距1px，很难看）。
      ⛔ 别把选择器写成 `.home-nav .home-nav-call > a .hn-en`(0,3,1)：那样会压过四个站，
         news/edu 的 16px/9.5px 会被抹成 15px/9px，跟上面的宫格对不上。
   ⚠️ 兜底数值＝group 与 case 的原值（15px/9px、金色 rgba(201,162,74,.95)、字距 1.2px、margin-top 6px）。 */
.home-nav-call .hn-cn{
  font-size:15px;font-weight:800;color:#fff;letter-spacing:1px;line-height:1.25;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.home-nav-call .hn-en{
  font-size:9px;font-weight:700;color:rgba(201,162,74,.95);letter-spacing:1.2px;line-height:1.2;
  margin-top:6px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;
}

/* ⚠️ 悬停/聚焦时按钮底色变金，两行字都要转深蓝 —— 
   case 站的悬停规则写的是 `.home-nav-inner a:hover .hn-en`（**不含**长条按钮），
   不在这里补，case 页悬停会出现「金字压金底」＝英文直接看不见。 */
.home-nav .home-nav-call > a:hover .hn-cn,
.home-nav .home-nav-call > a:focus-visible .hn-cn{color:#001a63;}
.home-nav .home-nav-call > a:hover .hn-en,
.home-nav .home-nav-call > a:focus-visible .hn-en{color:rgba(0,26,99,.78);}

/* ── ④ 底部留白统一（**必须写在媒体查询之前**）─────────────────────────────
   原来 group/case 是 20px、news/edu 是 54px（那 54px 是给第 43 轮已撤掉的 `.ai-strip`
   两条留的，条没了、留白还在，下面空一大块）。加了按钮之后两边更不对称 ⇒ 统一 20px。
   ⚠️ 本块与下面媒体查询**同为** `.home-nav.home-nav`（0,2,0），
      后写的赢 ⇒ 手机端那两档 16px / 14px 必须排在本块**之后**，否则被 20px 盖掉。 */
.home-nav.home-nav{padding-bottom:20px;}

/* ── ②③ 手机端：上提 + 收窄居中 ────────────────────────────────────────────
   断点 640px 与各站现有媒体查询（`.home-nav{padding:0 14px 16px}` 在 ≤640）对齐。
   各站 `margin-top` 现在都是 −56px（group/news/edu/case 实测一致）⇒ 统一提到 −72px。
   ⚠️ 收窄只改 `.home-nav-inner` 的 max-width：各站的卡片宽度都是按「inner 的 100%」
      算出来的（`flex:0 0 calc((100% - 42px)/4)` 或 `width:calc((100% - 42px)/4)`），
      ⇒ 收窄容器，卡片自动等比变窄，**不用逐个改 a 的宽度**（改了反而各站算错）。
   ⛔ 别把 max-width 设成 100%：那又贴回左右边了。

   🔴 权重说明（实测过，别回退）：下面一律多叠一个 `.home-nav`，
      因为 news / edu 的内联 `<style id="homeNavCss">` 在 body 里、排在 head 链接之后，
      同权重下它赢 ⇒ 单类名写法在 news/edu 上「写了等于没写」，页面还不报错。 */
@media (max-width:640px){
  .home-nav.home-nav{margin-top:-72px;padding-bottom:16px;}   /* ② 上提 16px，吃掉首屏深色留白 */
  .home-nav .home-nav-inner{max-width:344px;margin-left:auto;margin-right:auto;}
  .home-nav .home-nav-call{max-width:344px;margin-top:12px;gap:8px;}   /* gap 跟 ≤640 的宫格一致(8px) */
  /* 高度/圆角跟 ≤640 的宫格一致：60px / 10px（见各站 `.home-nav-inner a{height:60px}`） */
  /* flex 基宽 = 2×(100%−24)/4 + 8 ＝ (100%−24)/2 + 8（该档卡片基宽减 24、gap 8） */
  .home-nav .home-nav-call > a{flex:0 0 calc((100% - 24px) / 2 + 8px);height:60px;border-radius:10px;padding:0 8px;font-size:14px;letter-spacing:.5px;}
  /* 第 48 轮：两行字收一档，与宫格 ≤640 的 12px / 8px 逐档对齐（兜底，各站规则仍优先） */
  .home-nav-call .hn-cn{font-size:12px;letter-spacing:.5px;}
  .home-nav-call .hn-en{font-size:8px;letter-spacing:.6px;margin-top:4px;}
}

/* 超小屏（≤360px）再收一档，避免 4 列被挤到换行 */
@media (max-width:360px){
  .home-nav.home-nav{padding-bottom:14px;}
  .home-nav .home-nav-inner{max-width:308px;}
  .home-nav .home-nav-call{max-width:308px;gap:6px;}                   /* group 的 ≤360 gap 是 6px */
  /* ⚠️ 这一档卡片基宽**仍减 24px**（各站 ≤360 只把 gap 改成 6，没改基宽）⇒ X 还是 24、G 是 6。
     ⛔ 别"顺手"把它写成 −18：那样按钮会比卡片组宽 3px、左边缘偏 1.5px（第一版 grid 写法就是这么错的）。 */
  .home-nav .home-nav-call > a{flex:0 0 calc((100% - 24px) / 2 + 6px);height:56px;border-radius:10px;padding:0 6px;font-size:13px;}
}