/* ============================================================================
   styles.patch.css — 針對架構師樣式的覆寫
   ----------------------------------------------------------------------------
   只處理三件事：
     1. 插畫面板的底色對齊素材自帶底色（消除白色方框，不需去背）
     2. 深色截圖不再出現黑色硬框
     3. 節奏 CSS 需要的一致性微調
   其餘版面樣式一律沿用架構師原本的 styles.css。
   ========================================================================= */

/* ---- 1. 服務區塊的插畫面板：底色對齊素材 ----------------------------- */
/* 原本 .svc-panel 用 --panel-2（#EEF6FF），插畫自帶底色偏白，接縫明顯。
   改成插畫自己的底色家族後，接縫消失。 */
.svc-panel {
  background: linear-gradient(135deg, var(--surface-illustration-a) 0%, var(--surface-illustration-b) 100%);
  box-shadow: var(--shadow-soft);
}
.svc-panel-art .slot {
  background: linear-gradient(135deg, var(--surface-illustration-a) 0%, var(--surface-illustration-b) 100%);
  border-radius: var(--radius-md);
}

/* 插槽本身負責底色，面板不要再疊一層 */
.svc-panel-art .slot-img { box-shadow: none; border-radius: 0; }

/* ---- 2. 痛點區塊的照片欄：改成插槽後不要雙重圓角 --------------------- */
.why-art .slot { height: 100%; }
.why-art .slot-pending { height: 100%; aspect-ratio: auto; min-height: 240px; }

/* ---- 3. 流程區塊的素材欄 --------------------------------------------- */
.cost-art .slot { width: 100%; }

/* ---- 4. 首屏：hero-art 已由 .slot[data-variant="bleed"] 接手 ---------- */
.hero-art { display: none; }

/* ---- 4b. 服務卡片與案例分層後的分隔 --------------------------------- */
.svc { margin-bottom: 0; }
.svc + .svc-cases { margin-top: 8px; }
.tab-panel { padding-bottom: 4px; }

/* ---- 5. 大號區塊編號：數字與文字要對齊基線 --------------------------- */
.eyebrow { align-items: center; }
.eyebrow::before { line-height: 1; }

/* ---- 6. 深色區塊的內距：過渡帶會蓋到內容，補回來 --------------------- */
#how { padding-bottom: calc(var(--gap-loose) + var(--fade) * .35); }

/* ============================================================================
   6b. hero 配圖與配重（需求 1）
   ----------------------------------------------------------------------------
   第一輪實測（1920x1080）：
     修改前  插畫欄起點 x=982，但內容容器右緣是 x=1491
             → 920px 寬的插畫欄裡只有約 80px 落在可讀範圍內
             → 內容高 415px vs 首屏高 607px，下半留白無人接手
             → 文字右緣與插畫左緣是 −57px（重疊），卻仍覺得空

   第二輪發現（把 hero.png 縮到 960px，逐欄量測與背景色的差異）：
     插畫本身有 62% 是漸層空段，主體（玻璃穹頂）只佔右 38%。
     所以插畫欄擺對了也沒用——文字右緣到主體之間仍隔著約 600px 的空段。
     這才是「圖與文本差距太大、空間感不足」的真正來源。

   解法：
     B-1  首屏容器 1080 → 1240px（只改首屏，其餘區塊不動）
     B-2  文字欄 600 → 640px
     B-3  插畫只取原圖右 58%（裁掉空段），主體才填得滿
     B-4  插畫不再死貼頁面右緣，改為距右緣留白
     A    淡出改為三向（左／右／下）—— mask 定義在 assets.css 的 bleed 變體
   ========================================================================= */
.hero {
  /* 這三個變數是調校首屏配圖的主要入口：
       --hero-art-inset  插畫與頁面右緣之間的留白（覺得太貼右邊就調大）
       --hero-art-w      插畫欄寬度（覺得太大或太小就調這個）
       --hero-copy-w     文字欄寬度（調寬 → 文字右緣更靠近插畫，落差變小）
     --hero-copy-left 是文字欄左緣的位置，由容器寬度推導，供 assets.css
     計算「插畫最寬可以到多少而不壓到文字」時使用。容器一改，這裡要跟著改。 */
  --hero-wrap-w: 1240px;
  --hero-wrap-pad: 30px;
  --hero-art-inset: 60px;
  --hero-art-w: 36%;
  --hero-copy-w: 700px;
  --hero-copy-left: max(0px, calc((100vw - var(--hero-wrap-w)) / 2 + var(--hero-wrap-pad)));
}

@media (min-width: 981px) {
  /* B-1 首屏容器加寬 */
  .hero .wrap { max-width: 1240px; }
  /* B-2 文字欄隨視窗等比收放：大螢幕 700px、小螢幕收到 540px。
     固定 700px 在 1366 這種寬度會把文字壓到插畫上（實測落差 −6px），
     所以這裡用 vw 讓它自己讓位。 */
  .hero-copy { max-width: clamp(540px, 52vw, var(--hero-copy-w)); }
}

/* 1200 以上：容器一寬，插畫就該在同一個斷點跟著調整 */
@media (min-width: 1200px) {
  .hero .wrap { max-width: 1240px; }
}

/* 更寬的螢幕：留白再多一點，文字欄也再寬一點 */
@media (min-width: 1680px) {
  .hero { --hero-art-inset: 72px; --hero-art-w: 37%; --hero-copy-w: 740px; }
}

/* ============================================================================
   6c. 三語切換鈕（繁 / 简 / EN）
   ----------------------------------------------------------------------------
   原本是兩段式的單一按鈕（中文 / EN）來回切換。
   改成三段之後，三個語言各自是獨立按鈕，直接點選要去的語言，
   不必再「切一輪」。外框仍沿用原本的藥丸形狀，維持一致。
   ========================================================================= */
.lang-toggle {
  padding: 5px 12px;
  gap: 2px;
  cursor: default;      /* 容器本身不可點，只有裡面的按鈕可點 */
}
.lang-toggle .lang-opt {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 3px 7px;
  margin: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--sub);
  opacity: .55;
  cursor: pointer;
  line-height: 1.35;
  transition: opacity .15s, color .15s, background-color .15s;
}
.lang-toggle .lang-opt:hover { opacity: 1; }
.lang-toggle .lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.lang-toggle .lang-opt.active {
  opacity: 1;
  color: var(--accent);
  background: var(--accent-soft);
}
.lang-toggle .lang-sep {
  color: var(--line);
  font-size: 13px;
  user-select: none;
}

/* ---- 7. 響應式 -------------------------------------------------------- */
@media (max-width: 980px) {
  .svc-panel-art .slot-img { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 680px) {
  .why-art .slot-pending { min-height: 200px; }
}