/*
 * 英文版嘅字型同排版。
 *
 * 網站主體用 Noto Serif TC / Noto Sans TC —— 呢兩套係為漢字度身設計嘅。佢哋入面
 * 嘅拉丁字母係附送嘅，字寬、字重同 x-height 都係為咗夾漢字而調，單獨用嚟排英文
 * 會偏窄、偏重、字距唔勻。行距亦係跟漢字嘅 1.7 —— 漢字要咁鬆先透氣，但拉丁字母
 * 有升部降部，1.7 排標題就散晒。
 *
 * 所以英文版換 Newsreader（標題）+ Inter（正文），兩套都係專為拉丁文字設計，
 * 同 Noto Serif / Noto Sans 係同一種調子，唔會走樣。Noto 留喺 fallback，萬一
 * 英文版入面夾雜漢字（例如地址）都有得出。
 *
 * 只喺 <html lang="en-US"> 生效，所以繁中同简中版輸出完全無變 —— verify-all 仍然
 * 逐行 IDENTICAL。同 sc.css 一樣屬於 WordPress 層，唔會改到 docs/directions/
 * 嗰份已核准設計。
 */
html[lang="en-US"],
html[lang="en"] {
  --font-display: 'Newsreader', 'Noto Serif TC', serif;
  --font-body:    'Inter', 'Noto Sans TC', sans-serif;
}

/* 大標題：拉丁字母唔使漢字嗰種行距，收窄啲先企得穩。字重由 900 收到 600 ——
   Newsreader 嘅 600 已經夠份量，900 喺呢個尺寸會太實。 */
html[lang="en-US"] h1,
html[lang="en"] h1 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

/* 四格特點標題（誠實風控／精準定製…）。繁中每個都係四個字，一行就排完；英文
   長短差好遠（Annual Review vs Precision-Tailored Coverage），所以：
     · 行距由 1.7 收到 1.22 —— 1.7 係正文行距，做標題太散
     · 細少少，等最長嗰個「Precision-Tailored Coverage」兩行排得晒
     · 預留兩行高度，四格嘅副標題同內文先會對齊喺同一條線 */
html[lang="en-US"] .point-head strong,
html[lang="en"] .point-head strong {
  display: block;
  font-size: 19.5px;
  line-height: 1.22;
  letter-spacing: -0.008em;
  min-height: 2.44em;
}

/* Logo 係中英並排嘅 lock-up（「信言保險代理有限公司 / Asiagate Insurance
   Agencies Ltd.」），三個語言都應該保持原樣。之前英文版兩行都變咗英文名，
   係因為品牌中文名俾 Polylang 譯埋 —— 而家改為英文版唔譯呢個字串（見
   content/ui-text.json 同 seed-content.php 嘅 AGC_KEEP_SOURCE），副行照出。
   所以呢度唔使再收起副行。 */

/* 首屏引言段落。繁中原稿係方塊字，密度高，窄欄（約 378px）啱啱好；同一段英文
   要行七行，直情將兩粒按鈕推咗落首屏之外。英文放寬到 62ch —— 拉丁文字舒服嘅
   閱讀行寬係 45–75 個字元，62ch 喺呢個欄位約 534px，段落收返五行，按鈕由
   y=747 升返上 y=654。 */
html[lang="en-US"] .hp-headline p,
html[lang="en"] .hp-headline p { max-width: 62ch; }

/* 手機版頂欄。品牌行三個語言都係中文（181px），漢堡 34px，兩樣同繁中一樣。
   分別淨係報價掣：繁中「索取報價」100px，英文「Get a Quote」124px —— 多咗
   嗰 24px 就令英文版每一頁喺 390px 電話度橫向捲。
   560px 以下將英文報價掣收窄內距同細一級字（124 → 102px），實測 scrollWidth
   407 → 385px，導覽列高度 77px 不變。報價掣照留低，佢係主要嘅 lead-gen 入口，
   唔應該喺電話度消失。 */
@media (max-width: 560px) {
  html[lang="en-US"] .nav-cta,
  html[lang="en"] .nav-cta { padding: 10px 14px; font-size: 13px; }
}

/* 首屏統計條（保費透明合理 / 4 / 1 個工作天）。
   呢啲數字同標籤用緊 --font-display 1.5rem，行距跟住正文嘅 1.7 —— 嗰個係方塊
   字嘅呼吸位。繁中每格得四五個字，一行排完，1.7 只係鬆咗少少；英文「Transparent
   Premiums」「1 Business Day」會斷行，1.7 就散得好明顯。
   電話度更差：390px 三欄各得約 110px，「1 Business Day」斷成三行而「4」得一行，
   成條統計由 90px 發脹到 180px，高矮完全失衡。
   所以英文版收行距，窄屏再細一級字同收內距。實測（餐飲頁）：
     1440px 127 → 116 · 980px 90 → 82 · 600px 122 → 94 · 390px 180 → 121
   桌面版冇引入新斷行。試過 text-wrap:balance，反而令 1440px 嘅
   「Transparent Premiums」斷開兩行，所以唔用。 */
html[lang="en-US"] .hp-stat strong,
html[lang="en"] .hp-stat strong {
  line-height: 1.22;
  letter-spacing: -0.01em;
}

@media (max-width: 620px) {
  html[lang="en-US"] .hp-stat,
  html[lang="en"] .hp-stat { padding: 14px 12px; }

  html[lang="en-US"] .hp-stat strong,
  html[lang="en"] .hp-stat strong { font-size: 1rem; }
}

/* 餐飲頁 / 安老頁「為何選擇我們」一節：正文同下面四格卡之間嘅留白。
 *
 * 呢一節係左文右圖兩欄，下面再橫住一行四格卡。第一行嘅高度由右邊相片欄定
 * （相片 + 56px 下邊距），左欄嘅標題同正文排完之後剩返嘅位，就係正文同卡片
 * 之間嗰口氣。繁中正文短，剩到 73–104px；英文同一段長足足一倍（餐飲頁
 * 105 → 211px、安老頁 211 → 369px），剩返 0 —— 文末同卡頂貼實。
 *
 * 所以英文版改為明確留白，唔再靠「剩幾多得幾多」。用 margin-bottom 落左欄
 * 而唔係 margin-top 落卡片行，係因為佢會自己吸收：正文短嗰陣第一行仍然由
 * 相片欄話事，margin 食咗都唔會撐高個版；正文長先至推高，留白就出返嚟。
 *
 * 只喺雙欄闊度生效。980px 以下版面已經摺疊，兩個語言本來就有 50–67px，
 * 加多一浸反而會鬆散。
 *
 * 實測：1440px 0 → 101（繁中 104）· 1180px 0 → 82（繁中 73）
 *      980px 67 不變 · 繁中 1440px 104 不變
 */
@media (min-width: 981px) {
  html[lang="en-US"] .why-split .section-head,
  html[lang="en"] .why-split .section-head { margin-bottom: clamp(72px, 7vw, 104px); }
}

/* 保障項目清單（01 財物全險保障 / 02 公眾責任保險 …）嘅名稱。
 *
 * 原本落咗 white-space:nowrap —— 繁中每個名得五六個方塊字，一行排完，唔准
 * 斷行就唔會出現「財物全 / 險保障」呢種難睇嘅切法。英文名長好多：
 *   Employee Compensation Insurance 要 259px，格只有 161px
 *   Business Interruption Insurance 要 234px
 *   All Risks Property Coverage     要 204px
 * nowrap 之下佢哋一行衝出去，俾卡嘅 overflow:hidden 由右邊剪走 —— 卡入面
 * 見到嘅係「Employee Compensation Insuranc」，連相片都俾文字壓住。
 *
 * 英文版准斷行。實測 1440px 最大超出 98 → 0（餐飲、安老兩版都係），卡高
 * 148px / 179px 不變；390px 超出 93 → 0，卡高 59 → 72px（斷兩行要多啲位，
 * 應該嘅）。繁中／简中唔受影響，照樣 nowrap。 */
html[lang="en-US"] .cx-btn-name,
html[lang="en"] .cx-btn-name { white-space: normal; }