/* =============================================================
   和肽生醫 HelixTide — 圖上文字對比強化層（v0.9）
   用途：全幅影像橫幅（.hero / .band / .page-hero）上的文字可讀性。
   策略：不換圖，改以「三層工法」讓白字在任何底圖都站得住——
         ① 遮罩加深（scrim，含底部漸層）
         ② 文字光暈（text-shadow 多層描邊）
         ③ 漸進式毛玻璃文字卡（@supports backdrop-filter）
   遵守 prefers-reduced-motion；不依賴 JS。
   載入順序：接在 site.css 之後，以覆寫既有 overlay / 字色宣告。
   ============================================================= */

/* ---------- 1. 遮罩加深：深藍 scrim + 底部漸層壓暗 ---------- */
/* 頂部最暗（承接 navbar），中段維持品牌雙色，底部再加一層暗，
   確保靠下的標題與 CTA 也落在低亮度區，白字不糊。 */
.hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(16, 44, 84, 0.62) 0%,
      rgba(20, 61, 111, 0.30) 38%,
      rgba(16, 44, 84, 0.46) 78%,
      rgba(12, 34, 64, 0.70) 100%),
    linear-gradient(160deg,
      rgba(22, 61, 111, 0.72) 0%,
      rgba(46, 94, 170, 0.44) 46%,
      rgba(91, 139, 128, 0.42) 100%);
}

/* 圖帶遮罩：方向性（左深右透），文字落在深色側、照片從右側露出。
   ⚠️ 此規則必須留在 contrast.css —— 載入順序是 site.css → contrast.css，
      寫在 site.css 會被這裡覆蓋（曾因此讓底圖完全看不出來）。
   底圖已在產生時預先染深（雙色調 #0E2140→#A8C4DA），故遮罩不需太濃。 */
.band__overlay {
  background:
    linear-gradient(90deg,
      rgba(10, 30, 58, 0.52) 0%,
      rgba(12, 36, 66, 0.48) 45%,
      rgba(16, 46, 84, 0.22) 72%,
      rgba(22, 61, 111, 0.08) 100%),
    linear-gradient(160deg, rgba(22, 61, 111, 0.12) 0%, rgba(91, 139, 128, 0.10) 100%);
}
/* 雙欄圖帶（左引言、右說明）文字橫跨整個寬度，右端需保留較多暗度。 */
/* 漸層圖帶本身已足夠深，不需再疊遮罩 */
.band--flat .band__overlay { background: none; }
.band--split .band__overlay {
  background:
    linear-gradient(90deg,
      rgba(10, 30, 58, 0.50) 0%,
      rgba(12, 36, 66, 0.42) 36%,
      rgba(14, 42, 76, 0.32) 66%,
      rgba(18, 52, 92, 0.24) 100%),
    linear-gradient(160deg, rgba(22, 61, 111, 0.12) 0%, rgba(91, 139, 128, 0.10) 100%);
}

.page-hero__overlay {
  background:
    linear-gradient(180deg,
      rgba(16, 44, 84, 0.44) 0%,
      rgba(20, 61, 111, 0.22) 42%,
      rgba(12, 34, 64, 0.62) 100%),
    linear-gradient(135deg,
      rgba(22, 61, 111, 0.68) 0%,
      rgba(46, 94, 170, 0.40) 55%,
      rgba(91, 139, 128, 0.38) 100%);
}

/* ---------- 2. 文字光暈：讓白字離底有「厚度」 ---------- */
/* 多層短半徑暗影＝柔邊描邊，深淺底圖皆可辨識。 */
/* 註：`base.css` 的 `h1,h2,h3,h4{color:var(--ht-text)}` 特異性高於容器繼承，
   故內層標題必須在此明確宣告色值，否則會拿到深色字而糊在深底上。 */
.hero__title,
.band__quote,
.page-hero__title {
  color: #FFFFFF;
  text-shadow:
    0 1px 2px rgba(8, 24, 46, 0.62),
    0 2px 10px rgba(8, 24, 46, 0.50),
    0 10px 34px rgba(8, 24, 46, 0.42);
}
.hero__sub,
.hero__title + .hero__sub,
.band__note,
.page-hero__sub {
  color: rgba(248, 250, 252, 0.97);
  text-shadow:
    0 1px 2px rgba(8, 24, 46, 0.66),
    0 2px 12px rgba(8, 24, 46, 0.46);
}

/* 標題內的 inline span / em 也須維持白（部分文案用 span 做次級字級） */
.hero__title span,
.page-hero__title span,
.band__quote span,
.hero__sub span,
.page-hero__sub span,
.band__note span { color: inherit; }

/* eyebrow（小標）：細字最易被吃掉 → 給實底髮絲線 + 文字光暈 */
.hero .eyebrow,
.band .eyebrow,
.page-hero .eyebrow {
  color: #EAF2F7;
  border-color: rgba(234, 242, 247, 0.55);
  background: rgba(12, 34, 64, 0.28);
  text-shadow: 0 1px 2px rgba(10, 28, 52, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* 深底 Hero 上的副標 / 提示字，統一拉到高對比白 */
.hero__sub, .band__note, .page-hero__sub { color: rgba(248, 250, 252, 0.96); }

/* ---------- 3. 漸進式毛玻璃文字卡（僅支援 backdrop-filter 時） ---------- */
/* 在不透明底圖上，為主要文字加一層極淡暗底 + 模糊，
   形成「文字卡」；不支援的瀏覽器自動退回第 1、2 層工法。 */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .page-hero__inner,
  .hero__inner {
    /* 保持版面：僅以 padding + 圓角營造卡片感，避免文案貼邊 */
    padding-inline: clamp(var(--sp-4), 3vw, var(--sp-7));
    border-radius: var(--radius-lg);
  }
  .page-hero__inner {
    background: linear-gradient(120deg, rgba(10, 30, 58, 0.62) 0%, rgba(10, 30, 58, 0.42) 58%, rgba(10, 30, 58, 0.20) 100%);
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 24px 60px -30px rgba(6, 20, 40, 0.55);
  }
  /* 圖帶不再使用文字卡（2026-09-15）：
     原本的深藍玻璃卡以水平漸層淡出，右緣幾乎透明 → 讀起來像破掉的框而非刻意的面板。
     改由 site.css 的「方向性遮罩」承擔對比（左深右透，文字落在深色側）。 */
}

/* 首頁 Hero 置中版面：改用對稱柔暈，避免文字卡切邊 */
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .hero .hero__inner {
    background: radial-gradient(128% 86% at 50% 44%, rgba(10, 30, 58, 0.66) 0%, rgba(10, 30, 58, 0.44) 48%, rgba(10, 30, 58, 0.10) 82%, rgba(10, 30, 58, 0) 100%);
    backdrop-filter: blur(4px) saturate(112%);
    -webkit-backdrop-filter: blur(4px) saturate(112%);
  }
}

/* ---------- 4. 深底 Button 再強化（ghost 在白字環境的辨識） ---------- */
.hero .ht-btn--ghost,
.page-hero .ht-btn--ghost,
.band .ht-btn--ghost {
  background: rgba(251, 252, 253, 0.14);
  border-color: rgba(251, 252, 253, 0.62);
  color: #FBFCFD;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.hero .ht-btn--ghost:hover,
.page-hero .ht-btn--ghost:hover,
.band .ht-btn--ghost:hover {
  background: rgba(251, 252, 253, 0.24);
  border-color: #FBFCFD;
  box-shadow: 0 0 0 4px rgba(251, 252, 253, 0.22);
}

/* ---------- 4b. 深底 LOGO 可辨識 ---------- */
/* 深底一律使用「白色版」LOGO 檔（helix-tide-white / le-esponeux-white），
   不再對彩色版加白暈——白暈會讓字標糊成一團，反而降低清晰度。
   此處僅補一層極淡的深色投影，讓白字標在底圖亮部仍有輪廓。 */
.hero__logo,
.page-hero__inner .brand-logo,
.hero__inner .brand-logo {
  filter: drop-shadow(0 2px 10px rgba(8, 24, 46, 0.42));
}

.le-hero .le-logo,
.page-hero .le-logo {
  filter: drop-shadow(0 2px 12px rgba(8, 24, 46, 0.48));
}

/* nav LOGO 在毛玻璃 header 上若底圖偏深，補一層極淡白暈保持清楚 */
.site-header .brand-logo.logo-h {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.65));
}

/* ---------- 5. 降級：不支援 backdrop-filter 時，遮罩再壓暗一階 ---------- */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(14, 38, 72, 0.74) 0%, rgba(18, 52, 96, 0.58) 45%, rgba(12, 34, 64, 0.76) 100%);
  }
  .band__overlay {
    background:
      linear-gradient(90deg, rgba(10, 30, 58, 0.66) 0%, rgba(12, 36, 66, 0.60) 45%, rgba(16, 46, 84, 0.34) 72%, rgba(22, 61, 111, 0.20) 100%);
  }
  .page-hero__overlay {
    background:
      linear-gradient(180deg, rgba(14, 38, 72, 0.62) 0%, rgba(18, 52, 96, 0.54) 50%, rgba(12, 34, 64, 0.70) 100%);
  }
}

/* ---------- 6. 無障礙：強制高對比模式 ---------- */
@media (prefers-contrast: more) {
  .hero__overlay, .band__overlay, .page-hero__overlay {
    background: linear-gradient(rgba(10, 30, 58, 0.80), rgba(10, 30, 58, 0.80));
  }
  .hero__title, .band__quote, .page-hero__title { text-shadow: none; }
}

/* 減少動效：不動畫，僅確保可讀 */
@media (prefers-reduced-motion: reduce) {
  .hero__inner, .band__content, .page-hero__inner { backdrop-filter: none; -webkit-backdrop-filter: none; }
}