/* ==========================================================================
   solutions.html — 手機版體驗與視覺動態效果強化（新增檔案）
   只放手機專屬的深度優化；桌面／原有樣式一律留在 page-solutions.css，
   本檔不重複定義、只在既有 class 上疊加行動裝置專屬規則。
   顏色只用 css/style.css :root 既有變數；不加圓角／陰影（全站 * 已強制 !important 關閉）。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 篩選頁籤（依用途／依產業／依來源）— 手機版
   實測 375px／320px 寬度下三個頁籤本來就不會擠壓換行（總寬遠小於容器），
   所以這裡不做橫向捲動，而是改成「等寬滿版」的分段式頁籤（segmented control）：
   觸控命中區直接撐滿三分之一版面、達到 ≥44px 高度，比左靠攏的小按鈕更好點。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .filter-tabs {
    flex-wrap: nowrap;
    gap: 0;
    margin-bottom: 36px;
  }
  .filter-tab {
    flex: 1 1 0;
    margin: 0 0 -1px;
    padding: 13px 4px 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.875rem;
  }
}

/* --------------------------------------------------------------------------
   2. 方案分類區塊 — 手機捲動節奏感（背景極輕微交替）
   利用負 margin 打破 .wrap 的左右內距，讓背景色滿版到螢幕邊緣；
   只交替使用既有的 --paper／--canvas（本來就是同色系的紙感雙色），
   單數分類維持預設 --paper，偶數分類換成 --canvas，克制、只做一階差異。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .solution-category {
    margin-left: calc(var(--edge) * -1);
    margin-right: calc(var(--edge) * -1);
    padding-left: var(--edge);
    padding-right: var(--edge);
  }
  .solution-category:nth-of-type(even) {
    background: var(--canvas);
  }
}

/* --------------------------------------------------------------------------
   3. 方案卡片 — 手機版留白與觸控命中區
   單欄已由 page-solutions.css 在 640px 處理；這裡只加寬卡片內部留白、
   放大內文行距，並把「了解詳情 →」的可點擊區域撐到 ≥44px 高
   （純靠 padding／負 margin 撐開命中範圍，不加背景、不改變視覺尺寸觀感）。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .solution-grid { row-gap: 40px; }

  .solution-card { padding-top: 22px; }
  .solution-card h4 { font-size: 1.125rem; margin: 14px 0 10px; }
  .solution-desc { font-size: 0.9375rem; line-height: 1.7; }
  .solution-price { margin-top: 18px; padding-top: 14px; }

  .solution-card .go {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 -10px -2px;
    padding: 10px 2px;
  }
}

/* --------------------------------------------------------------------------
   4. 來源標籤（SUHUL自有服務／原廠授權經銷／政府與補助）— 手機辨識度
   實測 375px／320px 下文字不會截斷或換行，但字級偏小；這裡只在手機放大
   一階字級、收窄字距以防溢出，並用 currentColor（沿用該 badge 既有色）
   加一條左側細直線當視覺錨點，不新增任何顏色。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .solution-badge {
    font-size: 0.75rem;
    letter-spacing: 1.1px;
    padding-left: 10px;
    position: relative;
  }
  .solution-badge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: currentColor;
  }
}

/* --------------------------------------------------------------------------
   5. 方案比較表 — 手機版橫向滑動
   廠商／方案名稱／價格／計價模式四欄在 375px 下用預設 auto 版面會被壓到
   逐字換行、擠成一團；改成每欄給足最小寬度，讓表格總寬度確實超出螢幕，
   搭配 page-solutions.css 既有的 overflow-x:auto 形成可橫向滑動的表格，
   並隱藏原生捲軸、加上滑動提示文字＋輕量 scroll-snap 手感。
   -------------------------------------------------------------------------- */
.compare-scroll-hint { display: none; }

@media (max-width: 980px) {
  .compare-table-wrap { -webkit-overflow-scrolling: touch; }
  .compare-table {
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
  }
  .compare-table::-webkit-scrollbar { display: none; }
  .compare-table thead th { scroll-snap-align: start; }

  .compare-scroll-hint {
    display: block;
    text-align: center;
    font-size: var(--fs-micro);
    letter-spacing: 0.4px;
    color: var(--mist);
    margin: 0 0 14px;
  }
}

@media (max-width: 640px) {
  .compare-table th:nth-child(1), .compare-table td:nth-child(1) { min-width: 104px; }
  .compare-table th:nth-child(2), .compare-table td:nth-child(2) { min-width: 156px; }
  .compare-table th:nth-child(3), .compare-table td:nth-child(3) { min-width: 132px; }
  .compare-table th:nth-child(4), .compare-table td:nth-child(4) { min-width: 172px; }
}

/* --------------------------------------------------------------------------
   6. cta-band 收尾 — 確認底部不被行動裝置底部導覽列（tabbar）遮住
   body 的 padding-bottom:64px 已由 style.css 全站處理，這裡只再收斂
   cta-band 手機版上下留白，避免最後一塊內容貼著 tabbar 太近。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cta-band { padding: 48px 0 56px; }
}