/* ==========================================================================
   page-cases.css — 成交案例（交車日誌）專屬樣式
   Hero overlay + 紅線標題；卡片網格 / 分頁走 component.css 共用樣式。
   ========================================================================== */

/* Hero 文字整體靠下（依設計稿）：取消固定上方留白，改靠底對齊 */
.page-hero--cases {
  justify-content: flex-end;
  padding-top: 0;
}

/* Hero 深色遮罩（深色照片上壓暗，白字清楚） */
.page-hero--cases::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.page-cases {
  padding: var(--spacing-3xl) 0 var(--spacing-4xl);
  background-color: var(--bg-color);
}

/* 內容區寬度收斂至 1240px（僅本頁，不影響全站 .container） */
.page-cases .container {
  max-width: 1240px;
}

/* 交車日誌標題與案例網格之間的留白 */
.page-cases .section-heading {
  margin-bottom: var(--spacing-2xl);
}

.bottom-cta {
  margin-bottom: -65px;
}

/* ===== 手機（max-width: 480px）：Hero 高度依設計稿車圖 ===== */
@media (max-width: 30rem) {
  .page-hero--cases {
    height: 13.875rem;
    padding-bottom: var(--spacing-lg);
  }
  .page-hero__inner {
    gap: 10px;
  }
  .bottom-cta {
    margin-bottom: 0;
    margin: 18px auto 40px;
  }
  .valuation-flow__cta {
    margin: 0;
  }
}