/**
 * Qing 文章展示样式（特色大图 + 纵向小卡列表）。
 *
 * 结构：.qing-ps（两列 flex，特色一侧 + 列表一侧）
 *   .qing-ps__feature > article.qing-ps__item--feature（大图在上、文字在下）
 *   .qing-ps__list    > article.qing-ps__item--row（缩略图在左、文字在右）xN
 *
 * 特色位置由 .qing-ps--feature-left / --feature-right 决定列顺序（order）。
 * 左右占比由控件写入 --qing-ps-feature / --qing-ps-list（flex-grow 比例，
 * gap 自动扣除、不会溢出）；两侧自动互补。手机端堆叠为单列。
 */

.qing-ps {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
}

/* 特色侧：占比 = --qing-ps-feature（默认 50）。flex-basis:0 让空间全按比例分配。 */
.qing-ps__feature {
	flex: var(--qing-ps-feature, 50) 1 0;
	min-width: 0;
}

/* 特色大图默认在右：list 在前、feature 在后。 */
.qing-ps--feature-right .qing-ps__list {
	order: 1;
}
.qing-ps--feature-right .qing-ps__feature {
	order: 2;
}

/* 特色大图在左：feature 在前、list 在后。 */
.qing-ps--feature-left .qing-ps__feature {
	order: 1;
}
.qing-ps--feature-left .qing-ps__list {
	order: 2;
}

/* 列表侧：纵向排列若干横向小卡；占比 = --qing-ps-list（默认 50，与特色侧互补）。 */
.qing-ps__list {
	display: flex;
	flex-direction: column;
	flex: var(--qing-ps-list, 50) 1 0;
	gap: 20px;
	min-width: 0;
}

/* 通用卡片外观。 */
.qing-ps__item {
	background-color: #f4f7fb;
	border-radius: 6px;
	overflow: hidden;
}

/* 缩略图容器。 */
/* 底色仅作兜底：实际颜色由小部件「特色大图背景 / 小卡缩略图背景」控件下发。 */
.qing-ps__thumb {
	display: block;
	overflow: hidden;
	background-color: #e9eef5;
}

.qing-ps__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* -------- 特色大卡：大图在上、文字在下 -------- */
.qing-ps__item--feature {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.qing-ps__item--feature .qing-ps__thumb {
	width: 100%;
	height: 240px;
}

/* -------- 横向小卡：缩略图在左、文字在右 -------- */
.qing-ps__item--row {
	display: flex;
	align-items: stretch;
}

.qing-ps__item--row .qing-ps__thumb {
	width: 120px;
	flex: 0 0 120px;
	height: auto;
	align-self: stretch;
}

/* 文字区。 */
.qing-ps__body {
	display: flex;
	flex-direction: column;
	padding: 20px 24px;
	min-width: 0;
}

.qing-ps__date {
	color: #9aa4b2;
	font-size: 13px;
	line-height: 1.4;
	margin-bottom: 10px;
}

.qing-ps__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

.qing-ps__title a {
	color: #1a2233;
	text-decoration: none;
	transition: color 0.2s ease;
}

.qing-ps__title a:hover {
	color: #1e50c8;
}

.qing-ps__excerpt {
	margin: 0 0 16px;
	color: #8a94a3;
	font-size: 14px;
	line-height: 1.7;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

/* 详情按钮：贴文字区底部左对齐。 */
.qing-ps__btn {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	padding: 9px 18px;
	border-radius: 4px;
	background-color: #1e50c8;
	color: #ffffff;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease;
}

.qing-ps__btn:hover {
	background-color: #173d9e;
}

.qing-ps__empty {
	color: #8a94a3;
	font-size: 14px;
}

/* -------- 平板：略缩小间距 -------- */
@media (max-width: 1024px) {
	.qing-ps {
		gap: 20px;
	}

	.qing-ps__item--feature .qing-ps__thumb {
		height: 200px;
	}
}

/* -------- 手机端：堆叠为单列，特色在前，占比失效各自全宽 -------- */
@media (max-width: 767px) {
	.qing-ps {
		flex-direction: column;
	}

	.qing-ps__feature,
	.qing-ps__list {
		flex: 0 0 auto;
		width: 100%;
	}

	.qing-ps--feature-right .qing-ps__feature,
	.qing-ps--feature-left .qing-ps__feature {
		order: 0;
	}

	.qing-ps--feature-right .qing-ps__list,
	.qing-ps--feature-left .qing-ps__list {
		order: 1;
	}

	/* 特色侧与列表侧手机端各自全宽（覆盖占比变量）。 */
	.qing-ps__feature,
	.qing-ps__list {
		flex: 0 0 auto !important;
		width: 100% !important;
	}

	/* 列表小卡：手机端改为「上图下文」垂直堆叠，一排一个，缩略图全宽，
	   修复窄屏下横向布局右侧文字被挤压无法正常显示的问题。 */
	.qing-ps__item--row {
		flex-direction: column;
	}

	/* 手机端统一图片高度：特色大图与小卡缩略图均使用控件下发的
	   --qing-ps-mobile-img-h（默认 200px），保证两者高度一致。 */
	.qing-ps__item--feature .qing-ps__thumb,
	.qing-ps__item--row .qing-ps__thumb {
		width: 100% !important;
		flex: 0 0 auto !important;
		height: var(--qing-ps-mobile-img-h, 200px) !important;
	}

	.qing-ps__body {
		padding: 14px 16px;
	}
}