/*
 * /templates — 模板商店
 *
 * 视觉对齐 yuanpu.cc/templates（nerdstack 设计系统）。
 * 数值逐条取自参考站，未做近似：
 *   卡片边框/阴影/圆角  → yuanpu.cc 的 _next chunk CSS（.card-shadow / .template-card-thumb）
 *   缩略图比例          → 元素内联样式 aspect-ratio:3/4
 *   网格列数与间距       → 元素内联样式 repeat(4,1fr)/gap:2rem + chunk CSS 的三个断点
 *   边栏/排序动效       → 参考站自己的内联 <style>（.yp-tabs* / .yp-sort*）
 *
 * 全部选择器收在 `.bbh-tpl` 之下。RiPro V5 带 Bootstrap 5，全局选择器会互相
 * 污染（.container/.row/.col 都已被占用），所以这里不写任何裸选择器。
 */

/* ---------------------------------------------------------------------------
   1. 页面外壳
   ------------------------------------------------------------------------ */

.bbh-tpl {
	--bbh-ink: #231f23;
	--bbh-ink-muted: #231f237a;
	--bbh-title: #111827;
	--bbh-border: #e5e7eb;
	--bbh-border-hover: #d1d5db;
	--bbh-thumb-bg: #f3f4f6;

	/* 容器宽度：对齐参考站的实测几何。
	   参考站在 1440 视口下：外层盒 1248 宽、左边距 96；1280 视口下：1248 宽、边距 16。
	   那正好是「内容 1248 + 两侧 1rem 内边距」，也就是 max-width 1280。
	   之前写 1440/2rem 会把卡片从 228px 撞成 260px，四列位置全对不上。 */
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem 5rem;
	/* 参考站在 .page-wrapper 里裁掉横向溢出；这里给网格同样的裁切。 */
	overflow-x: clip;
}

/* 参考站 hero 的 padding-top 是 2.5rem，移动端 1.5rem。 */
.bbh-tpl .bbh-hero {
	padding-top: 2.5rem;
}

/* 页面标题 tag —— 复刻 nerdstack 的 .label-master/.label_circle/.label-large。 */
.bbh-tpl .bbh-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid #231f2314;
	border-radius: 0.5rem;
	background-color: transparent;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--bbh-ink);
}

.bbh-tpl .bbh-tag-circle {
	width: 0.63rem;
	height: 0.63rem;
	border-radius: 0.13rem;
	background-color: #ed7472;
	flex: 0 0 auto;
}

.bbh-tpl .bbh-tag-text {
	font-size: 0.9375rem;
	line-height: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--bbh-ink);
}

/* ---------------------------------------------------------------------------
   2. 边栏 + 内容两栏
   ------------------------------------------------------------------------ */

.bbh-tpl .bbh-tabs {
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: flex-start;
	gap: 3rem;
	padding-top: 1.5rem;
	padding-bottom: 5rem;
}

.bbh-tpl .bbh-tabs-menu {
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 auto 0 0;
	position: sticky;
	top: 7.5rem;
	width: 12rem;
	flex: 0 0 auto;
	/* 分类多于一屏时边栏内部滚动，避免被裁切。 */
	max-height: calc(100vh - 9rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(35, 31, 35, 0.2) transparent;
	padding-right: 0.25rem;
}

.bbh-tpl .bbh-tabs-menu::-webkit-scrollbar {
	width: 4px;
}

.bbh-tpl .bbh-tabs-menu::-webkit-scrollbar-track {
	background: transparent;
}

.bbh-tpl .bbh-tabs-menu::-webkit-scrollbar-thumb {
	background-color: rgba(35, 31, 35, 0.2);
	border-radius: 9999px;
}

.bbh-tpl .bbh-tabs-menu::-webkit-scrollbar-thumb:hover {
	background-color: rgba(35, 31, 35, 0.4);
}

.bbh-tpl .bbh-tabs-label {
	font-size: 0.75rem;
	line-height: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bbh-ink-muted);
	margin-bottom: 0.5rem;
	flex-shrink: 0;
}

.bbh-tpl .bbh-tab-link {
	display: block;
	padding: 0;
	background-color: transparent;
	color: var(--bbh-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	/* 参考站的颜色过渡：subtle → strong，0.3s。 */
	transition: color 0.3s ease;
	flex-shrink: 0;
	word-break: break-word;
}

.bbh-tpl .bbh-tab-link:hover,
.bbh-tpl .bbh-tab-link.is-active {
	color: var(--bbh-ink);
}

.bbh-tpl .bbh-tabs-content {
	flex: 1 1 0%;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   3. 排序条
   ------------------------------------------------------------------------ */

.bbh-tpl .bbh-sort {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
}

.bbh-tpl .bbh-sort-link {
	flex-shrink: 0;
	padding: 0;
	background-color: transparent;
	color: var(--bbh-ink-muted);
	font-size: 0.9375rem;
	line-height: 1.5rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.3s ease;
	white-space: nowrap;
}

.bbh-tpl .bbh-sort-link:hover,
.bbh-tpl .bbh-sort-link.is-active {
	color: var(--bbh-ink);
}

/* 结果计数 —— 参考站没有，但动态页面需要一个「现在是第几屏」的锚点。 */
.bbh-tpl .bbh-count {
	font-size: 0.8125rem;
	line-height: 1.25rem;
	color: #848b98;
	margin-left: auto;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   4. 网格
   ------------------------------------------------------------------------ */

.bbh-tpl .bbh-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
}

/* ---------------------------------------------------------------------------
   5. 卡片
   ------------------------------------------------------------------------ */

.bbh-tpl .bbh-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.bbh-tpl .bbh-card-thumb {
	background: #fff;
	border: 1px solid var(--bbh-border);
	border-radius: 0.75rem;
	transition: border-color 0.2s;
	overflow: hidden;
	/* 参考站的两级阴影：静止 1px，悬停放大。 */
	box-shadow: 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
}

.bbh-tpl .bbh-card:hover .bbh-card-thumb {
	border-color: var(--bbh-border-hover);
	box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
}

.bbh-tpl .bbh-card-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--bbh-thumb-bg);
	overflow: hidden;
}

.bbh-tpl .bbh-card-frame img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.3s;
}

.bbh-tpl .bbh-card-text {
	padding-top: 0.625rem;
}

.bbh-tpl .bbh-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.bbh-tpl .bbh-card-title {
	font-size: 0.875rem;
	font-weight: 700;
	/* 行高必须写死。参考站的标题继承到 24px（它 body 的 1.714），而 RiPro 的
	   body 是 1.5 → 21px，不写就会让标题块矮 3px，下面整排文字跟着上移。 */
	line-height: 24px;
	color: var(--bbh-title);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}

.bbh-tpl .bbh-card-price {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	flex-shrink: 0;
}

.bbh-tpl .bbh-card-price span {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 24px;
	color: var(--bbh-title);
}

.bbh-tpl .bbh-card-tags {
	margin-top: 0.375rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.bbh-tpl .tag-pill {
	color: #848b98;
	border: 1px solid #00000026;
	border-radius: 6.25rem;
	padding: 0.0625rem 0.375rem;
	font-size: 0.6875rem;
	/* 同上：参考站继承到 300，RiPro 继承到 500。 */
	font-weight: 300;
	line-height: 1.2;
	display: inline-block;
}

/* 空状态 —— 参考站是纯静态页，没有这个状态；这里 JSON 为空时给一句话，
   否则编辑会以为页面坏了。 */
.bbh-tpl .bbh-empty {
	padding: 3rem 0;
	color: #848b98;
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------
   6. 分页（对齐 RiPro 的 .page-nav，但收在本页作用域内）
   ------------------------------------------------------------------------ */

.bbh-tpl .bbh-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
}

.bbh-tpl .bbh-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--bbh-border);
	border-radius: 0.5rem;
	color: var(--bbh-ink-muted);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.2s, border-color 0.2s;
}

.bbh-tpl .bbh-pagination .page-numbers:hover,
.bbh-tpl .bbh-pagination .page-numbers.current {
	color: var(--bbh-ink);
	border-color: var(--bbh-border-hover);
}

/* ---------------------------------------------------------------------------
   7. 断点

   列数与间距逐条取自参考站的 chunk CSS。
   但参考站在 ≤991 把边栏整个 `display:none` 换成一颗切换按钮，而且网格宽度
   不再占满容器（991 实测只有 539px，于是一张卡只剩 158px）——那是它自己的
   缺陷（.yp-tabs 是 column 纵向 + align-items:flex-start，子项收缩到内容宽），
   不是设计意图。这里保留它的列数/间距，但把边栏改成上下堆叠、网格占满容器。
   ------------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
	.bbh-tpl .bbh-hero {
		padding-top: 1.5rem;
	}

	.bbh-tpl .bbh-tabs {
		flex-flow: column;
		gap: 0;
		padding-top: 1.5rem;
	}

	.bbh-tpl .bbh-tabs-menu {
		position: static;
		width: 100%;
		margin: 0 0 1.5rem;
		max-height: none;
		overflow-y: visible;
		padding-right: 0;
	}

	.bbh-tpl .bbh-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 767px) {
	.bbh-tpl .bbh-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}

@media screen and (max-width: 380px) {
	.bbh-tpl .bbh-grid {
		grid-template-columns: 1fr;
	}
}