/* ==========================================================================
 * HBC Feature Split — 特性图文卡(左右分栏)
 *
 * 结构:
 *   .hbc-feature-split [.hbc-feature-split--image-{left,right}]
 *                      [.hbc-feature-split--mobile-{text_first,image_first}]
 *     ├─ .hbc-feature-split__text
 *     │     ├─ .hbc-feature-split__title (h1-h4 / div)
 *     │     ├─ .hbc-feature-split__intro (p)
 *     │     ├─ .hbc-feature-split__group (重复)
 *     │     │     ├─ .hbc-feature-split__group-title
 *     │     │     └─ .hbc-feature-split__list (ul)
 *     │     │           └─ .hbc-feature-split__item (li)
 *     │     │                 ├─ .hbc-feature-split__term (strong)
 *     │     │                 └─ .hbc-feature-split__desc (span)
 *     │     └─ .hbc-feature-split__footer (p)
 *     │           ├─ .hbc-feature-split__footer-label (strong)
 *     │           └─ .hbc-feature-split__footer-text  (span)
 *     └─ .hbc-feature-split__media
 *           └─ .hbc-feature-split__image (img)  / 或 a 包裹
 *
 * 关键:
 *   --hbc-fs-image-w → 图片列宽(响应式)
 *   --hbc-fs-col-gap → 两列间距(响应式)
 *   --hbc-fs-list-gap → 列表项间距
 * ========================================================================== */

.hbc-feature-split {
	--hbc-fs-image-w: 50%;
	--hbc-fs-col-gap: 60px;
	--hbc-fs-list-gap: 4px;

	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--hbc-fs-image-w));
	gap: var(--hbc-fs-col-gap);
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.hbc-feature-split *,
.hbc-feature-split *::before,
.hbc-feature-split *::after {
	box-sizing: border-box;
}

/* 图片在右(默认):text 列 = 1fr,image 列 = var(--w) */
.hbc-feature-split--image-right {
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--hbc-fs-image-w));
}

.hbc-feature-split--image-right .hbc-feature-split__text  { order: 1; }
.hbc-feature-split--image-right .hbc-feature-split__media { order: 2; }

/* 图片在左:image 列在前 */
.hbc-feature-split--image-left {
	grid-template-columns: minmax(0, var(--hbc-fs-image-w)) minmax(0, 1fr);
}

.hbc-feature-split--image-left .hbc-feature-split__text  { order: 2; }
.hbc-feature-split--image-left .hbc-feature-split__media { order: 1; }

/* ==========================================================================
 *  文字列
 * ========================================================================== */
.hbc-feature-split__text {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* ==========================================================================
 *  主标题
 * ========================================================================== */
.hbc-feature-split__title {
	margin: 0;
	color: #E65A2A;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

/* ==========================================================================
 *  引言
 * ========================================================================== */
.hbc-feature-split__intro {
	margin: 0;
	color: #1F2937;
	font-size: 14px;
	line-height: 1.6;
}

/* ==========================================================================
 *  分组
 * ========================================================================== */
.hbc-feature-split__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hbc-feature-split__group-title {
	margin: 0;
	color: #E65A2A;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

/* ==========================================================================
 *  列表
 * ========================================================================== */
.hbc-feature-split__list {
	margin: 0;
	padding-left: 24px;
	list-style: disc outside;
}

.hbc-feature-split__item {
	margin-bottom: var( --hbc-fs-list-gap );
	color: #374151;
	font-size: 14px;
	line-height: 1.6;
}

.hbc-feature-split__item:last-child {
	margin-bottom: 0;
}

.hbc-feature-split__item::marker {
	color: #1F2937;
}

.hbc-feature-split__term {
	color: #1F2937;
	font-weight: 700;
	margin-right: 4px;
}

.hbc-feature-split__desc {
	color: inherit;
}

/* ==========================================================================
 *  底部说明
 * ========================================================================== */
.hbc-feature-split__footer {
	margin: 0;
	color: #374151;
	font-size: 14px;
	line-height: 1.6;
}

.hbc-feature-split__footer-label {
	color: #1F2937;
	font-weight: 700;
	margin-right: 4px;
}

/* ==========================================================================
 *  图片列
 * ========================================================================== */
.hbc-feature-split__media {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	min-width: 0;
}

.hbc-feature-split__image-link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.hbc-feature-split__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
 *  响应式 — 平板及以下堆叠为单列
 * ========================================================================== */
@media (max-width: 1024px) {
	.hbc-feature-split {
		grid-template-columns: 1fr !important;
		gap: 32px;
	}

	/* 手机端顺序:文字在上 */
	.hbc-feature-split--mobile-text_first .hbc-feature-split__text  { order: 1; }
	.hbc-feature-split--mobile-text_first .hbc-feature-split__media { order: 2; }

	/* 手机端顺序:图片在上 */
	.hbc-feature-split--mobile-image_first .hbc-feature-split__text  { order: 2; }
	.hbc-feature-split--mobile-image_first .hbc-feature-split__media { order: 1; }

	.hbc-feature-split__media {
		height: auto;
		max-height: 460px;
	}

	.hbc-feature-split__image {
		height: auto;
		max-height: 460px;
	}
}

@media (max-width: 600px) {
	.hbc-feature-split__media {
		max-height: 320px;
	}
	.hbc-feature-split__image {
		max-height: 320px;
	}
}