/* ============================================
   組件：實績案例（case-studies）
   由 Locofy 匯出「轉寫」：色彩／間距／圓角沿用匯出值；
   絕對定位 grid 重構為正常流 3 欄 + RWD。
   跨多頁共用、全站載入。BEM 前綴：.case-
   ============================================ */

.case-studies {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* 標頭已抽為共用 .comp-header（components/shared.css），此處不再重複。 */

/* 案例卡：水平輪播，一頁＝3 欄×2 列＝6 張（桌機）；平板 2 欄=4、手機 1 欄=2。
   可拖曳；分頁點由 JS 依頁數跟隨。用 2 列 grid + 欄向排版（column auto-flow），
   卡片由上到下先填滿一欄再換下一欄；每頁＝可視寬（--cols 欄）。
   --gap 間距、--cols 每頁欄數（卡寬與 JS 計算共用）。 */
/* 捲動/拖曳機制已抽為共用（components/shared.css）；此處只保留 grid 排版與尺寸。
   案例卡無陰影 → --pad-y:0。每欄寬＝(可視寬 − (欄數−1)×gap) ÷ 欄數。 */
.case-studies__grid {
  --gap: clamp(24px, 3.5vw, 44px);
  --cols: 3;
  --rows: 2;              /* 桌機/平板 2 列；JS 依此逐列（row-major）排列 → 末頁靠上、下列留空 */
  --pad-x: 0px;
  --pad-y: 0px;
  max-width: 1165px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  gap: 16px var(--gap);
}
.case-card {
  margin: 0;
}
.case-card__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: #000;
}
/* 案例照片（灰底佔位 #d9d9d9，比例約 360:296；設計稿為直角無圓角） */
.case-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 296;
  background-color: #d9d9d9;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.case-card__title {
  font-size: 16px;
  line-height: 20px;
  color: #000;
}
.case-card__link:hover .case-card__title {
  color: #ab7a44;
}

/* 空狀態 */
.case-studies__empty {
  margin: 0;
  padding: 48px 0;
  font-size: 16px;
  color: #999;
}

/* ===== RWD ===== */
/* 平板：一頁 2 欄×2 列＝4 張 */
@media (max-width: 1024px) {
  .case-studies__grid {
    --cols: 2;
  }
}
/* 手機：一頁 2 欄×1 列＝2 張（左右並排）、卡寬 150 / 間距 20 */
@media (max-width: 640px) {
  .case-studies {
    gap: 20px;
  }
  .case-studies__grid {
    --gap: 24px;         /* 手機卡片間距加大（20 → 24），三輪播統一 */
    --rows: 1;            /* 手機改單列；JS 不做逐列重排、卡片自然左至右 */
    /* 改單列（桌機是 2 列）；卡寬依 --cols 填滿螢幕（每頁 2 張），非固定寬 */
    grid-template-rows: auto;
    grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  }
  .case-card__link {
    gap: 8px;
  }
  .case-card__title {
    font-size: 13px;
    line-height: 22px;
  }
}