/* ==========================================================================
   solution-detail.html — 手機版體驗與視覺動態強化
   共用模板，套用 42 筆方案資料（js/solution-detail.js 動態渲染）。
   只在 page-detail.css／page-solutions.css 既有響應式基礎上做手機專屬微調，
   不動桌面版樣式。共用 token／捲動顯影／底部導覽列等基礎設施見 css/style.css。
   載入順序在 page-detail.css 之後，同特異度規則以本檔為準。
   ========================================================================== */

/* --------------------------------------------------------------------------
   麵包屑導覽 — 「服務與方案／分類／方案名稱」在窄螢幕上組合起來可能偏長，
   維持自然換行（不做省略號，避免吃掉方案名稱資訊），但收緊行距與分隔符間距
   讓換行後仍然好讀、不會東拼西湊。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .breadcrumb {
    line-height: 1.8;
    margin-bottom: 20px;
  }
  .breadcrumb span { margin: 0 5px; }
}

/* --------------------------------------------------------------------------
   Hero — badge／標題／一句話／計價／CTA。桌面用 var(--fs-d1) 固定級距，
   在 980px 已切到 var(--fs-h1)，但到 375px 這種窄手機仍偏大、長標題容易
   擠壓換行。改用 clamp() 讓字級隨寬度平滑縮放，並把計價與 CTA 在窄螢幕
   改直向堆疊、按鈕全寬，方便單手點擊。
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .detail-hero-meta { row-gap: 20px; }
}
@media (max-width: 640px) {
  .detail-hero { padding: 44px 0 36px; }
  .detail-hero .solution-badge { margin-bottom: 14px; }
  .detail-hero h1 {
    font-size: clamp(1.5rem, 7.6vw, 2rem);
    line-height: 1.34;
    max-width: 100%;
    margin-bottom: 14px;
  }
  .detail-hero .lede { font-size: 1rem; line-height: 1.7; }
  .detail-hero-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    margin-top: 28px;
    padding-top: 22px;
  }
  .detail-price-value { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .detail-hero-meta .btn {
    width: 100%;
    text-align: center;
    padding: 16px 28px; /* 加大觸控高度 */
  }
}

/* --------------------------------------------------------------------------
   Intro＋適合對象雙欄 — page-detail.css 已在 980px 把 .detail-intro-grid
   改單欄堆疊；這裡在更窄的手機寬再收緊留白與清單觸控間距。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .detail-intro { padding: 48px 0; }
  .detail-intro-copy .lede { font-size: 1rem; margin-bottom: 16px; }
  .detail-intro-aside { padding-top: 26px; }
  .detail-intro-aside li { padding: 12px 0; font-size: 0.9375rem; line-height: 1.6; }
}

/* --------------------------------------------------------------------------
   方案內容特色卡（.tool-card，dFeatures 動態產生）— page-detail.css 已在
   980px 改單欄；手機寬再放大卡片間距，避免上下卡片的分隔線太靠近顯得擁擠。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .detail-features { padding-bottom: 56px; }
  .detail-feature-grid { row-gap: 32px; }
  .detail-feature-grid .tool-card { padding-top: 18px; }
  .detail-feature-grid .tool-card h3 { font-size: 1.0625rem; }
}

/* --------------------------------------------------------------------------
   導入流程（dProcess，若該方案有這個區塊）— 桌面版編號欄固定 56px，
   在窄手機上文字欄會被壓縮；縮小編號欄寬與字級，讓說明文字有更多空間。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .detail-process { padding-bottom: 56px; }
  .detail-process-row {
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .detail-process-row .num { font-size: 1.25rem; }
  .detail-process-row h4 { font-size: 1.0625rem; }
  .detail-process-row p { font-size: 0.9375rem; }
}

/* --------------------------------------------------------------------------
   FAQ 手風琴（<details>/<summary>，dFaq 動態產生）— 加大 summary 觸控範圍
   （最小 44px 高），並用純 CSS grid-rows 技巧讓展開/收合有平滑動畫，
   不需要 JS 介入、不影響 solution-detail.js 的任何邏輯。
   -------------------------------------------------------------------------- */
.detail-faq-item summary {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-height: 44px;
  padding: 10px 0;
}
.detail-faq-item p {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  transition: grid-template-rows .32s var(--ease), opacity .26s var(--ease), margin-top .32s var(--ease);
}
.detail-faq-item p > * { min-height: 0; }
.detail-faq-item[open] p {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 12px;
}
@media (hover: none) {
  .detail-faq-item summary:active { color: var(--bronze-txt); }
}
@media (max-width: 640px) {
  .detail-faq { padding-bottom: 56px; }
  .detail-faq-item { padding: 14px 0; }
  .detail-faq-item summary { font-size: 0.9375rem; line-height: 1.5; }
  .detail-faq-item p { font-size: 0.9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-faq-item p { transition: none; }
}

/* --------------------------------------------------------------------------
   相關方案（dRelated，重用 .solution-grid）— 欄數已由 page-solutions.css
   在 980px／640px 收成 2 欄／1 欄，這裡只補窄螢幕的垂直節奏。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .detail-related { padding-bottom: 64px; }
  .detail-related .solution-grid { row-gap: 28px; }
}

/* --------------------------------------------------------------------------
   404 備援畫面 — 窄螢幕收斂上下留白
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .detail-notfound { padding: 96px 0; }
}

/* --------------------------------------------------------------------------
   雙路徑 CTA — 按鈕在窄螢幕改全寬，方便單手點擊；確認在行動裝置底部固定
   導覽列（.mobile-tabbar）之上仍有足夠留白。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .cta-band { padding: 48px 0; }
  .cta-band-inner { gap: 24px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { width: 100%; text-align: center; }
}