/**
 * 公開站共用頁尾樣式（public-site-footer-css-shared，2026-09-12）。
 *
 * 由來：for-doctors.css 與 for-patients.css 各自帶著一份 footer 樣式，18／19 條規則、
 * 逐條比對只有 11 個宣告不同，其中 8 個是顏色。改一次 footer 樣式要動兩個檔，
 * 而且沒有任何守門會提醒你漏了一個。
 *
 * 主色差異【刻意保留】（Wayne 2026-09-12 裁決）：醫師頁藍、病患頁綠，與各頁
 * 導覽列的 --nav-accent 一致。作法比照 site-nav.css：這裡定義預設值，各頁在自己的
 * 樣式裡覆寫 :root 變數。載入順序因此是「本檔在前、各頁 CSS 在後」。
 *
 * 舊主站 css/style.css 也有一份 footer 樣式，走 common.php → head.php 那條載入路徑，
 * 字級整體小一號。【不在本次範圍】（Wayne 2026-09-12 裁決）——那是另一個頁面家族。
 *
 * 標記【不共用】：兩頁的品牌說明、服務欄位、交叉導流與免責聲明本來就對不同對象
 * 講不同的話，不是重複。只有樣式是純重複。
 *
 * 三個非顏色差異也做成變數，兩頁各自宣告，不統一：
 *   --footer-margin-top  醫師頁 40px、病患頁 0
 *   --footer-z           醫師頁 1、病患頁 2
 * 唯一併入本檔的單邊規則是 @media(max-width:700px) .homeFooterBase{text-align:left}
 * （原本只有病患頁有）。對醫師頁是 no-op：.homeFooterBase 的祖先鏈上沒有任何
 * text-align 宣告（該頁僅有的 text-align:center 都落在 .why-head / .duty-title /
 * .day-head / .doctor-cta-section 等與頁尾無關的選擇器上），因此併入不改變其算繪。
 *
 * 🔴 2026-09-12 欄數修正：桌機 grid 原本只有 3 軌，但 .homeFooterCols 底下有 4 個子元素
 *    （品牌 ＋ 三個導覽欄），第 4 個「關於本站」因此掉到第二排，還繼承第 1 欄的寬度被撐開。
 *    兩頁都中，而且是這三條 lane 之前就存在的。改成 4 軌之後四者同排，footer 高度 579 → 356px。
 *    實測品牌段落仍是 2 行（527 → 469px），沒有因為變窄而多折。
 *    手機（≤700px）不受影響：media query 覆蓋成 1fr 1fr。
 */

:root{
  /* 預設值＝主站藍系，與 site-nav.css 的 --nav-accent 預設同一族。
     實際使用的兩頁都會覆寫；這組只在「有新頁面引入本檔卻忘了設變數」時兜底。 */
  --footer-grad-a:#156082;
  --footer-grad-b:#0e3f57;
  --footer-ink:#eef4f8;
  --footer-ink-rgb:238,244,248;
  --footer-head:#a9cdec;
  --footer-z:1;
  --footer-margin-top:0;
}

.homeFooter { position:relative; z-index:var(--footer-z); background:linear-gradient(160deg,var(--footer-grad-a) 0%,var(--footer-grad-b) 100%); color:var(--footer-ink); padding:clamp(40px,5vw,64px) 0 26px; margin-top:var(--footer-margin-top); }
.hf-wrap { max-width:1760px; margin:0 auto; padding:0 40px; }

@media (max-width:540px) {
  .hf-wrap { padding:0 20px; }
}
.homeFooterCols { display:grid; grid-template-columns:1.5fr .75fr .75fr .75fr; gap:clamp(24px,4vw,60px); padding-bottom:28px; border-bottom:1px solid rgba(var(--footer-ink-rgb),.16); }
.homeFooterBrand .logoRow { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.homeFooterBrand .logoRow img { height:34px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.homeFooterBrand .name { font-weight:700; font-size:18px; color:#fff; line-height:1.4; }
.homeFooterBrand .en { display:block; font-size:13px; letter-spacing:.04em; color:rgba(var(--footer-ink-rgb),.6); font-weight:400; }
.homeFooterBrand p { margin:0; font-size:15.5px; line-height:1.95; color:rgba(var(--footer-ink-rgb),.85); max-width:34em; text-wrap:pretty; }
.homeFooterCol .h { font-size:14px; font-weight:700; letter-spacing:.16em; color:var(--footer-head); margin-bottom:12px; }
.homeFooterCol ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.homeFooterCol a { display:inline-block; padding:8px 0; text-decoration:none; color:rgba(var(--footer-ink-rgb),.88); font-size:16px; line-height:1.7; transition:color .15s ease; }
.homeFooterCol a:hover { color:#fff; text-decoration:underline; text-underline-offset:3px; }
.homeFooterBase { padding-top:18px; font-size:14px; color:rgba(var(--footer-ink-rgb),.55); }
.homeFooterBase .hf-disc { font-size:14px; line-height:1.8; color:rgba(var(--footer-ink-rgb),.55); margin:0 0 8px; text-wrap:pretty; }

@media (max-width:700px) {
  .homeFooterCols { grid-template-columns:1fr 1fr; gap:26px 18px; }
  .homeFooterBrand { grid-column:1 / -1; }
  .homeFooterCol a { padding:11px 0; }
  .homeFooterBase { text-align:left; }
}