/* ==========================================================================
   首页：首屏大图 + 横滑行

   风格延续「影院暗房」：近黑底、琥珀金强调、海报优先。
   首屏用「糊掉的海报当氛围底 + 清晰海报立在右边」——
   海报是竖版的，直接拉满宽度当背景会糊成一片色块，
   所以糊的那层只负责给页面顶部染上这部剧的颜色。
   ========================================================================== */

/* ---------------------------------------------------------------- 首屏 */
.vp-hero {
	position: relative;
	overflow: hidden;
	/* 顶部要垫开固定导航的高度 */
	padding: calc(var(--s-7) + 16px) 0 var(--s-6);
	margin-bottom: var(--s-5);
	isolation: isolate;
}

.vp-hero-bgs {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.vp-hero-bg {
	position: absolute;
	inset: -10%;
	background-size: cover;
	background-position: center 20%;
	/* 糊 + 压暗 + 提饱和：只留颜色，不留细节 */
	filter: blur(44px) saturate(1.6) brightness(.72);
	transform: scale(1.15);
	opacity: 0;
	transition: opacity .9s ease;
}

.vp-hero-bg.is-on {
	opacity: 1;
}

/* 上下都渐隐到页面底色，让大图「长」在页面里而不是贴上去的一块 */
.vp-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to right, rgba(10, 10, 12, .96) 0%, rgba(10, 10, 12, .72) 42%, rgba(10, 10, 12, .18) 100%),
		linear-gradient(to bottom, rgba(10, 10, 12, .85) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}

/* 颗粒感：一层极淡的噪点，把大面积渐变的「塑料感」压下去。
   用 SVG data URI，不请求外部资源（CSP 和无 CDN 的约束都满足） */
.vp-hero-grain {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .35;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.vp-hero-in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: var(--s-7);
	align-items: center;
}

.vp-hero-copy {
	max-width: 640px;
	animation: vp-hero-in .55s ease both;
}

@keyframes vp-hero-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.vp-hero-kicker {
	display: inline-block;
	margin-bottom: var(--s-3);
	padding: 3px 10px;
	border: 1px solid var(--accent-line);
	border-radius: var(--r-pill);
	color: var(--accent);
	font-size: 12px;
	/* 字距拉开，小字才有「标签」的样子 */
	letter-spacing: .18em;
	text-indent: .18em;
}

.vp-hero-title {
	margin: 0 0 var(--s-3);
	font-size: clamp(30px, 5vw, 60px);
	font-weight: 800;
	line-height: 1.1;
	/* 大字负字距，中文标题才不会显得松散 */
	letter-spacing: -.02em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .6);

	/* 超长剧名压到两行封顶，别撑成三四行。
	   🔴 桌面**不需要**再保底两行高：两栏布局里这一行的高度由右边 340 px 的海报决定，
	   文字块最多也就 266 px，怎么变都吃不满 —— 强行保底只会在标题下方白空一整行
	   （桌面字号 60 px，那是 66 px 的空洞）。保底放在窄屏那档，理由见那里。 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vp-hero-meta {
	color: var(--text-2);
	font-size: 14px;
	margin-bottom: var(--s-3);
}

.vp-hero-desc {
	margin: 0 0 var(--s-5);
	color: var(--text-2);
	line-height: 1.8;
	/* 简介长短不一，统一压成两行，右边那张海报的位置才不会上下跳 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vp-hero-btns {
	display: flex;
	gap: var(--s-3);
	flex-wrap: wrap;
}

/* 🔴 容器高度定死，图在里面垂直居中。
   海报**故意不锁比例**（下面那条注释解释了原因：本站封面有竖版也有横版截图），
   于是横版图高 150、竖版图高 345 —— 轮播一切换，首屏高度就跳 70 px，
   下面整片内容跟着上下窜，正在看的位置全乱。2026-08-26 修。
   定高的是容器不是图片：图片该多高还是多高、不裁不变形，只是矮的那张上下留空。 */
.vp-hero-art {
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 右边那张清晰海报，稍微立起来一点 */
.vp-hero-poster {
	display: block;
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .65), 0 0 0 1px var(--accent-line);
	transform: perspective(900px) rotateY(-6deg);
	transition: transform .35s ease;
	background: var(--bg-elev);
	/* 🔴 不锁死比例：本站封面有竖版海报，也有从视频里截的横版图，
	   写死 2/3 会把横版裁成中间一条。让图自己决定高度，只压一个上限 */
	max-height: 340px;
}

.vp-hero-poster:hover {
	transform: perspective(900px) rotateY(0) translateY(-4px);
}

.vp-hero-poster img {
	width: 100%;
	height: auto;
	max-height: 340px;
	object-fit: cover;
	display: block;
}

.vp-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--s-3);
	display: flex;
	justify-content: center;
	gap: var(--s-2);
}

.vp-hero-dot {
	width: 26px;
	height: 3px;
	border: none;
	padding: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background .25s ease, width .25s ease;
}

.vp-hero-dot.is-on {
	width: 40px;
	background: var(--accent);
}

/* ---------------------------------------------------------------- 区块 */
/* 🔴 区块的**通用**样式（外边距、标题栏、「查看全部」）已经搬到 core.css ——
   那三样是 rail.js 生成的结构，rail.js 是框架层，任何页面都可能用它。
   放在这个只有首页加载的文件里，播放页的侧栏标题就会掉成两行没样式的块元素
   （真踩过）。这里只留首页自己的排版。 */

/* 分类行的 4 列网格 —— 首页的主角，卡片要大。
   🔴 这里是**固定 4 列**，不是 auto-fill —— 后端每个分类只给 4 条
   （HomeFuncs.ROW_LIMIT），用 auto-fill 的话宽屏会排 9 列、右边空一片。
   两处的 4 要一起改。 */
.vp-grid-row {
	grid-template-columns: repeat(4, 1fr);
}

/* 首页底部「全部内容」固定 6 列。
   它是**翻页浏览**用的，一屏要能看到尽量多的条目，所以比分类行密。
   其它列表页（分类/搜索/收藏）仍走 core.css 里的 auto-fill，不受这条影响 */
.vp-home-all .vp-grid {
	grid-template-columns: repeat(6, 1fr);
}

.vp-rail-body {
	position: relative;
}

.vp-rail-track {
	display: flex;
	gap: var(--s-4);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	/* 火狐/旧 webkit 各一套，两个都要写 */
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* 卡片有 hover 放大，容器不留余量的话上下会被裁掉 */
	padding: 4px 2px 10px;
	scroll-padding-left: 2px;
}

.vp-rail-track::-webkit-scrollbar {
	display: none;
}

.vp-rail-item {
	flex: 0 0 auto;
	width: 168px;
	scroll-snap-align: start;
}

/* 帖子是横版宽卡，单独给个宽度 */
.vp-rail-item .vp-card-post {
	width: 280px;
}

.vp-rail-item:has(.vp-card-post) {
	width: 280px;
}

/* 首页图集行只是「概览」，280 px 宽的卡放不下摘要和四格缩略图 ——
   那两块是 /posts 列表页的排面，这里收起来，只留封面 + 标题 + 角标 */
.vp-rail-item .vp-card-sum,
.vp-rail-item .vp-thumbs {
	display: none;
}

/* 同理，168 px 宽的横滑卡（继续观看）放不下两行简介 —— 那点宽度一行塞不下几个字。
   排行行（296 px）和分类网格行（470 px）够宽，留着 */
.vp-rail:not(.is-rank) .vp-rail-item .vp-card-brief {
	display: none;
}

/* 左右箭头：平时半透明，鼠标进这一行才亮起来 */
.vp-rail-nav {
	position: absolute;
	top: 0;
	bottom: 10px;
	z-index: 2;
	width: 44px;
	border: none;
	color: var(--text);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}

.vp-rail-nav.is-prev {
	left: -2px;
	background: linear-gradient(to right, var(--bg) 30%, transparent);
}

.vp-rail-nav.is-next {
	right: -2px;
	background: linear-gradient(to left, var(--bg) 30%, transparent);
}

.vp-rail-body:hover .vp-rail-nav,
.vp-rail-nav:focus-visible {
	opacity: 1;
}

/* 内容不够一屏时两个箭头都不出现（has-overflow 由 rail.js 打） */
.vp-rail:not(.has-overflow) .vp-rail-nav {
	display: none;
}

/* ---------------------------------------------------------------- 排行行 */
/* 一屏正好 6 个，第 7-10 名横滑出来。
   🔴 用 calc 而不是写死 px —— 内容区宽度会随 --max-w 和窗口变，
   写死的话换个屏就变成 5 个半。100% = 轨道宽，减掉 5 个间隙再六等分 */
.vp-rail.is-rank .vp-rail-item {
	width: calc((100% - 5 * var(--s-4)) / 6);
}

/* 名次数字（.vp-rank / .vp-rank-no）已删除 —— 大号描边数字压在海报上
   反而抢了封面。要找那段样式的话，在 git 里 */

/* ---------------------------------------------------------------- 浏览模式 */
/* 顶栏点了某个分类（或点了标签）之后的样子：首屏大图和所有横滑行收起来，
   整页只剩下面那块网格。
   🔴 这两块是**全站概览**，按分类筛没有意义（分类行本身就是按分类分好的）。
   不收起来的话，用户点「短剧」看到的还是同一屏东西 —— 变的那块在好几屏以下。 */
.vp-home.is-browse .vp-hero,
.vp-home.is-browse .vp-home-rails {
	display: none;
}

/* 大图原本兼着垫开固定导航的高度，它一藏就得有人接上。
   比首页少一档 —— 首页那 16px 是给大图透气用的，这里上面就是页头 */
.vp-home.is-browse {
	padding-top: calc(var(--s-6) + 16px);
}

/* 上面没东西了，那条分隔线就成了页面第一行，很突兀 */
.vp-home.is-browse .vp-home-all {
	padding-top: 0;
	border-top: none;
}

/* 页头（大标题 + 条数 + 「← 返回首页」）是列表类页面共用的，样式在 page-list.css
   的 `.vp-filters.is-head` 里 —— 图集列表页用的是同一套。
   这个 class 由 index.js 在进浏览模式时打上 */

/* ---- 浏览模式的网格 ----
   一行 4 张封面大卡（见 card.js 的 seriesCover）。
   间距比别处大一档：卡片本身就大，16 px 会让整面墙挤成一块 */
.vp-home.is-browse .vp-grid {
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-5);
}

/* ---------------------------------------------------------------- 底部全部内容 */
.vp-home-rails {
	margin-bottom: var(--s-6);
}

.vp-home-all {
	padding-top: var(--s-5);
	border-top: 1px solid var(--line);
}

/* 中屏：窗口小于 1500 时 4 列每张不到 360 px，降到 3 列让封面继续保持存在感。
   🔴 这三个断点必须**从宽到窄**排（1500 → 1024 → 768）：
   同特异性下后写的赢，顺序反了窄屏会被宽屏那条盖掉 */
@media (max-width: 1500px) {
	.vp-home.is-browse .vp-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* 平板：内容区已经不到 1024，6 列每张才 160 px，降到 4 列 */
@media (max-width: 1024px) {
	.vp-home-all .vp-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* 平板：3 列每张不到 330 px，降到 2 列 */
	.vp-home.is-browse .vp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width: 768px) {
	.vp-hero {
		padding-top: calc(var(--s-7) + 16px);
		min-height: 0;
	}

	/* 手机上放不下两栏，改成单列、海报挪到标题上方。
	   🔴 这里以前写的是 `.vp-hero-art { display: none }` —— 和上面这句注释对不上，
	   实际效果是首屏只剩文字，一张图都没有。2026-08-26 按注释原本的意思补上。 */
	.vp-hero-in {
		grid-template-columns: 1fr;
		gap: var(--s-4);
	}

	.vp-hero-art {
		/* DOM 里文字在前、海报在后，靠 order 把海报提到上面，不动模板结构 */
		order: -1;
		justify-self: center;
		width: min(220px, 62%);
		/* 和桌面同理：定高防止切换时首屏高度跳。手机上抖得更凶（实测 175 px） */
		height: 300px;
	}

	/* 🔴 单列布局里海报和文字是上下叠的，文字高度直接加进首屏总高。
	   剧名长短不一（「魔改 金庸武侠世界之铁血丹心」折两行、别的一行），
	   轮播一切换首屏就跳 33 px，下面整片内容跟着上下窜。
	   保底两行高把它钉住（2 × line-height 1.1）。短标题下方空一行，
	   但这一档字号只有 30 px，空的那点远比整页乱窜好。
	   简介早就这么做了（line-clamp: 2），当初漏了标题。 */
	.vp-hero-title {
		min-height: 2.2em;
	}

	.vp-hero-poster {
		/* 立体旋转是给桌面大图用的，缩到 220px 只剩「歪了」的观感；
		   触屏也没有 hover 可以把它转正 */
		transform: none;
		max-height: 300px;
		box-shadow: 0 12px 32px rgba(0, 0, 0, .6), 0 0 0 1px var(--accent-line);
	}

	.vp-hero-poster:hover {
		transform: none;
	}

	.vp-hero-poster img {
		max-height: 300px;
	}

	.vp-hero::after {
		background:
			linear-gradient(to bottom, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .9) 70%, var(--bg) 100%);
	}

	/* 手机上保持 2 列 —— 一列一张 2/3 的海报会有一屏那么高，翻起来太慢。
	   hover 在触屏上不存在，简介那截看不到，只剩标题压在封面上，够用 */
	.vp-home.is-browse .vp-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--s-3);
	}

	.vp-home.is-browse .vp-card-title {
		font-size: 14px;
	}

	/* 手机上 4 列每张才 80 来像素，海报根本看不清，改 2 列。
	   后端给 4 条，2×2 正好铺满，不留半排 */
	.vp-grid-row,
	.vp-home-all .vp-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.vp-rail-item {
		width: 132px;
	}

	/* 手机上六等分每张才 60 px，回到固定宽度靠手指滑 */
	.vp-rail.is-rank .vp-rail-item {
		width: 168px;
	}

	.vp-rail-item .vp-card-post,
	.vp-rail-item:has(.vp-card-post) {
		width: 220px;
	}

	/* 触屏靠手指滑，箭头没用还挡内容 */
	.vp-rail-nav {
		display: none;
	}
}

/* 系统开了「减少动态效果」就别动 —— 自动轮播的淡入淡出也一并停掉 */
@media (prefers-reduced-motion: reduce) {
	.vp-hero-copy,
	.vp-hero-bg,
	.vp-hero-poster {
		animation: none;
		transition: none;
	}
}

/* 一行里卡片高度对齐：标题一行和两行的差别会让整行参差不齐。
   固定标题两行的高度，短标题下面留白，但整行是齐的 */
.vp-rail-item .vp-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}