/* qlbd-sec-title - 标题横条组件 */

.qlbd-sec-title-container {
	width: 100%;
	padding: 28px 0;
}

.qlbd-sec-title-inner {
	max-width: var(--ql-container-width);
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.qlbd-sec-title-left {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.qlbd-sec-title-title {
	font-size: 26px;
	line-height: 1.2;
	color: var(--ql-color-text-title);
	font-weight: 800;
}

.qlbd-sec-title-desc {
	font-size: 14px;
	line-height: var(--ql-line-height-base);
	color: var(--ql-color-text-body);
}

.qlbd-sec-title-more {
	font-size: 14px;
	line-height: 1.2;
	color: var(--ql-color-primary);
	font-weight: 700;
	transition: transform 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.qlbd-sec-title-more:hover {
	transform: translateY(-2px);
	color: color-mix(in srgb, var(--ql-color-primary) 80%, #000000);
}

@media (max-width: 768px) {
	.qlbd-sec-title-inner {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		grid-template-areas:
			"title more"
			"desc desc";
		align-items: start;
	}

	/* 让左侧内部的标题/副标题可以分别落到网格里的不同区域 */
	.qlbd-sec-title-left {
		display: contents;
	}

	.qlbd-sec-title-title {
		grid-area: title;
	}

	.qlbd-sec-title-desc {
		grid-area: desc;
	}

	.qlbd-sec-title-more {
		grid-area: more;
		justify-self: end;
	}
}