/* responsive-fix.css — 全站響應式防溢出層（唯一事實來源）
   由 serve.mjs 回應期注入 head 末端（原始鏡像 HTML 零修改；移除注入即完全還原）。
   已整併舊 responsive-guard.css v3 全部規則（該檔與 695 個 HTML 內嵌 link 已移除）。
   使用者裁示（0死角標準）：任何寬度下——
   ① 無頁面級水平捲軸 ② 無內部滑動視窗（表格/欄位/清單/代碼一律換行或堆疊收斂）。
   注入位置在所有主題/外掛 CSS 之後 → 同權重規則本檔必勝；!important 僅用於
   對抗原站 !important 或 body 內後載 <style>。 */

/* ── 1) 頁面級保險：禁止水平溢出 ──
      clip 不建立捲動容器、不破壞 position:sticky；hidden 為舊瀏覽器 fallback。
      同時吞掉 100vw 滿版技巧（alignfull 負邊距）因垂直捲軸寬度造成的 ~15px 溢出。 */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── 2) 媒體元素永不超出容器 ──
      max-width 恆約束 width（含 inline style width 與 HTML width 屬性）；
      img 的 height:auto 防「寬被縮、height 屬性未縮」變形。 */
img, video, canvas { max-width: 100%; height: auto; }
iframe, embed, object, svg { max-width: 100%; }

/* ── 3) 文字斷行 ──
      body 級 overflow-wrap 可繼承、全站生效；th/td 用 anywhere（參與
      min-content 計算，是表格能縮進 320px 的關鍵；寬螢幕空間充裕時
      不會實際觸發斷行，視覺無感）。 */
body { overflow-wrap: break-word; }
th, td { overflow-wrap: anywhere; }

/* ── 4) 代碼塊：折行取代橫向捲軸（任何寬度零內部滑動視窗）──
      行級翻譯以「行」為單位保留結構，pre-wrap 僅視覺換行不破壞內容。
      .hcb_wrap 雙類名為特異性保險（外掛選擇器權重高於裸 pre）。 */
pre {
  white-space: pre-wrap !important;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: visible !important; /* 蓋掉高亮外掛自帶的 overflow-x:auto 內部捲軸 */
}
code { overflow-wrap: break-word; }
.hcb_wrap.hcb_wrap > pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hcb_wrap.hcb_wrap > pre > code { white-space: inherit; }

/* ── 5) 表格：任何寬度不出內部捲軸 ── */
table { max-width: 100%; }
@media (max-width: 782px) {
  table { width: 100% !important; min-width: 0 !important; }
}
/* is-style-table__scroll(-side)「橫滑表格」樣式：wrapper overflow-x:scroll＋
   內表固定 780px。0死角標準是任何寬度皆不得有內部滑動視窗，故不分斷點
   一律收斂：內表隨欄寬縮放、wrapper 改 auto（內容必定收斂 → auto 永不出軌，
   同時避免 scroll 值在傳統捲軸平台留下空捲軸軌）。 */
.wp-block-table.is-style-table__scroll,
.wp-block-table.is-style-table__scroll-side {
  overflow-x: auto !important;
}
.wp-block-table.is-style-table__scroll > table,
.wp-block-table.is-style-table__scroll-side > table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
/* 主題側滑表格 custom-post 變體（目前無頁面使用，保底） */
.wp-block-table.is-style-custom-post-table-scroll-side {
  white-space: normal;
  overflow: visible;
  scroll-snap-type: none;
}

/* ── 6) 表單控件不超出容器 ── */
input, select, textarea { max-width: 100%; }

/* ── 7) WP 對齊變體保底 ── */
.alignfull, .alignwide { max-width: 100vw; }

/* ── 8) 主題「橫滑設計」中和（任何寬度一律換行/堆疊）── */
/* is-epb-scroll 系列：桌面也生效的橫滑欄（含全形底線＿類名變體）→ 換行 */
.wp-block-columns.is-epb-scroll,
.wp-block-columns.is-epb-scroll＿tablet,
.wp-block-columns.is-epb-scroll＿tablet-only {
  flex-wrap: wrap !important;
  overflow: visible;
  scroll-snap-type: none;
}
.wp-block-columns.is-epb-scroll .wp-block-column,
.wp-block-columns.is-epb-scroll＿tablet .wp-block-column,
.wp-block-columns.is-epb-scroll＿tablet-only .wp-block-column {
  min-width: min(260px, 100%);
  max-width: 100%;
}
/* epb-swipe 橫滑投影片 → 換行堆疊 */
.epb-swipe[data-direction=x] {
  flex-wrap: wrap;
  touch-action: auto;
  scroll-snap-type: none;
}
.epb-swipe[data-direction=x] > * { max-width: 100%; }
/* epb-tab-row 標籤列 → 換行 */
.epb-tab.is-style-epb-tab-row .epb-tab__list { flex-wrap: wrap; }

/* 主題行動版（@599 斷點與主題一致） */
@media screen and (max-width: 599px) {
  /* Emanon Premium Blocks 橫滑欄 → 直向堆疊 */
  .epb-columns.epb-has-horizontal-scroll .epb-columns__inner {
    flex-wrap: wrap;
    overflow: visible;
    scroll-snap-type: none;
  }
  .epb-columns.epb-has-horizontal-scroll .epb-columns__inner > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
  /* u-item-scroll 滑動清單（主題原規則帶 !important，須同強度覆蓋）→ 換行堆疊 */
  .u-item-scroll {
    flex-wrap: wrap !important;
    overflow: visible;
    scroll-snap-type: none;
  }
  .u-item-scroll::after { content: none; }
  .u-item-scroll__item {
    min-width: min(260px, 100%);
    max-width: 100%;
  }
  .u-item-scroll__item-min {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── 9) 輪播箭頭：條件式收回視口內 ──
      三個 demo 容器把箭頭定位在容器外側（-40px／-60px），視口不夠寬時
      （320px～約1300px）會被裁切。max()：外側邊距 (100vw-100%)/2 足夠時
      維持原值（寬桌面設計不變），不足時貼回視口內緣（+8px 安全邊距，
      吸收傳統捲軸的 100vw 誤差）。全站掃描確認負偏移僅此三個 selector；
      !important 對抗 body 內後載 <style>。 */
.slide-featured .splide__arrow--prev {
  left: max(-60px, calc((100% - 100vw) / 2 + 8px)) !important;
}
.slide-featured .splide__arrow--next {
  right: max(-60px, calc((100% - 100vw) / 2 + 8px)) !important;
}
.eb-case-section .splide__arrow--prev,
.lp-testimonial .splide__arrow--prev {
  left: max(-40px, calc((100% - 100vw) / 2 + 8px)) !important;
}
.eb-case-section .splide__arrow--next,
.lp-testimonial .splide__arrow--next {
  right: max(-40px, calc((100% - 100vw) / 2 + 8px)) !important;
}

/* ── 10) inline style 固定像素高度的內容圖片 ──
      窄螢幕寬度被 max-width 壓縮後 inline height 不會跟著縮 → 比例失真。
      僅 ≤782px 以 !important 改回 auto；排除 height:auto（本來就對）與
      object-fit（刻意裁切構圖由 cover/contain 吸收，不算失真）。
      頭像/Logo 多用 width/height「屬性」而非 inline style，不受影響。 */
@media (max-width: 782px) {
  img[style*="height:"]:not([style*="height:auto"]):not([style*="object-fit"]) {
    height: auto !important;
  }
}