/* 火榜 D「夜讀接素色」共用首屏（2026-10-07 定稿：docs/總入口設計/方向預覽.html?dir=d）
 * 用在：總入口 /、分類頁 /police/ /osh/ /estate/（scripts/build-hubs.js 產生）
 *       四產品首頁 FS_PROMO／FSEQ_TECH／FSEQ_ENG／FS_ASSIST 的首屏（手改，見 docs/總入口設計/實作紀錄.txt）
 * 只管首屏；首屏以下的素色區塊由各頁自己的樣式負責。讀書頁樣式（read-comfort.css 等）不受影響。
 * 字級只用全站階梯 12／14／16／18／22／28／36／48；大標用 clamp。
 */
.hb-hero{
  --h-fg:#eceff3;--h-fg-2:#c4ccd8;--h-line:rgb(255 255 255 / .24);
  --h-accent:#ff8a4c;--h-accent-ink:#1a0e06;--hb-fade:#f4f6f9;--hb-hero-h:min(88vh,760px);
  position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;
  min-height:var(--hb-hero-h);background:#0c1118;color:var(--h-fg);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;letter-spacing:.02em;text-align:left
}
.hb-hero-img{position:absolute;inset:0;z-index:-2;margin:0}
.hb-hero-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* 左側暗部放字：左深右淺的四段漸層（照樣張） */
.hb-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgb(9 13 20 / .94) 0%,rgb(9 13 20 / .72) 38%,rgb(9 13 20 / .1) 70%)}
/* 首屏底部漸層，接到下方素色區 */
.hb-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:-1;pointer-events:none;
  background:linear-gradient(transparent,var(--hb-fade))}
@media (max-width:760px){
  .hb-hero::before{background:linear-gradient(180deg,rgb(9 13 20 / .55) 0%,rgb(9 13 20 / .78) 45%,rgb(9 13 20 / .94) 100%)}
  .hb-hero-img img{object-position:50% 0}
}
.hb-wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:clamp(16px,5vw,56px);padding-right:clamp(16px,5vw,56px);box-sizing:border-box}
.hb-hero-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:48px;padding-bottom:96px}
.hb-kicker{margin:0;font-size:14px;line-height:1.6;letter-spacing:.2em;font-weight:700;color:var(--h-fg-2)}
.hb-hero h1{margin:16px 0 20px;max-width:12em;color:var(--h-fg);
  font:900 clamp(36px,6.4vw,76px)/1.2 "Noto Serif TC","Songti TC","PMingLiU",serif;letter-spacing:.02em;text-wrap:balance}
.hb-hero h1 em{font-style:normal;color:var(--h-accent)}
.hb-hero .hb-lead{margin:0;max-width:30em;font-size:18px;line-height:1.75;color:var(--h-fg-2);text-wrap:pretty}
.hb-btns{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.hb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;
  font:700 16px/1.2 "PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;text-decoration:none;border:1px solid transparent;box-sizing:border-box}
.hb-btn.p{background:var(--h-accent);color:var(--h-accent-ink)}
.hb-btn.p:hover{background:#ff9d68}
.hb-btn.g{border-color:var(--h-line);color:var(--h-fg)}
.hb-btn.g:hover{border-color:rgb(255 255 255 / .55)}
.hb-hero a:focus-visible{outline:2px solid var(--h-accent);outline-offset:3px}
.hb-trust{display:flex;gap:8px 20px;flex-wrap:wrap;margin:28px 0 0;font-size:14px;line-height:1.6;color:var(--h-fg-2)}
.hb-trust b{color:var(--h-fg);font-variant-numeric:tabular-nums}

/* 產品首頁：導覽列在首屏之外（白底），首屏矮一點、底部接白色區塊 */
.hb-hero.is-product{--hb-hero-h:min(76vh,600px);--hb-fade:#fff;padding:0;margin:0}
.hb-hero.is-product h1{font-size:36px;max-width:14em}
@media (min-width:768px){.hb-hero.is-product h1{font-size:48px}}
.hb-hero.is-product .hb-hero-inner{padding-top:56px}
/* 標題固定兩行（逗號後的 <em> 換行）：明體字型晚到時行數不變，避免版面跳動 */
.hb-hero.is-product h1 em{display:block}
/* ≤900px 時 site-nav.js 會在導覽下方插入 45px 的「‹ 消防 › 產品名」列；先留好位置，插入後收回，首屏不被往下推 */
@media (max-width:900px){
  .hb-hero.is-product{margin-top:45px}
  .hb-mcrumb ~ main .hb-hero.is-product{margin-top:0}
}

/* 首屏上的導覽（總入口、分類頁）：白字疊在照片暗部上；考試項目下拉由 /assets/site-nav.js 填內容 */
.hb-nav{position:relative;z-index:30;display:flex;align-items:center;gap:8px;min-height:64px}
.hb-nav a{color:var(--h-fg);text-decoration:none}
.hb-nav .hb-brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:800;font-size:18px}
.hb-nav .hb-brand i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f4f6f9;color:#fff;font-style:normal;font-size:16px}
.hb-nav .hb-gap{flex:1}
.hb-nav .hb-l{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;font-weight:600;color:var(--h-fg)}
.hb-nav .nav-switch{position:relative;display:flex;align-items:center;min-height:44px}
.hb-nav .nav-switch-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--h-line);border-radius:999px;font-size:14px;font-weight:700;color:var(--h-fg);cursor:pointer;white-space:nowrap}
.hb-nav .nav-switch-btn::after{content:"\25BE";font-size:14px;margin-left:6px}
.hb-nav .nav-switch-menu{position:absolute;top:100%;right:0;min-width:200px;padding:8px;background:var(--hb-surface,#fff);border:1px solid var(--hb-line,#dfe4ec);border-radius:12px;
  box-shadow:0 12px 32px rgb(0 0 0 / .18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s}
.hb-nav .nav-switch:hover .nav-switch-menu,.hb-nav .nav-switch:focus-within .nav-switch-menu{opacity:1;visibility:visible;transform:translateY(0)}
.hb-nav .nav-switch-item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-size:14px;font-weight:600;color:#15202e}
.hb-nav .nav-switch-item:hover{background:var(--hb-raised,#eef3fb)}
.hb-nav .nav-switch-item:focus-visible{outline:2px solid #1e3a5f;outline-offset:0}
.hb-nav .nav-switch-grp{padding:8px 12px 2px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#556175}
.hb-nav .nav-switch-sep{border-top:1px solid #e3e7ee;margin-top:4px;border-radius:0 0 8px 8px}
@media (prefers-reduced-motion:reduce){.hb-nav .nav-switch-menu{transition:none}}

/* 分類頁（警察／職安／房產）：首屏矮一點，考試清單早點露出 */
.hb-hero.is-cat{--hb-hero-h:min(72vh,620px)}

/* 方案頁短首屏（2026-10-07 第二波第 2 段）：照片＋標題，不放按鈕；矮到方案卡在首屏附近就看得到。
 * 用法：<div class="hb-hero is-product is-plan">（沿用產品頁的 45px 麵包屑預留），底部接方案頁的 #f4f6f9 */
.hb-hero.is-product.is-plan{--hb-hero-h:clamp(240px,36vh,340px);--hb-fade:#f4f6f9}
.hb-hero.is-plan .hb-hero-inner{padding-top:40px;padding-bottom:88px}
.hb-hero.is-plan::after{height:64px}
.hb-hero.is-plan h1{margin:12px 0 12px}
.hb-hero.is-plan .hb-lead{font-size:16px}
/* 方案頁的首屏在 <main> 外面（緊接導覽），麵包屑插入後一樣收回預留的 45px */
@media (max-width:900px){.hb-mcrumb ~ .hb-hero.is-product{margin-top:0}}
@media (max-width:760px){
  .hb-hero.is-product.is-plan{--hb-hero-h:auto}
  .hb-hero.is-plan .hb-hero-inner{padding-top:32px;padding-bottom:72px}
  .hb-hero.is-plan::after{height:48px}
  .hb-hero.is-plan .hb-hero-img img{object-position:50% 35%}
}

/* 第三波：產品名較長的首屏大標，手機斷行不切在詞中間（只有加了 .nw 的字才生效） */
.hb-hero h1 .nw{white-space:nowrap}
@media (min-width:761px) and (max-width:1100px){.hb-hero .hb-lead{max-width:min(30em,60vw)}}