/* =====================================================================
   bt-rwd.css — openworld.tv 行動版相容層（2026-08-22）

   為什麼需要：
     style.css（43.9 KB）沒有任何 @media，版面是固定 1120px ＋ 110 處 float，
     #menu 還有 min-width:1140px。GSC 2026-08-01～20 顯示手機佔 57% 點擊、
     52% 曝光 —— 一半以上的訪客每一頁都得橫向捲動。

   這一層做什麼：只讓版面塞得進螢幕、內容讀得到，不是重新設計。
     - 容器由固定寬改流體（選擇器清單是從 style.css 反推出來的，
       涵蓋全部 74 個寬度 ≥400px 的規則，不是逐一目測挑的）
     - 側欄與主欄在窄螢幕堆疊
     - 卡片網格改百分比欄寬、高度自動
     - 輪播容器改比例盒（不能直接 height:auto —— 它的 <li> 是絕對定位，
       容器會塌成 0 高，主圖整個消失）
     - 首頁大圖馬賽克（JS 產生的固定 px 拼貼）在窄螢幕收起

   掛法：CtaInject.php 在 </head> 前注入 <link>，排在 style.css 之後。
   回滾：把這個檔清空即可，不必動任何 PHP。
   ===================================================================== */

/* =====================================================================
   Tier 1（≤1180px）：容器流體化
   ===================================================================== */
@media (max-width: 1180px) {

  html, body { overflow-x: hidden; }

  /* ---- 主要容器 ---- */
  #wrapper,
  #header,
  #main,
  #footer2 {
    width: auto !important;
    max-width: 1120px !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #wrapper { padding: 0 12px !important; }
  #main    { padding: 24px 0 10px 0 !important; }

  /* ---- 頁首 ---- */
  #header { height: auto !important; overflow: visible !important; }
  .logoTop {
    position: static !important;
    width: auto !important;
    height: auto !important;
  }
  #header .logoTop img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  /* JS 產生的照片拼貼是寫死 px 的馬賽克，窄螢幕收起 */
  .showPhoto,
  .headerPhoto,
  .headerPhotoBtn { display: none !important; }

  /* ---- 主選單（原本 position:absolute; top:535px; min-width:1140px）---- */
  #menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    background-size: cover !important;
  }
  /* .nav a 原本是 width:70 + padding-left:30（圖示 sprite 畫在這 30px 裡）
     + margin-right:40 = 每項 140px，六項剛好 840px。窄螢幕塞不下的主因是
     那個 40px 右邊距，不是排版方式 —— 所以維持原本的 inline 流，只縮邊距。
     不要改 .nav a 的 padding，會把背景圖示的位置推掉。 */
  .nav {
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 8px 0 !important;
    text-align: center !important;
    font-size: 0 !important;
  }
  .nav a {
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0 8px 6px 0 !important;
  }

  /* ---- 主欄與側欄堆疊，且側欄排到最後 ----
     .contL 是左側欄（Follow Us／Share Us／Contact Us／廣告），實測高度
     1,225px。直接堆疊的話手機使用者要先捲過整段側欄才看得到設計師名單。
     用 flex order 把它移到主欄之後，其餘子元素維持原本順序。 */
  #main {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: column !important;
    flex-direction: column !important;
  }
  #main > .contL { -webkit-order: 9 !important; order: 9 !important; }

  .contR { float: none !important; width: 100% !important; }
  .contL {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-top: 28px !important;
    margin-bottom: 0 !important;
  }

  /* ---- 通用流體化（清單由 style.css 反推，涵蓋所有 ≥400px 的固定寬）---- */
  .aboutContent,
  .aboutRoute,
  .ad,
  .articlClass,
  .articlClass2,
  .articleList,
  .contactDesigner,
  .contactDesignerC,
  .contactInfo,
  .contactInfoAll,
  .contactInfoAll > .ww,
  .contentDesigner,
  .control,
  .controlBar,
  .date2,
  .infoW,
  .introductionMedia,
  .introductionNews,
  .introductionNews1,
  .introductionNewsMsg,
  .introductionTalk,
  .introductionWork,
  .listMsg1 .listMsgCon,
  .listVoteTitle,
  .mediaD_content,
  .moreBtn,
  .moreBtnMsg,
  .recommendationList,
  .relatedD_content,
  .relativeMedia,
  .relativeTalk,
  .relativeWork,
  .route,
  .search,
  .selectionBtn,
  .talkD_content,
  .title,
  .videoName,
  .viewportDesigner,
  .viewportNews,
  .viewportPic,
  .viewportProduct,
  .viewportWork,
  .voteBox {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .designer,
  .product,
  .viewportDesigner,
  .viewportNews,
  .viewportPic,
  .viewportProduct,
  .viewportWork {
    height: auto !important;
  }
  .relatedD_content { margin-left: 0 !important; }
  .route { position: static !important; margin-bottom: 10px !important; }

  /* ---- 輪播：比例盒 ----
     .pic / .photo / .video 這類容器的 <li> 是 position:absolute，
     直接 height:auto 會讓容器塌成 0 高、主圖消失。改用 aspect-ratio
     維持原本的 885:500，再讓 li 用四邊 inset 撐滿。 */
  .pic,
  .photo,
  .video,
  .viewportVideo,
  .viewportVideon,
  .viewportVideo2 {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 885 / 500;
  }
  .pic > li,
  .photo > li,
  .info,
  .contentInfo {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
  }
  .pic > li,
  .photo > li {
    bottom: 0 !important;
    height: auto !important;
  }
  .info, .contentInfo { height: auto !important; bottom: auto !important; }
  /* 這條要用 #wrapper 前綴，否則會被下面的 `#wrapper img` 用 ID 特異度蓋掉 */
  #wrapper .pic > li img,
  #wrapper .photo > li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* 上一張／下一張的點擊區原本是 420px 寬的絕對定位色塊 */
  a.bPrev, a.bNext {
    width: 50% !important;
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
  }
  a.bPrev { left: 0 !important; right: auto !important; }
  a.bNext { left: auto !important; right: 0 !important; }

  /* ---- 安全網 ----
     上面的清單是從 style.css 反推的，涵蓋所有 ≥400px 的固定寬規則；
     但樣板裡還有少數行內寬度與寫在別處的元素。這條兜底，讓任何
     元素都不會超出自己的容器。輪播內部已用 inset 撐滿，不受影響。 */
  #main *,
  #footer *,
  #footerFix * {
    max-width: 100% !important;
    /* 這個站是 content-box，元素吃到 max-width:100% 後 padding 還會再往外推
       （例如 .mstTitle h2 的 width 算出 355px、實際 border-box 卻是 390px）。
       只在這個斷點內改成 border-box，桌機版面完全不動。 */
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
  }

  /* ---- 圖片不超出容器 ---- */
  #wrapper img,
  #footer img { max-width: 100% !important; height: auto !important; }

  /* ---- 底部固定工具列 ---- */
  #footerFix {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
  }
  .copy {
    width: auto !important;
    float: none !important;
    margin-left: 0 !important;
    text-align: center !important;
  }

  /* ---- 會員彈窗：刻意不動 ----
     #memberBox / #memberBox2 是 position:fixed 且 top:944px，這個站就是靠
     「把它推到視窗外」來當隱藏（沒有 display:none）。第一版我把它置中，
     結果面板直接蓋在內容正中央 —— 那是改壞不是改好。
     它是 fixed，不會造成橫向捲動，維持原狀即可。
     手機點「會員」時面板會開在畫面外，屬既有問題，要修得先弄清楚
     那支 JS 的顯示邏輯，不適合用 CSS 硬蓋。 */

  /* ---- 頁尾四欄堆疊 ---- */
  #footer {
    width: auto !important;
    height: auto !important;
    background-image: none !important;
    background: #43484c !important;
    overflow: hidden !important;
    padding-bottom: 14px !important;
  }
  .sitemap, .contact, .link, .top, .follow, .share {
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 10px 10px 0 10px !important;
  }
  .sitemap > ul, .link > ul { width: auto !important; margin-right: 0 !important; }
  .link li { width: auto !important; }
}

/* =====================================================================
   Tier 2（≤760px）：手機。卡片改雙欄。
   ===================================================================== */
@media (max-width: 760px) {

  #wrapper { padding: 0 10px !important; }

  .listIndex1,
  .listIndex2,
  .listDesigner1,
  .listDesigner2,
  .listDesigner3,
  .listDesigner4,
  .listDesigner5,
  .listMedia1,
  .listNews1,
  .listNews2,
  .listNews3,
  .listTalk1,
  .listMsg1 {
    float: left !important;
    width: calc(50% - 8px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 16px 16px 0 !important;
  }
  .listIndex1:nth-of-type(2n),
  .listIndex2:nth-of-type(2n),
  .listDesigner1:nth-of-type(2n),
  .listDesigner2:nth-of-type(2n),
  .listDesigner3:nth-of-type(2n),
  .listDesigner4:nth-of-type(2n),
  .listDesigner5:nth-of-type(2n) { margin-right: 0 !important; }

  /* 輪播頁籤與分頁列可換行。
     .control li 原本鎖 height:40px + overflow:hidden（桌機一列五個、
     每個 149px，剛好容得下兩行 20px 文字）。窄螢幕換行後寬度變窄，
     第二行會再折成兩行 → 共三行 60px，被 40px 裁掉半行。改成自動高度。 */
  .control, .controlBar { height: auto !important; overflow: visible !important; }
  .control li {
    float: none !important;
    display: inline-block !important;
    vertical-align: top !important;
    width: auto !important;
    min-width: 105px !important;
    height: auto !important;
    min-height: 40px !important;
    overflow: visible !important;
    line-height: 1.5 !important;
    margin: 0 6px 8px 0 !important;
  }

  /* .aff 是 JS 的 isDesktop() 為真時才 append 的桌機專用橫條，
     真實手機不會出現；這裡仍加一道保險，避免中間尺寸被它撐版。 */
  #footerFix .aff {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 內文表格加捲動，不撐爆版面 */
  .contentDesigner table,
  .talkD_content table,
  .mediaD_content table,
  .aboutContent table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }

  #btcta .btcw { max-width: 100% !important; }
}

/* =====================================================================
   Tier 3（≤420px）：小螢幕，卡片單欄
   ===================================================================== */
@media (max-width: 420px) {
  .listIndex1,
  .listIndex2,
  .listDesigner1,
  .listDesigner2,
  .listDesigner3,
  .listDesigner4,
  .listDesigner5,
  .listMedia1,
  .listNews1,
  .listNews2,
  .listNews3,
  .listTalk1,
  .listMsg1 {
    float: none !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
}