/**
 * Qing 关键词搜索小部件样式（对齐源码设计）。
 *
 * 结构：
 *  .qing-ks
 *    .qing-ks__searchbar > form.qing-ks__search > input.qing-ks__input
 *    .qing-ks__tabs > .qing-ks__tab (active = .is-active) —— 满宽等分分段，激活为实心蓝底
 *    .qing-ks__panels > .qing-ks__panel (active = .is-active)
 *        .qing-ks__results
 *            .qing-ks__list > .qing-ks__item(.qing-ks__item--product / --post)
 *                .qing-ks__thumb (白底图片)
 *                .qing-ks__body
 *                    .qing-ks__title (产品=蓝 / 新闻=深色)
 *                    hr.qing-ks__line (短红线)
 *                    .qing-ks__desc (灰色描述)
 *                    .qing-ks__kw (上方细分隔线 + 「关键词：」+ 橙色标签)
 *            nav.qing-pg-pager（数字分页，与产品网格 / 分类文章列表同名类）
 */

.qing-ks {
	--qks-blue: #1c7fd6;
	--qks-red: #e60012;
	--qks-kw: #cf9b5f;
	--qks-orange: #ff8600;
	box-sizing: border-box;
	width: 100%;
}

.qing-ks *,
.qing-ks *::before,
.qing-ks *::after {
	box-sizing: border-box;
}

/* -------- 搜索框（满宽细边框矩形，占位文字左侧） -------- */
.qing-ks__searchbar {
	margin-bottom: 18px;
}

.qing-ks__search {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	border: 1px solid #ebedf0;
	border-radius: 2px;
	background: #fff;
	overflow: hidden;
}

.qing-ks__input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	padding: 16px 24px;
	border: 0;
	outline: none;
	font-size: 15px;
	line-height: 1.4;
	color: #333;
	background: transparent;
}

.qing-ks__input::placeholder {
	color: #9aa0a8;
}

/* 提交按钮：图片中无明显按钮，隐藏（搜索走输入防抖 + 回车）。 */
.qing-ks__submit {
	flex: 0 0 auto;
	padding: 0 26px;
	align-self: stretch;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	color: #fff;
	background: var(--qks-orange);
	transition: opacity 0.2s ease;
	display: none;
}

.qing-ks__submit:hover {
	opacity: 0.9;
}

/* 显示搜索按钮时（可选）恢复显隐 */
.qing-ks--has-btn .qing-ks__submit {
	display: inline-flex;
	align-items: center;
}

/* -------- Tab（满宽等分分段） -------- */
.qing-ks__tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 22px;
}

.qing-ks__tab {
	flex: 1 1 0;
	text-align: center;
	padding: 14px 10px;
	font-size: 16px;
	line-height: 1.4;
	color: #333;
	background: #f5f6f8;
	border: 1px solid #e8ebef;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 悬停与选中状态外观完全一致（蓝底白字）。 */
.qing-ks__tab:hover,
.qing-ks__tab.is-active {
	background: var(--qks-blue);
	border-color: var(--qks-blue);
	color: #fff;
	font-weight: 600;
}

/* -------- 面板 -------- */
.qing-ks__panel {
	display: none;
}

.qing-ks__panel.is-active {
	display: block;
}

.qing-ks__results {
	position: relative;
	min-height: 60px;
}

.qing-ks.is-loading .qing-ks__results {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* -------- 列表项（满宽浅灰卡片） -------- */
.qing-ks__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.qing-ks__item {
	display: flex;
	gap: 40px;
	padding: 26px 30px;
	background: #f7f8f9;
	border: 1px solid #eef0f2;
	border-radius: 2px;
	transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.qing-ks__item:hover {
	background: #f4f5f7;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.qing-ks__thumb {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 196px;
	background: #fff;
	overflow: hidden;
}

.qing-ks__thumb img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: transform 0.4s ease;
}

/* 新闻缩略图铺满（cover），产品缩略图白底居中（contain） */
.qing-ks__item--post .qing-ks__thumb img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.qing-ks__item:hover .qing-ks__thumb img {
	transform: scale(1.08);
}

.qing-ks__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--qks-body-gap, 14px);
	padding: 6px 0;
}

/* 标题：默认深色（图示产品与新闻标题均为深色加粗） */
.qing-ks__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}

.qing-ks__title a {
	color: #1a2233;
	text-decoration: none;
	transition: color 0.25s ease;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qing-ks__item:hover .qing-ks__title a {
	color: var(--qks-blue);
}

/* 标题下方短线：悬停时逐渐变长。
   用高特异性 + 显式重置，避免被主题全局 hr 样式覆盖导致「消失」。 */
.qing-ks .qing-ks__body hr.qing-ks__line {
	display: block;
	box-sizing: border-box;
	border: 0;
	outline: 0;
	height: var(--qks-line-h, 2px);
	background: var(--qks-line-color, var(--qks-orange));
	margin: 0;
	padding: 0;
	width: var(--qks-line-w, 40px);
	max-width: 100%;
	transition: width 0.35s ease;
}

.qing-ks .qing-ks__item:hover hr.qing-ks__line {
	width: var(--qks-line-hover-w, 90px);
}

.qing-ks__desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.8;
	color: #999;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* -------- 关键词行（上方细分隔线 + 橙色标签） -------- */
.qing-ks__kw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	padding-top: 16px;
	/* 分隔线默认由 Elementor「显示上方分隔线」控件下发宽度（默认开启=1px）。 */
	border-top: 0 solid #ececec;
}

.qing-ks__kw-label {
	font-size: 14px;
	color: #666;
	font-weight: 400;
}

.qing-ks__kw-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
}

.qing-ks__kw-item {
	font-size: 14px;
	line-height: 1.4;
	color: var(--qks-kw);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a.qing-ks__kw-item:hover {
	opacity: 0.75;
	text-decoration: underline;
}

/* -------- 空状态 -------- */
.qing-ks__empty {
	padding: 48px 0;
	text-align: center;
	color: #b7bcc4;
	font-size: 15px;
}

/* -------- 数字分页：复刻「文章列表（post-archive）」的 .qing-pa-pager 圆形分页外观 --------
   40×40 圆、浅灰底 #f2f2f2，数字与上/下页箭头统一外观；悬停/当前页蓝底白字；
   首/末页箭头置灰不可点。全部作用域限定在 .qing-ks 内，避免影响其它同名分页部件。
   本部件用 span.page-numbers[data-page] / .qing-pg-nav[data-page] 走 AJAX 翻页。 */
.qing-ks .qing-pg-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin-top: 34px;
}

.qing-ks .qing-pg-pager .qing-pg-pages {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
}

/* 圆形按钮（数字 + 上/下页箭头统一）。 */
.qing-ks .qing-pg-pager .page-numbers,
.qing-ks .qing-pg-pager .qing-pg-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	min-width: 40px;
	height: 40px;
	margin: 0 4px;
	padding: 0;
	color: #333333;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
	background-color: #f2f2f2;
	border: 1px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	user-select: none;
	transition: all 0.3s ease;
}

/* 悬停：蓝底 + 白字 + 白箭头。 */
.qing-ks .qing-pg-pager .page-numbers[data-page]:hover,
.qing-ks .qing-pg-pager .qing-pg-nav:not(.is-disabled):hover {
	color: #ffffff;
	border-color: #1c59ad;
	background-color: #1c59ad;
}

.qing-ks .qing-pg-pager .qing-pg-nav:not(.is-disabled):hover svg {
	stroke: #ffffff;
	color: #ffffff;
}

/* 当前页：蓝底白字。 */
.qing-ks .qing-pg-pager .page-numbers.current {
	color: #ffffff;
	background-color: #1c59ad;
	border-color: #1c59ad;
	font-weight: 700;
	cursor: default;
}

/* 省略号：无底无边。 */
.qing-ks .qing-pg-pager .page-numbers.dots {
	width: auto;
	min-width: auto;
	background: transparent;
	border-color: transparent;
	color: #999999;
	cursor: default;
}

/* 上/下页箭头图标。 */
.qing-ks .qing-pg-pager .qing-pg-nav svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* 首/末页箭头置灰不可点。 */
.qing-ks .qing-pg-pager .qing-pg-nav.is-disabled {
	color: #bbbbbb;
	background-color: #f2f2f2;
	cursor: default;
	pointer-events: none;
	opacity: 1;
}

.qing-ks .qing-pg-pager .qing-pg-nav.is-disabled svg {
	stroke: #bbbbbb;
	color: #bbbbbb;
}

/* -------- 响应式 --------
 * 手机端（≤767，对齐源码列表 @media(max-width:768px)）：列表项由「图左文右」的
 * 横向布局改为「上图下文」的单列堆叠，缩略图占满整行宽度——修复窄屏下右侧标题/
 * 描述被挤压、内容顶出屏幕（横向溢出）的问题。用 !important 压过 Elementor
 * 每元素响应式控件（缩略图宽度 / 间距等）可能下发的高优先级内联/后置 CSS。 */
@media (max-width: 767px) {
	/* 列表项整体防横向溢出。 */
	.qing-ks,
	.qing-ks__results,
	.qing-ks__list,
	.qing-ks__item,
	.qing-ks__body {
		min-width: 0;
		max-width: 100%;
	}

	.qing-ks {
		overflow-x: hidden;
	}

	/* 单列堆叠：上图下文。 */
	.qing-ks__item {
		flex-direction: column !important;
		gap: 16px !important;
		padding: 16px !important;
	}

	/* 缩略图占满整行（覆盖桌面固定 260px 宽 / 控件下发宽度）。 */
	.qing-ks__thumb {
		width: 100% !important;
		flex: 0 0 auto !important;
		height: 200px;
	}

	/* 新闻缩略图铺满，产品缩略图仍白底居中（contain）——分别保持各自 object-fit。 */
	.qing-ks__item--post .qing-ks__thumb img {
		width: 100%;
		height: 100%;
	}

	.qing-ks__title {
		font-size: 16px;
	}

	.qing-ks__tab {
		padding: 11px 6px;
		font-size: 14px;
	}

	/* 分页圆形手机端缩小为 32×32（对齐文章列表移动端）。 */
	.qing-ks .qing-pg-pager .page-numbers,
	.qing-ks .qing-pg-pager .qing-pg-nav {
		width: 32px;
		min-width: 32px;
		height: 32px;
		line-height: 32px;
		margin: 0 3px;
	}
}