/**
 * 案例卡片牆樣式
 *
 * 範圍:卡片牆格線(.case-wall)+ 卡片元件(.case-card__*)。
 * 之後的「篩選列」「彈窗」樣式會接續加在本檔(同一檔逐輪長大)。
 *
 * 依賴:封面縮圖尺寸 case-card(600×400),主檔 add_image_size 註冊。
 * 注意:本檔**自帶 z-index**,不依賴 cars 那組全站 :root --z-* 變數(兩套卡片解耦)。
 * 受眾 85% 手機 → 一律手機優先(基準 = 手機 2 欄,像滑 FB)。
 */

/* ================================================
   牆:格線容器(前台模板 / GB Query Loop 套 .case-wall)
   手機 2 欄 → 平板 3 欄 → 桌機 4 欄
   ================================================ */
.case-wall {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 768px) {
	.case-wall {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
	}
}

@media (min-width: 1100px) {
	.case-wall {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ================================================
   卡片盒(外層;模板 / GB Loop Item 用 .case-card,並帶 post_class 供篩選)
   ================================================ */
.case-card {
	position: relative; /* 給隱形連結定位基準 */
	background: #fff;
	border: 0.5px solid #ede3d8;
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 只在支援 hover 的裝置上做浮起(手機不抖) */
@media (hover: hover) {
	.case-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 8px 22px rgba(180, 120, 80, 0.14);
	}
}

/* 整張卡可點的隱形大連結(蓋滿整卡;在最上層) */
.case-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 14px;
}

/* ================================================
   封面
   ================================================ */
.case-card__image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2; /* 對齊 600×400 */
	overflow: hidden;
	background: #f3efe9;
}

.case-card__image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* 沒有封面時的佔位底色,避免破圖 */
.case-card__noimg {
	width: 100%;
	height: 100%;
	background: #f3efe9;
}

/* 車型 badge(疊在封面左上角) */
.case-card__model {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1; /* 在圖之上、隱形連結之下(badge 不需可點) */
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
}

/* ================================================
   文字區
   ================================================ */
.case-card__body {
	padding: 10px 12px 12px;
}

.case-card__name {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
	/* 標題最多 2 行,超過 … */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.case-card__meta {
	margin-top: 6px;
}

.case-card__date {
	font-size: 12px;
	color: #9a8f82;
}

/* 維修主題小標 */
.case-card__topics {
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.case-card__topic {
	font-size: 11px;
	color: #7a6a58;
	background: #f4ece2;
	padding: 2px 7px;
	border-radius: 999px;
	line-height: 1.5;
}

/* ================================================
   彙整頁(/model/、/case-type/、/brand/、/topic/、/case/)頁首與版面
   ================================================ */
.jiama-case-archive {
	padding: 8px 0 40px;
}

.case-archive__head {
	margin: 4px 0 18px;
}

/* 軸別小標(品牌/車型/類型/維修主題) */
.case-archive__kicker {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #b07a4e;
}

.case-archive__title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.case-archive__title {
		font-size: 28px;
	}
}

/* 詞條介紹文(E-E-A-T;由後台各詞條的「說明」欄位填) */
.case-archive__intro {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.7;
	color: #5a5048;
}

.case-archive__intro p {
	margin: 0 0 0.6em;
}

/* 空狀態 */
.case-archive__empty {
	margin: 40px 0;
	text-align: center;
	color: #9a8f82;
}

/* 分頁(the_posts_pagination 產生 .pagination .nav-links) */
.jiama-case-archive .pagination {
	margin-top: 24px;
}

.jiama-case-archive .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.jiama-case-archive .pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 0.5px solid #ede3d8;
	border-radius: 10px;
	color: #5a5048;
	text-decoration: none;
	line-height: 1;
}

.jiama-case-archive .pagination .page-numbers.current {
	background: #b07a4e;
	border-color: #b07a4e;
	color: #fff;
	font-weight: 600;
}

@media (hover: hover) {
	.jiama-case-archive .pagination a.page-numbers:hover {
		border-color: #b07a4e;
		color: #b07a4e;
	}
}

/* ================================================
   篩選列(掛在卡片牆上方;只列本頁有 ≥2 值的軸)
   ================================================ */
.case-filter {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 18px;
	padding: 12px 14px;
	background: #faf6f1;
	border: 0.5px solid #ede3d8;
	border-radius: 12px;
}

@media (min-width: 768px) {
	.case-filter {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 18px;
	}
}

.case-filter__group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.case-filter__label {
	font-size: 12px;
	font-weight: 700;
	color: #b07a4e;
	flex: 0 0 auto;
}

/* chips */
.case-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.case-filter__chip {
	appearance: none;
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 7px 12px;
	border: 0.5px solid #e0d3c4;
	border-radius: 999px;
	background: #fff;
	color: #5a5048;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.case-filter__chip.is-active {
	background: #b07a4e;
	border-color: #b07a4e;
	color: #fff;
	font-weight: 600;
}

@media (hover: hover) {
	.case-filter__chip:not(.is-active):hover {
		border-color: #b07a4e;
		color: #b07a4e;
	}
}

/* 原生下拉 */
.case-filter__select {
	appearance: auto;
	font-size: 13px;
	padding: 7px 10px;
	border: 0.5px solid #e0d3c4;
	border-radius: 8px;
	background: #fff;
	color: #5a5048;
	max-width: 100%;
}

/* 篩到 0 筆時的訊息 */
.case-filter__none {
	margin: 32px 0;
	text-align: center;
	color: #9a8f82;
}

/* ================================================
   點卡彈窗(全文 + Splide 相簿 + 分享)
   ================================================ */
.case-modal[hidden] {
	display: none;
}

.case-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.case-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.62);
}

.case-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border-radius: 14px;
}

.case-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* 相簿輪播區:深色底 + 不裁切(維修照要看全) */
.case-modal__media {
	background: #111;
	border-radius: 14px 14px 0 0;
	overflow: hidden;
}

.case-modal__media[hidden] {
	display: none;
}

.case-modal__media .splide__slide img {
	display: block;
	width: 100%;
	height: 54vh;
	max-height: 520px;
	object-fit: contain;
	background: #111;
}

.case-modal__content {
	padding: 16px;
}

.case-modal__title {
	margin: 0 0 4px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.4;
}

.case-modal__date {
	margin: 0 0 12px;
	font-size: 13px;
	color: #9a8f82;
}

.case-modal__body {
	font-size: 15px;
	line-height: 1.75;
	color: #3a342e;
}

.case-modal__body p {
	margin: 0 0 0.8em;
}

.case-modal__actions {
	margin-top: 16px;
}

/* 分享鈕(LINE 綠,點了走原生分享/LINE) */
.case-modal__share {
	appearance: none;
	cursor: pointer;
	width: 100%;
	border: 0;
	border-radius: 10px;
	background: #06c755;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 18px;
}

/* 彈窗開啟時鎖背景捲動 */
body.case-modal-open {
	overflow: hidden;
}