/* ==========================================================================
   列表类页面（首页 / 搜索 / 图集列表 / 我的）共用的筛选条样式。
   卡片、网格、分页器都在 core.css 里，这里只有"筛选区"这一块。
   ========================================================================== */

.vp-filters {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-bottom: var(--s-3);
}

/* 标签云。行高压紧一点，不然一屏被标签占掉一半 */
.vp-tags {
	gap: var(--s-2);
	margin-bottom: var(--s-4);
}

.vp-tags:empty {
	display: none;
}

/* 搜索页的结果统计 */
.vp-result-info {
	color: var(--text-2);
	font-size: 14px;
	margin-bottom: var(--s-4);
}

.vp-result-info b {
	color: var(--accent);
	font-family: var(--font-mono);
}

/* 「我的」页的三个标签页 */
.vp-tabs {
	display: flex;
	gap: var(--s-1);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s-5);
}

.vp-tab {
	padding: var(--s-3) var(--s-4);
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: var(--text-2);
	font-size: 15px;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.vp-tab:hover {
	color: var(--text);
}

.vp-tab.is-on {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* ---------------------------------------------------------------- 页头 */
/* 列表类页面的页头，两行：

       ← 返回首页
       短剧  7 部                  [最近更新][最多播放][最多点赞][最新入库]

   靠 .vp-back 占满一整行把后面的挤下去（.vp-filters 本来就是 flex-wrap），
   不用为它再套一层容器。
   首页由 index.js 在进浏览模式时打上 `is-head`，图集列表页模板里直接写死 ——
   🔴 两个页面共用这一份，不许各写各的。 */
.vp-filters.is-head {
	align-items: flex-end;
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--s-4);
}

/* 这一页叫什么是主角，给到 hero 副标题量级的字号。
   margin 清零：.vp-sec-title 默认带 24px 上边距（它本来是夹在区块之间的），
   在页头里那截空白会把条数挤到标题下面去，对不上基线 */
.vp-filters.is-head .vp-sec-title {
	margin: 0;
	font-size: 28px;
	letter-spacing: -.02em;
}

/* 「7 部」贴着标题走，弱化成次要信息 */
.vp-count {
	color: var(--text-3);
	font-size: 13px;
	font-family: var(--font-mono);
	align-self: flex-end;
	padding-bottom: 3px;
}

.vp-count:empty {
	display: none;
}

/* 「← 返回首页」。首页模板里它一直在，非浏览模式靠这条藏起来。
   退出浏览模式是**跳转**不是切 class —— 这样首屏和横滑行不用
   为了「可能要退回去」白请求一遍 */
.vp-back {
	display: none;
	color: var(--text-3);
	font-size: 13px;
	white-space: nowrap;
}

.vp-back:hover {
	color: var(--accent);
}

.vp-filters.is-head .vp-back {
	display: block;
	flex: 0 0 100%;
	margin-bottom: var(--s-1);
}

@media (max-width: 768px) {
	.vp-filters.is-head .vp-sec-title {
		font-size: 22px;
	}

	/* 手机上内容区窄，页签一靠左整页重心就偏了；居中更稳。
	   用到 .vp-tabs 的只有「我的」和登录页，登录卡片本来就居中，不冲突。
	   🔴 不要为居中加 overflow-x: auto —— 两者一起用时，内容一旦溢出，
	      开头会被裁在滚动区左边外面且滚不回去。现在三个页签在 375 px 下排得开。 */
	.vp-tabs {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------- 图集列表 */
/* 固定 3 列。图集卡信息多（封面 + 标题两行 + 摘要两行 + 四格缩略图），
   走 core.css 那条 auto-fill(260px) 的话宽屏会排到 7 列，每张 260 px
   连缩略图都摆不开 —— 卡片被内容撑变形，而不是内容适应卡片。
   🔴 断点从宽到窄写，顺序反了窄屏会被宽屏那条盖掉 */
.vp-posts-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
}

@media (max-width: 1400px) {
	.vp-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.vp-posts-grid {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	/* 手机上一行一张卡，四格缩略图每格能有 80 px，正好 */
	.vp-thumb {
		height: 68px;
	}
}