/* ==========================================================================
   case.html — 精選案例列表頁
   只放這頁專屬樣式；共用 token／元件請見 css/style.css，不在此重複定義。
   ========================================================================== */

/* --------------------------------------------------------------------------
   頁面 Hero（單張靜態版，非輪播）— 沿用 index.html .hero／solutions.html
   .page-hero 的暗場精神。此規則與 page-solutions.css 內的同名規則重複定義，
   因為各頁 CSS 檔彼此不互相 @import（專案沒有 build 工具做共用抽取）。
   -------------------------------------------------------------------------- */
.page-hero {
  background: var(--ink-deep);
  padding: 104px 0 68px;
  border-bottom: 1px solid var(--hair-dark);
}
.page-hero-copy { max-width: 640px; }
.page-hero-copy h1 {
  font-size: var(--fs-d1);
  color: var(--paper);
  line-height: 1.18;
  margin: 18px 0 16px;
}
.page-hero-sub {
  font-size: 1.0625rem;
  color: var(--ash);
  line-height: 1.7;
  max-width: 46ch;
}

/* --------------------------------------------------------------------------
   案例網格 — 取代首頁 .case-track 橫向輪播，改成一次展示全部的網格排列。
   卡片本身（.case-card / .case-card-img / .num-badge / .tag）完全沿用
   css/style.css 既有定義，這裡只負責把容器從 flex 橫向捲動改成 grid。
   -------------------------------------------------------------------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* --------------------------------------------------------------------------
   簡化版案例卡（無照片）— 重用 .case-card 外殼（深色底／邊框／padding），
   拿掉 .case-card-img 圖片區塊，改用大數字裝飾（呼應規範 L02 大數字語彙）
   佔滿原本圖片的視覺重量，維持「沒有照片就留白，不亂配圖」的誠實原則。
   -------------------------------------------------------------------------- */
.case-card-simple {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.case-card-simple-num {
  font-family: "Noto Sans TC Light", sans-serif;
  font-size: var(--fs-d1);
  line-height: 1;
  color: var(--bronze);
  opacity: .28;
  margin-bottom: auto;
}

/* 兩段案例網格背景都沿用 .case-section 的深色（見 style.css），
   相鄰堆疊時不需要重複的上下留白，靠各自 section-head 的間距分隔即可。 */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .page-hero { padding: 88px 0 52px; }
  .case-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .case-grid { grid-template-columns: 1fr; }
}