/* ================================================================
   ttank 官網 響應式 override 層 (RWD)
   載於 Wix 樣式之後；只在 <=980px（非桌機）時介入，桌機版完全不動。
   策略：解除 980px 固定寬 → 容器流動化 → Wix mesh grid 改 flex 直欄堆疊
   ================================================================ */

/* 平板/手機共用：<=980px */
@media screen and (max-width: 980px) {

  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* 1) 主結構容器流動化，解除固定/最小寬 */
  #SITE_CONTAINER, #main_MF, #site-root, #SITE_ROOT,
  #PAGES_CONTAINER, #SITE_PAGES, #masterPage,
  #SITE_HEADER, #SITE_FOOTER,
  [id^="pageBackground"], [id^="bgLayers_pageBackground"],
  [id^="Container"], [class*="SITE_PAGES"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #masterPage { grid-template-columns: minmax(0, 1fr) !important; }

  /* 2) 所有 section 與元件解除 min-width 造成的溢出 */
  section, [id^="comp-"], [data-mesh-id] {
    min-width: 0 !important;
  }
  section {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2b) 廣泛約束：所有 Wix 元件與其後代都不得超過視窗、且可縮
         （max-width:100% 會蓋過寫死的 width:2500px 等，消除深層溢出） */
  [id^="comp-"], [id^="comp-"] *,
  #SITE_HEADER *, #SITE_FOOTER * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 3) 核心：Wix mesh grid → flex 直欄，所有子元素改為正常流、全寬堆疊 */
  [data-mesh-id$="inlineContent"] {
    width: 100% !important;
    min-width: 0 !important;
  }
  [data-mesh-id$="gridContainer"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
  }
  [data-mesh-id$="gridContainer"] > * {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    grid-area: auto !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 4) 圖片/媒體流動化（解除 Wix 的固定 width/height 屬性） */
  img, svg, video, wow-image, wix-video, [id^="bgMedia"] img {
    max-width: 100% !important;
    height: auto !important;
  }
  [id^="img_comp-"], .wixui-image img, .wixui-vector-image svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* 4b) 導覽列 logo 例外：不要撐滿寬，維持小尺寸靠左 */
  #SITE_HEADER .wixui-vector-image,
  #SITE_HEADER [id^="comp-"] svg,
  #SITE_HEADER [id^="img_comp-"] {
    width: auto !important;
    max-width: 60vw !important;
    height: 30px !important;
    max-height: 30px !important;
  }
  #SITE_HEADER .wixui-vector-image svg { height: 100% !important; }
  /* header 更緊湊、置中 */
  #SITE_HEADER [data-mesh-id$="gridContainer"] { align-items: center !important; gap: 6px !important; }

  /* 4c) 內文強制換行，避免過長單行被視窗裁切（排除導覽列） */
  #PAGES_CONTAINER .wixui-rich-text__text,
  #PAGES_CONTAINER .wixui-rich-text,
  #SITE_FOOTER .wixui-rich-text__text {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* 4d) 內文左右留一點 gutter（圖片維持滿版），避免文字貼邊 */
  #PAGES_CONTAINER .wixui-rich-text {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* 5) 背景層維持全滿、不被上面規則壓成 auto 高 */
  [data-hook="bgLayers"], [id^="bgLayers"], [id^="bgMedia"], [id^="bgImage"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  [data-hook="bgLayers"] img, [id^="bgMedia"] img {
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 6) 解除桌機寫死的固定高度，讓區塊貼合內容（消除大片空白） */
  section, section > div,
  [data-mesh-id], [data-mesh-id] > div,
  [id^="comp-"], .wixui-box, [class~="MW5IWV"] {
    height: auto !important;
    min-height: 0 !important;
  }
  /* 圖片維持等比、背景層仍填滿所屬區塊 */
  img { height: auto !important; }
  [data-hook="bgLayers"], [id^="bgLayers"], [id^="bgMedia"], [id^="bgImage"] {
    height: 100% !important;
  }

  /* 7) 區塊上下留白，讓堆疊後的段落有節奏（取代原本靠固定高度撐出的間距） */
  #PAGES_CONTAINER section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* 8) 緊湊的手機頁首：logo 一列靠左、選單一列 */
  #SITE_HEADER, #SITE_HEADER * { height: auto !important; min-height: 0 !important; }
  #SITE_HEADER [data-mesh-id$="gridContainer"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 10px 16px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }
  #SITE_HEADER [data-mesh-id$="gridContainer"] > * {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* logo 靠左、維持小尺寸 */
  #SITE_HEADER .wixui-vector-image,
  #SITE_HEADER .wixui-vector-image svg { margin: 0 !important; align-self: flex-start !important; }
  /* 選單列：水平排列、可換行、字級縮小以完整顯示 */
  #SITE_HEADER nav, #SITE_HEADER nav ul {
    width: 100% !important; max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 用 inline-block 流動排版讓選單項目自然換行（flex 在此 Wix 選單無效） */
  #SITE_HEADER nav ul, #SITE_HEADER nav ol {
    display: block !important;
    white-space: normal !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.9 !important;
  }
  #SITE_HEADER nav li {
    display: inline-block !important;
    float: none !important;
    position: static !important;
    left: auto !important; top: auto !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    margin: 0 18px 0 0 !important;
    padding: 0 !important;
    width: auto !important;
  }
  #SITE_HEADER nav li a, #SITE_HEADER nav li a * {
    position: static !important; font-size: 13px !important; white-space: nowrap !important;
  }
  /* 隱藏 Wix 選單的「More」下拉重複項，避免與水平選單重疊 */
  #SITE_HEADER [class*="moreContainer"],
  #SITE_HEADER li[id*="more"],
  #SITE_HEADER [data-testid="more-button"] { display: none !important; }

  /* 9) 微縮首頁 hero 過大標語，避免貼邊被切（僅手機） */
  #comp-litui1lz, #comp-litui1lz * {
    font-size: 26px !important; line-height: 1.2 !important; white-space: normal !important;
  }

  /* 10) 頁尾：logo 縮成小尺寸、直向堆疊，避免大 logo 壓到文字 */
  #SITE_FOOTER [data-mesh-id$="gridContainer"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 28px 16px !important;
  }
  #SITE_FOOTER [data-mesh-id$="gridContainer"] > * { width: 100% !important; }
  #SITE_FOOTER .wixui-vector-image {
    height: 34px !important; min-height: 34px !important; max-width: 60vw !important;
  }
  #SITE_FOOTER .wixui-vector-image svg {
    width: auto !important; height: 34px !important; max-height: 34px !important;
  }
}