/**
 * DISK_MB 文章/产品等「分类列表页」顶区 Banner（MbCategoryListBannerDiskSupport）
 * 推荐素材：1920×600（约 16:5）；全宽 cover，大屏按该比例随视口增高。
 */
.ywx-category-list-banner {
	--ywx-category-banner-header-offset: 110px;
	--ywx-category-banner-min: 400px;
	/* 设计稿基准（上传建议同此） */
	--ywx-category-banner-design-w: 1920;
	--ywx-category-banner-design-h: 600;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: calc(var(--ywx-category-banner-header-offset) + clamp(2rem, 5vw, 3rem)) 0
		clamp(2.5rem, 6vw, 3.5rem);
	min-height: calc(var(--ywx-category-banner-min) + var(--ywx-category-banner-header-offset));
}

/* 有背景图：大屏按 1920×600 比例拉高，减少方图被横向猛裁 */
.ywx-category-list-banner--image {
	min-height: max(
		calc(var(--ywx-category-banner-header-offset) + var(--ywx-category-banner-min)),
		calc(100vw * var(--ywx-category-banner-design-h) / var(--ywx-category-banner-design-w))
	);
	max-height: min(72vh, 720px);
}

.ywx-category-list-banner-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 15px;
	text-align: center;
	box-sizing: border-box;
}

.ywx-category-list-banner h1 {
	margin: 0 0 0.5rem;
	line-height: 1.2;
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 700;
	overflow: visible;
}

.ywx-category-list-banner--image h1,
.ywx-category-list-banner--image p {
	color: #fff !important;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.ywx-category-list-banner p {
	margin: 0 auto;
	max-width: 48rem;
	line-height: 1.65;
	font-size: clamp(0.95rem, 2vw, 1.05rem);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.ywx-category-list-banner--image p {
	opacity: 0.9;
}

.ywx-category-list-banner--plain {
	background: linear-gradient(135deg, #e2e8f0, #f1f5f9, #e2e8f0);
}

.ywx-category-list-banner--plain p {
	color: #64748b;
	-webkit-line-clamp: 5;
}

.ywx-category-list-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	z-index: 1;
}

@media (max-width: 767px) {
	.ywx-category-list-banner {
		--ywx-category-banner-min: 320px;
		padding-bottom: clamp(2rem, 5vw, 2.5rem);
		overflow: visible;
	}

	.ywx-category-list-banner--image {
		/* 小屏仍保证可读高度，不强行跟 1920×600 压扁 */
		min-height: calc(var(--ywx-category-banner-header-offset) + var(--ywx-category-banner-min));
		max-height: none;
	}

	.ywx-category-list-banner p {
		-webkit-line-clamp: 3;
	}
}