/* ==========================================================================
   case.html — 手機版體驗與視覺強化
   只在 page-case.css 既有響應式基礎上做手機專屬微調，不動桌面版樣式。
   共用 token／捲動顯影／底部導覽列等基礎設施見 css/style.css，不在此重複定義。
   ========================================================================== */

@media (max-width: 980px) {
  /* --------------------------------------------------------------------------
     真實照片案例卡 — 桌面版固定高度 150px 是為多欄橫向卡片設計；手機單／雙欄卡片
     變寬後，固定高度會把原圖（700×505，約 1.39:1）裁得過扁。改用貼近原圖比例的
     aspect-ratio，讓照片完整呈現、裁切幅度降到最低，同時仍保留 object-fit: cover。
     -------------------------------------------------------------------------- */
  .case-card-img {
    height: auto;
    aspect-ratio: 700 / 505;
    margin-bottom: 16px;
  }

  /* --------------------------------------------------------------------------
     兩段案例網格的分層感 — 「案例縮影」（有照片）維持沉浸式深色，
     「更多客戶陣容」（無照片）改用淺紙色，讓深色卡片像浮貼在紙面上的名片條目。
     這樣一來有照片的區塊視覺更突出，無照片的區塊保持謙遜、易讀，並在手機捲動
     時提供清楚的節奏區隔。只用 style.css 已定義的 --canvas／--ink／--stone 等 token。
     -------------------------------------------------------------------------- */
  #case-more {
    background: var(--canvas);
  }
  #case-more .eyebrow { color: var(--bronze-txt); }
  #case-more h2 { color: var(--ink); }
  #case-more .lede { color: var(--stone); }

  /* 簡化卡（無照片）在手機的留白與字級微調，維持「謙遜但仍然易讀」 */
  .case-card-simple {
    min-height: 148px;
  }
  .case-card-simple-num {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
}

@media (max-width: 640px) {
  /* 單欄時卡片變寬，稍微收斂內距與網格間距，讓捲動節奏更緊湊 */
  .case-grid { gap: 16px; }
  .case-card { padding: 14px 16px 18px; }
  .case-card h3 { font-size: 1.125rem; margin: 4px 0 2px; }
  .case-card .tag { font-size: 0.6875rem; }
}