/* ------------------------------------------------------------------
 * 四格漫画列表（图片浏览模块 · productimgs 页专用，只在有漫画时注入）
 *
 * 结构沿用旧站：`.product-banner > .bds.wrap > .t1 + ul > li > .product-image + .txt`
 * 但列表改用 CSS Grid 重排 —— 旧站的
 *     `.product-banner .bds li{ float:left; width:calc((100% - 242px)/4) }`
 * 依赖容器宽度确定，一旦被 mCustomScrollbar 之类包一层（源站就是这样）就会塌成几十像素；
 * 且旧 CSS 里 `.product-image` 没有高度（旧写法是 `.imgs{height:118px}`），
 * 导致源站自己的四格漫画页卡片高度为 0、文字互相压在一起。
 *
 * 本文件只做两件事：
 *   1. 卡片网格排布（4 / 3 / 2 列，窄屏不掉行）
 *   2. 封面自适应：固定比例盒（3:2）+ cover + **顶部对齐**（竖长漫画只展示开头一段）
 * 其余颜色/字号沿用旧站（h3 #948dff 标题、h4 #fff 描述、黑底 .txt）。
 * ------------------------------------------------------------------ */

/* 列表上文案（源站没有，加一行说明当前图集与话数） */
.product-banner .bds .comic-tip {
	margin: 26px 130px -8px;
	padding-right: 40px;
	color: #9aa0a6;
	font-size: 14px;
	line-height: 1.7;
}
.product-banner .bds .comic-tip code {
	color: #948dff;
}
.product-banner .bds .comic-empty {
	color: #c8c8cf;
}

/* 卡片网格（覆盖旧站的 float + calc 宽度）。
   封面高度减半后卡片变矮，列表区高度相应放宽，让可视行数回到合理范围 */
.product-banner .bds ul.comic-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 26px 30px;
	align-content: start;
	height: calc(100vh - 480px);
	min-height: 260px;
	margin: 34px 130px 0;
	padding: 2px 40px 2px 0;
	overflow-x: hidden;
	overflow-y: auto;
}

/* 网格项：清掉旧站的 float/宽度/右边距（旧规则的 calc 宽度在容器宽度不定时会塌） */
.product-banner .bds ul.comic-list > li {
	float: none;
	width: auto;
	margin: 0;
	box-shadow: none;
}

.product-banner .bds .comic-item {
	display: block;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease;
}
.product-banner .bds .comic-item:hover {
	transform: translateY(-4px);
}

/* 封面：固定比例盒 + cover，**从顶部向下绘制**
   漫画是 ~700×1600 竖长图，封面只截顶部一段（标题栏 + 开头画面）——
   所以高度取 3:2（比 3:4 矮一半），且 `background-position: center top` 从图顶对齐，
   而不是旧写法 `center/cover`（会把图片中间段截出来，看不到开头） */
.product-banner .bds .comic-item .product-image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	border-radius: 3px;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, .35);
}
/* 老浏览器没有 aspect-ratio 时：给个兜底高度（宽度按 4 列推算约 257px） */
@supports not (aspect-ratio: 3 / 2) {
	.product-banner .bds .comic-item .product-image {
		height: 171px;
	}
}

/* 文案块：标题（紫）+ 描述（白），描述允许折两行（旧站 nowrap 会把长标题截断） */
.product-banner .bds .comic-item .txt {
	padding: 10px;
	text-align: center;
}
.product-banner .bds .comic-item .txt h3 {
	font-size: 18px;
	line-height: 1.6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.product-banner .bds .comic-item .txt h4 {
	font-size: 14px;
	line-height: 1.5;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 窄屏（页面视口是 750px 的移动端模式，实际 CSS 宽度多为 375~430） */
@media only screen and (max-width: 1100px) {
	.product-banner .bds ul.comic-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 18px 18px;
		height: calc(100vh - 440px);
		margin: 22px 24px 0;
		padding-right: 14px;
	}
	.product-banner .bds .comic-tip {
		margin: 18px 24px -4px;
		padding-right: 14px;
		font-size: 13px;
	}
	.product-banner .bds .comic-item .txt h3 {
		font-size: 16px;
	}
	.product-banner .bds .comic-item .txt h4 {
		font-size: 12px;
	}
}

@media only screen and (max-width: 560px) {
	.product-banner .bds ul.comic-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px 12px;
	}
	.product-banner .bds .comic-item .txt {
		padding: 8px 6px;
	}
}