/**
 * 璐宝 3D 别墅 · 项目分类列表页（/villa 档案页）
 * 配套短代码：[lubao_3d_villa_filter_list]
 * 视觉对齐主题 building-color 列表：浅灰页面底 + 白卡片 + 标题蓝色小横杠 + 分类灰字 + 浏览/下载图标
 * 布局：PC 端 3 列网格；平板 2 列（断点 1024px）；手机 1 列（断点 640px）；容器左右超窄边距（8px）
 * 暗色模式（v1.1.84）：颜色全部走 AeroCore 主题 CSS 变量（html[data-theme="dark"] 时
 * 主题自动切换变量值），与 building-color 等页面暗色观感一致；无主题变量的环境回退浅色兜底。
 */

.lbv-page {
	/* 局部色彩变量：优先取主题变量（跟随亮/暗自动切换），无主题时用浅色兜底 */
	--lbv-bg: var(--bg-body, #f6f7f9);
	--lbv-card: var(--bg-card, #fff);
	--lbv-text: var(--text-primary, #111827);
	--lbv-text-2: var(--text-secondary, #6b7280);
	--lbv-text-3: var(--text-muted, #9ca3af);
	--lbv-border: var(--border-primary, #eef0f3);
	--lbv-border-soft: var(--border-secondary, #f1f3f6);
	--lbv-hover-border: #dbeafe;
	--lbv-chip-border: #a8c8f0;
	--lbv-chip-text: #2f7de1;
	--lbv-accent: #3b82f6;
	--lbv-shadow: var(--shadow-sm, 0 1px 3px rgba(17, 24, 39, .04));
	--lbv-shadow-hover: var(--shadow-md, 0 12px 28px rgba(17, 24, 39, .12));

	background: var(--lbv-bg);
	padding: 28px 0 64px;
	min-height: 60vh;
}

/* 主题暗色模式下的微调：链接蓝提亮、悬浮边框改深蓝（对比度适配暗底） */
html[data-theme="dark"] .lbv-page {
	--lbv-hover-border: #3b82f6;
	--lbv-chip-border: rgba(96, 165, 250, .55);
	--lbv-chip-text: #7ab3f8;
	--lbv-accent: #60a5fa;
}

.lbv-wrap {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 8px; /* 超窄边框：仅留 8px 呼吸位 */
}

/* ===== 页头（已按需求移除标题/副标题，仅保留占位） ===== */

/* ===== 筛选条（旧版 building-color 紧凑排版）===== */
.lbv-filters {
	background: var(--lbv-card);
	border: 1px solid var(--lbv-border);
	border-radius: 8px;
	padding: 2px 18px;
	margin-bottom: 22px;
	box-shadow: var(--lbv-shadow);
}

.lbv-filter-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--lbv-border-soft);
	font-size: 14px;
	line-height: 1.9;
}

.lbv-filter-row:last-child {
	border-bottom: none;
}

.lbv-filter-label {
	flex: 0 0 auto;
	font-weight: 600;
	color: var(--lbv-text);
}

.lbv-filter-opts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	min-width: 0;
}

/* 「全部」与选中项：细边框方角按钮（旧版样式） */
.lbv-chip {
	display: inline-block;
	padding: 1px 12px;
	border: 1px solid var(--lbv-chip-border);
	border-radius: 3px;
	background: var(--lbv-card);
	color: var(--lbv-chip-text);
	font-size: 14px;
	line-height: 1.7;
	text-decoration: none;
	white-space: nowrap;
	transition: all .15s ease;
}

.lbv-chip:hover {
	border-color: var(--lbv-chip-text);
}

/* 未选中选项：纯文本链接 */
.lbv-opt {
	color: var(--lbv-text-2);
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}

.lbv-opt:hover {
	color: var(--lbv-chip-text);
	text-decoration: underline;
}

/* 选中的选项：与「全部」同款边框按钮 */
.lbv-opt.active {
	display: inline-block;
	padding: 1px 12px;
	border: 1px solid var(--lbv-chip-border);
	border-radius: 3px;
	background: var(--lbv-card);
	color: var(--lbv-chip-text);
	line-height: 1.7;
}

/* ===== 卡片网格：PC 3 列 ===== */
.lbv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* 平板 2 列 */
@media (max-width: 1024px) {
	.lbv-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.lbv-filter-row {
		flex-direction: column;
		gap: 4px;
		padding: 8px 0;
	}
}

/* 手机 1 列（大图通栏，对齐旧版列表观感） */
@media (max-width: 640px) {
	.lbv-page {
		padding: 16px 0 48px;
	}

	.lbv-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.lbv-filters {
		padding: 2px 12px;
		margin-bottom: 16px;
	}

	.lbv-card-body {
		padding: 12px 14px 14px;
	}

	.lbv-thumb {
		font-size: 24px;
	}
}

.lbv-card {
	display: block;
	border: 1px solid var(--lbv-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--lbv-card);
	text-decoration: none;
	color: inherit;
	box-shadow: var(--lbv-shadow);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.lbv-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lbv-shadow-hover);
	border-color: var(--lbv-hover-border);
}

.lbv-thumb {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, #1e293b, #3b82f6);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	overflow: hidden;
}

.lbv-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lbv-card-body {
	padding: 14px 16px 16px;
}

.lbv-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--lbv-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3em;
}

/* 标题下的蓝色小横杠（与主题效果图列表一致） */
.lbv-title::after {
	content: "";
	display: block;
	width: 28px;
	height: 3px;
	margin-top: 8px;
	border-radius: 2px;
	background: var(--lbv-accent);
}

.lbv-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 10px;
}

.lbv-cats {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	color: var(--lbv-text-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lbv-stats {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
}

.lbv-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--lbv-text-3);
	line-height: 1;
}

.lbv-stat svg {
	display: block;
}

/* ===== 空结果 ===== */
.lbv-empty {
	padding: 56px 0;
	text-align: center;
	color: var(--lbv-text-3);
	font-size: 15px;
}

/* ===== 底部页码 ===== */
.lbv-pagination {
	margin-top: 32px;
}

.lbv-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

.lbv-pagination .page-numbers {
	display: inline-block;
	min-width: 40px;
	padding: 8px 15px;
	border: 1px solid var(--lbv-border);
	border-radius: 8px;
	background: var(--lbv-card);
	color: var(--lbv-text-2);
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	line-height: 1.4;
	transition: all .15s ease;
}

.lbv-pagination a.page-numbers:hover {
	border-color: var(--lbv-accent);
	color: var(--lbv-accent);
}

.lbv-pagination .page-numbers.current {
	background: var(--lbv-accent);
	border-color: var(--lbv-accent);
	color: #fff;
	font-weight: 600;
}