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

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

/* 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);
}

/* ===== 手機（max-width: 480px）：Hero 高度依設計稿車圖 ===== */
@media (max-width: 30rem) {
	.page-hero--cases {
		padding-bottom: var(--spacing-lg);
	}
}