/* =============================================================
   和肽生醫 HelixTide — 多語言層（v1.0，階段 5）
   載入順序：… → motion.css → i18n.css（最後，確保顯隱規則不被覆寫）
   機制：每個文字節點包 4 個 span（zh / zhs / en / ja），由 html[lang] 決定顯示哪一個。
        預設語言 zh-Hant 不依賴 JS；屬性與 meta 由 site.js 切換。
   ============================================================= */

/* ---------- 1. 語言 span 顯隱 ---------- */
/* 先全部隱藏（特異性 0,2,1，足以壓過一般元件規則），再顯示當前語言那一個。 */
html[lang] [class^="i18n-"] { display: none; }

html[lang="zh-Hant"] .i18n-zh,
html[lang="zh-Hans"] .i18n-zhs,
html[lang="en"] .i18n-en,
html[lang="ja"] .i18n-ja {
  display: revert;   /* 還原為該元素的預設 display（span → inline） */
}

/* ---------- 2. 語言專屬字型微調 ---------- */
/* 英文以 Bricolage Grotesque 展示體呈現大標，字距與行高需微調 */
html[lang="en"] .section__title,
html[lang="en"] .hero__title,
html[lang="en"] .page-hero__title,
html[lang="en"] .band__quote {
  letter-spacing: -0.02em;
  line-height: 1.08;
}
/* 日文漢字字面較大，標題略收一級避免擁擠 */
html[lang="ja"] .section__title,
html[lang="ja"] .page-hero__title {
  letter-spacing: 0.01em;
  line-height: 1.18;
}
/* 英文與日文的內文行高略放，維持閱讀節奏 */
html[lang="en"] .section__lead,
html[lang="en"] .card p,
html[lang="ja"] .section__lead,
html[lang="ja"] .card p { line-height: 1.75; }

/* ---------- 3. 拉丁文字斷行 ---------- */
/* 英文長句在窄容器容易出現單字孤行，交由瀏覽器平衡 */
html[lang="en"] .section__title,
html[lang="en"] .card h3,
html[lang="ja"] .section__title { text-wrap: balance; }

/* ---------- 4. 減少動效：語言切換不做淡入 ---------- */
@media (prefers-reduced-motion: reduce) {
  .i18n-swapping { transition: none !important; }
}