/* ============================================================
   全站手機／平板響應式樣式 (Responsive)
   ------------------------------------------------------------
   最後載入，用於修正各頁在窄螢幕的破版：
   固定寬度容器、多欄網格、寬表格、等比例對比牆等。
   全站斷點統一三段：1024px（平板，多欄收單欄）／768px（手機，主要單欄化）／
   480px（小手機微調字級與 logo）。最小版面寬度 320px，再窄就橫向滑動。
   桌機版樣式完全不受影響（僅在斷點內生效）。
   ============================================================ */

/* ---------- 全域：避免任何元素撐破畫面寬度 ---------- */
@media (max-width: 1024px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, video, canvas, svg, table { max-width: 100%; }
  /* grid／flex 子項預設 min-width:auto，會被最長的一段文字撐開整個欄位（右側文字溢出的主因）。
     窄螢幕一律允許收縮；橫向滑動的區塊不受影響（它們用 flex:0 0 auto 決定寬度）。 */
  body *:not(svg):not(svg *) { min-width: 0; }
  /* 長英數字串（email、網址、料號）在窄螢幕可斷行 */
  a[href^="mailto"], a[href^="http"], .info-text, .info-text a, .footer a { overflow-wrap: anywhere; }
  /* 封面影片是刻意超出畫面的滿版背景（配合視差），不套用上面的寬度上限 */
  .hero-video { max-width: none !important; }
  /* .hero-container / .section-inner / .products-wrapper 可能寫死像素寬，窄螢幕要放開。
     .container 不在此列：各頁的 .container 自己用 calc(100% - 留白) 定義，
     一旦被 width:auto 蓋掉，左右留白就消失、文字會貼齊畫面邊緣。 */
  .hero-container, .section-inner, .products-wrapper { width: auto !important; }
  .container { max-width: 100%; }
}

/* ---------- 最小版面寬度：320px ----------
   320px 是現役手機的最窄尺寸（iPhone SE 第一代、部分小螢幕 Android）。
   再往下縮，字級與 44px 點擊區就保不住，因此不再縮放：版面固定在 320px，
   更窄的裝置（例如 Galaxy Fold 摺起來約 280px）改為可橫向滑動。 */
html, body { min-width: 320px; }

/* 以「視窗寬」計算的元素不會跟著 320px 下限走（100vw、以及固定定位的 100%），
   必須自己抵住 320px，否則會比內容窄，右側露出背景。 */
.fashion-hero-wrapper { width: 100%; min-width: 320px; }
.top-utility-bar,
.header,
#site-header-component:empty,
.m-nav-drawer { min-width: 320px; }

@media (max-width: 319px) {
  html, body { overflow-x: auto; }
}

/* ============================================================
   平板：1024px 以下
   ============================================================ */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* 漢堡選單從 1024px 開始出現，語言鈕與聯繫按鈕改由抽屜內提供，
     否則頁首在 769–1024 之間會擠成三顆按鈕、右側被切掉 */
  .header-right .contact-btn,
  .header-right .lang-toggle { display: none !important; }

  /* .page-hero 的上內距必須含固定頁首的高度，否則標題會被蓋住。
     這條要放在 1024px 這一層：漢堡版頁首從 1024px 就開始，
     只寫在 768px 以下的話 769–1024 之間會被切掉。
     （.products-hero-section 已在該頁的基礎樣式用同一組變數計算，不需覆寫。） */
  .page-hero { padding-top: calc(var(--utility-h) + var(--header-h) + 28px) !important; }
}

/* ============================================================
   矮螢幕／平板以下的首頁封面
   ------------------------------------------------------------
   桌機版封面是 height:100vh + overflow:hidden，內容用絕對定位置中。
   在矮螢幕（例如 1024×600 的智慧螢幕、1366×768 筆電）內容會超過 600px
   而被裁掉，置中後最上面的 logo 牌還會被固定頁首蓋住。
   這裡改為高度由內容決定、上內距讓開頁首。
   ============================================================ */
@media (max-width: 1024px), (max-height: 820px) {
  .fashion-hero-wrapper {
    height: auto !important;
    min-height: 100svh !important;
    /* 高螢幕（例如 iPad 直立 1024×1366）內容只有約 700px，
       若靠上排會留下一大片空白照片；改成垂直置中。
       矮螢幕時內容比視窗高，min-height 讓它自然往下長。 */
    display: flex !important;
    align-items: center !important;
  }
  .hero-stage-content {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    height: auto !important;
    padding: calc(var(--utility-h) + var(--header-h) + 24px) 40px 48px !important;
  }
}

/* ============================================================
   手機：768px 以下
   ============================================================ */
@media (max-width: 768px) {

  /* ---------- 頁首 ---------- */
  .header {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  /* logo 已改為單一張整組圖（公司名在圖裡），只調圖高即可 */
  .logo-image { height: 46px !important; }
  .header-right { gap: 6px !important; }
  .search-trigger-btn { margin-right: 0 !important; width: 36px !important; height: 36px !important; }

  /* ---------- 產品頁首圖 ---------- */
  /* 上內距已在 1024px 那一層處理，這裡只調左右與下方 */
  .page-hero { padding-left: 18px !important; padding-right: 18px !important; padding-bottom: 28px !important; }
  .hero-title { font-size: 1.55rem !important; line-height: 1.35 !important; }
  .hero-desc { font-size: 0.92rem !important; line-height: 1.7 !important; }
  .product-hero-img { max-height: 240px !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; }

  /* 首圖容器的 padding:0 40px 寫在 style 屬性上，手機只剩 270px 可用，
     篩選標籤因此每排只排得下兩顆。收成 8px 讓它有完整寬度。 */
  .products-hero-container { padding-left: 8px !important; padding-right: 8px !important; }

  /* ---------- 篩選列：自動換行成多排 ----------
     原本改成橫向滑動，但手機上被切掉的那顆很容易被忽略（沒人知道可以滑），
     而且第一顆會滑出畫面外。這些標籤都很短，換行後兩三排就排完、全部看得見。 */
  .filter-pills-bar,
  .filter-tabs-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .filter-btn,
  .filter-tab-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    padding: 8px 13px !important;
    min-height: 44px !important;
  }

  /* ---------- 規格區塊 ---------- */
  .products-wrapper,
  .spec-section { padding: 20px 14px !important; }
  .cat-spec-block { border-radius: 14px !important; }
  .cat-spec-header { padding: 16px 18px !important; }
  .cat-spec-title { font-size: 1.05rem !important; line-height: 1.4 !important; }

  /* ---------- 規格表：表格本身變成可橫向滑動的區塊，避免擠壓變形 ---------- */
  .compact-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    font-size: 0.82rem !important;
  }
  .compact-table th,
  .compact-table td { padding: 10px 12px !important; }
  .spec-table-pane { overflow-x: auto !important; }

  /* ---------- 等比例對比牆：橫向滑動 ---------- */
  .scale-ramp-container { padding: 16px 14px !important; }
  .scale-ramp-title-row { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .scale-ramp-title { font-size: 0.92rem !important; line-height: 1.5 !important; }
  .scale-ramp-hint { font-size: 0.78rem !important; }
  .scale-ramp-track {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 10px !important;
    gap: 14px !important;
  }
  .scale-ramp-item { flex: 0 0 auto !important; }
  .scale-no-pill { font-size: 0.78rem !important; }
  .scale-dim-label { font-size: 0.74rem !important; }
  .scale-qty-label { font-size: 0.72rem !important; }

  /* ---------- EDM 卡片列 ---------- */
  .edm-card-rows-wrapper { padding: 0 14px 18px !important; }
  .edm-spec-card-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .edm-spec-card-left { gap: 8px !important; }
  .edm-size-pill { font-size: 0.92rem !important; }
  .edm-spec-card-dim { font-size: 0.84rem !important; }

  /* ---------- 圖左表右 → 上下堆疊（斷點與 src/spec-render.js 一致） ---------- */
  .spec-with-photo { grid-template-columns: 1fr !important; }
  .spec-photo-pane { padding: 20px !important; border-right: none !important; border-bottom: 1px solid #E2E8F0 !important; }
  .spec-stage { height: 210px !important; }

  /* ---------- 搜尋視窗 ---------- */
  .om-search-overlay { padding: 70px 12px 20px !important; }
  .om-search-head { padding: 14px 16px !important; }
  .om-search-input { font-size: 0.95rem !important; }
  .om-search-tags { padding: 12px 16px !important; }
  .om-result { padding: 12px 16px !important; gap: 10px !important; }
  .om-result-cat { display: none !important; }
  .om-search-list { max-height: 60vh !important; }

  /* ---------- 首頁 ---------- */
  .hero-main-title,
  .hero-section h1 { font-size: 2rem !important; line-height: 1.25 !important; }
  .hero-sub-tagline { font-size: 0.95rem !important; line-height: 1.7 !important; }
  /* 首頁封面品牌牌改為只放 logo 圖 */
  .brand-hero-badge { padding: 12px 20px !important; }
  .brand-logo-img { height: 48px !important; }

  /* 首頁封面：高度改為隨內容，避免特色卡改單欄後被切掉 */
  .fashion-hero-wrapper { height: auto !important; min-height: 100svh !important; }
  .hero-stage-content {
    position: relative !important;
    left: auto !important;
    transform: none !important;
    /* 頁首高 88px，固定寫 88px 會讓首屏的 logo 牌貧齊頁首底部、看起來像重疊，
       改用變數再加 24px 間距 */
    padding: calc(var(--utility-h) + var(--header-h) + 24px) 18px 40px !important;
  }
  .hero-big-title { font-size: 1.9rem !important; }
  .hero-video {
    top: -6% !important;
    left: -6% !important;
    width: 112% !important;
    height: 112% !important;
    object-fit: cover !important;
  }
  .hero-btn-group a { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  /* 封面 3 項特色卡：由並排改為由上往下堆疊（圖示置左的橫式卡片） */
  .hero-stats-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 28px !important;
  }
  .hero-stat-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
    row-gap: 2px !important;
    align-items: center !important;
    text-align: left !important;
    padding: 14px 16px !important;
  }
  .hero-stat-card .stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    align-self: center !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
  }
  .hero-stat-card .stat-num { grid-column: 2 !important; font-size: 1.35rem !important; margin: 0 !important; }
  .hero-stat-card .stat-label { grid-column: 2 !important; font-size: 0.85rem !important; margin: 0 !important; }
  .hero-stat-card .stat-sub { grid-column: 2 !important; font-size: 0.72rem !important; line-height: 1.45 !important; }

  /* 核心產品序號：縮小並內縮，避免被卡片邊界切掉 */
  .ps-numeral,
  .ps-row:nth-child(even) .ps-numeral {
    right: 16px !important;
    left: auto !important;
    top: 4px !important;
    font-size: 104px !important;
  }

  /* 3D 折疊卡片在手機改為單欄平面卡片（3D 傾斜在窄螢幕會破圖） */
  .concertina-row { flex-direction: column !important; gap: 14px !important; perspective: none !important; }
  .concertina-card { flex-direction: row !important; transform: none !important; height: auto !important; }
  .concertina-card:hover { transform: none !important; }
  .concertina-left,
  .concertina-right { transform: none !important; flex: 1 1 50% !important; }
  .concertina-left { padding: 18px 16px !important; }
  .concertina-title { font-size: 1.05rem !important; }
  .concertina-right img { max-height: 120px !important; }

  .scenarios-section { padding: 60px 16px !important; }
  .scenarios-grid { grid-template-columns: 1fr !important; }
  .scenario-card { min-height: 220px !important; }
  .scenario-title { font-size: 1.15rem !important; }

  /* ---------- 產品中心卡片 ---------- */
  .visual-product-card { grid-template-columns: 1fr !important; }
  .card-image-box { min-height: 200px !important; }
  .card-info-content { padding: 20px 18px !important; }
  /* 產品名原本 1.2rem，比下面的重點文字（1.28rem）還小，層級反了。
     標題放大、重點收一階，恢復「名稱 > 重點 > 敘述」的順序。 */
  .card-main-title { font-size: 1.65rem !important; line-height: 1.35 !important; }
  .card-highlight-text { font-size: 1.02rem !important; line-height: 1.55 !important; }
  .card-desc-text { font-size: 0.9rem !important; }
  .card-actions-row { flex-direction: column !important; gap: 10px !important; }
  .card-actions-row a { width: 100% !important; justify-content: center !important; min-height: 44px !important; }

  /* ---------- 桌機左右並排的內容區塊，手機一律改上下 ---------- */
  /* 永續頁：產品卡（圖左文右）、三點清單、承諾雙卡、標章清單 */
  .product-card { grid-template-columns: 1fr !important; }
  .product-image { min-height: 210px !important; }
  .points,
  .commitment-grid { flex-direction: column !important; }
  .green-standard-list { grid-template-columns: 1fr !important; }
  .commitment-card { border-left: 0 !important; }

  /* 區塊已經有 14px 側邊距，內層 .container 寫在 style 屬性上的 40px 在手機會疊加，
     加上卡片內距後文字離畫面邊緣已經 74px，內容欄只剩一半寬。 */
  .section > .container { padding-left: 0 !important; padding-right: 0 !important; }

  /* ---------- 通用：寫在 style 屬性上的左右排版，手機一律改上下 ---------- */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.1fr"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: 1.2fr 1fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }

  /* ---------- 環保標章區塊：圖上文下，內距縮小 ---------- */
  .home-green-mark-section { padding: 48px 0 !important; }
  .home-green-mark-section > div { padding: 0 14px !important; }
  .home-green-mark-section .section-head { margin-bottom: 28px !important; }
  .home-green-mark-section [style*="padding: 36px"] { padding: 20px !important; }
  .home-green-mark-section [style*="padding: 40px 48px"] { padding: 24px 18px !important; }
  .home-green-mark-section h3 { font-size: 1.25rem !important; line-height: 1.4 !important; }
  .home-green-mark-section img { border-radius: 12px !important; }

  /* ---------- 底部聯繫 CTA：改為上下排列、按鈕滿寬 ---------- */
  .cta-banner-section { padding: 48px 14px !important; }
  .cta-banner-container {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 22px !important;
    padding: 28px 22px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 30px rgba(0, 82, 155, 0.22) !important;
  }
  .cta-banner-title { font-size: 1.4rem !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .cta-banner-desc { font-size: 0.9rem !important; line-height: 1.7 !important; max-width: none !important; }
  .btn-cta-giant {
    width: 100% !important;
    justify-content: center !important;
    min-height: 48px !important;
    font-size: 0.95rem !important;
    padding: 14px 20px !important;
  }

  /* ---------- 通用：多欄網格一律收成單欄 ---------- */
  .footer-inner,
  .footer-grid { flex-direction: column !important; gap: 16px !important; text-align: center !important; }

  /* ---------- 段落與標題行距 ---------- */
  h1, h2, h3 { text-wrap: pretty; }
  section { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ============================================================
   小手機：480px 以下
   ============================================================ */
@media (max-width: 480px) {
  .logo-image { height: 40px !important; }

  /* 聯繫頁：圖示原本在左、文字在右，小手機只剩約 200px 給文字，
     電話與 email 會被斷成三四行。改為圖示在上、文字整寬。 */
  .info-item {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .info-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.25rem !important;
  }
  .info-card { padding: 24px 20px !important; }

  /* 三組資訊之間加分隔線與呼吸，不再黏成一圖 */
  .info-item {
    padding-bottom: 18px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid var(--border-color, #E2E8F0) !important;
  }
  .info-item:last-of-type {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
  .brand-logo-img { height: 42px !important; }
  .hero-title { font-size: 1.35rem !important; }
  .hero-main-title,
  .hero-section h1 { font-size: 1.7rem !important; }
  .hero-big-title { font-size: 1.65rem !important; }
  .ps-numeral,
  .ps-row:nth-child(even) .ps-numeral { font-size: 88px !important; right: 14px !important; }
  .concertina-card { flex-direction: column !important; }
  .concertina-right { min-height: 130px !important; }
}

/* ============================================================
   極窄頁首（360px 以下）
   ------------------------------------------------------------
   360px 以上的主流手機（375、390、430）空間足够放完整的中英文 logo；
   只有 320–360px 的小螢幕會跟搜尋、漢堡按鈕互擠，
   這時才把 logo（1135×220 整組圖）裁到左側 242px 的圓形標記。
   ============================================================ */
@media (max-width: 360px) {
  /* 320–360px：卡片標題欄只有約 140–210px 寬，9–10 字的標題會被迫斷出孤字
     （例「高雄前鎮廠遷廠合／併」）。字級收一階讓這類標題排回一行。 */
  .timeline-copy h3,
  .capability h3,
  .commitment-card h3 { font-size: 0.95rem !important; line-height: 1.45 !important; }

  .logo-image {
    width: 44px !important;
    height: 40px !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: left center !important;
    flex: 0 0 auto !important;
  }
  .header-logo { gap: 0 !important; }
}

/* ============================================================
   CJK 排版優化
   ------------------------------------------------------------
   標題（短、一定要排得好看）：keep-all 不讓詞彙被拆開
   （沒有 keep-all 時會出現「讓穩定品質，成／為製程的日常」這種斷行），
   断行因此發生在逗號等標點處；搭配 overflow-wrap: break-word，
   真的放不下時才強制断，不會溢出畫面。
   （之前右側文字溢出的真正原因是 grid／flex 子項的 min-width:auto，
     已在上面的 1024px 區塊用 body *{min-width:0} 修正。）

   內文段落：保持正常断行（段落很長，keep-all 效益低、風險高），
   支援 auto-phrase 的瀏覽器則依語意断句。
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.products-hero-title, .hero-title, .section-title, .card-main-title,
.node-name, .timeline-copy h3, .stat-label, .stat-sub {
  word-break: keep-all;
  line-break: strict;
  /* anywhere（而非 break-word）：沒有標點可斷的長標題，
     讓 text-wrap: balance 有斷點可選，才會平均分行，
     不會出現「高雄前鎮廠遷廠合／併」這種孤字。 */
  overflow-wrap: anywhere;
  /* pretty 專門避免「最後一行只剩一個字」的孤字（balance 只求各行等長） */
  text-wrap: pretty;
}

p, .card-desc-text, .node-role, .node-detail, .timeline-copy p, .section-lead {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

@supports (word-break: auto-phrase) {
  p, .card-desc-text, .node-role, .node-detail, .timeline-copy p, .section-lead {
    word-break: auto-phrase;
  }
}

/* 短標籤、膠囊、序號才需要不換行（都是 2～8 字的內容） */
.hero-pill-tag, .card-num-badge, .prod-badge, .stat-num,
.nav-link-item, .region-badge, .utility-left span, .utility-right a, .node-label,
.ps-chip, .edm-size-pill, .scale-no-pill {
  white-space: nowrap;
  word-break: keep-all;
}

/* 橫向滑動列裡的篩選鈕維持單行（容器本身可滑動） */
.filter-tab-btn, .filter-btn { white-space: nowrap; word-break: keep-all; }

/* 按鈕文字在窄螢幕允許換行，避免長字串（例：留下資料 · 由我們聯繫您）被切掉 */
@media (max-width: 768px) {
  button:not(.filter-tab-btn):not(.filter-btn),
  .btn, .btn-action-primary, .btn-action-secondary,
  .btn-hero-primary, .btn-hero-secondary, .btn-quote-add, .btn-quote-dark, .btn-cta-giant {
    white-space: normal !important;
    word-break: normal !important;
    text-align: center;
  }
}