/* ============================================================
   解决方案标签轮播 — crgems-solutions-tabs
   PPT 第11页：标签导航 + 下方大卡片轮播（背景图 + 左上白色半透明文字块）
   ============================================================ */

.crgems-solutions-tabs-widget {
	--crgems-peek: 0px;
	width: 100%;
	font-family: inherit;
}

/* ─── 标签导航 ─────────────────────────── */
.crgems-solutions-tabs-widget .crgems-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.crgems-solutions-tabs-widget .crgems-tab-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 8px 2px;
	margin: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	color: #6b7280;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	writing-mode: horizontal-tb;
	word-break: keep-all;
	overflow-wrap: normal;
	text-orientation: mixed;
	transition: color 0.25s ease;
}

.crgems-solutions-tabs-widget .crgems-tab-btn::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 2px;
	background-color: #1e3a8a;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.25s ease, height 0.25s ease;
}

.crgems-solutions-tabs-widget .crgems-tab-btn:hover,
.crgems-solutions-tabs-widget .crgems-tab-btn.active {
	color: #1e3a8a;
	background-color: transparent;
	box-shadow: none;
}

.crgems-solutions-tabs-widget .crgems-tab-btn:hover::after,
.crgems-solutions-tabs-widget .crgems-tab-btn.active::after {
	transform: scaleX(1);
}

/* ─── 视口 / 轨道 ──────────────────────── */
.crgems-solutions-tabs-widget .crgems-tabs-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	scroll-behavior: smooth;
}

.crgems-solutions-tabs-widget .crgems-tabs-track {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: var(--crgems-track-gap, 0px);
}

/* ─── 面板 ─────────────────────────────── */
.crgems-solutions-tabs-widget .crgems-tab-panel {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
	height: 480px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #e5e7eb;
}

.crgems-solutions-tabs-widget.show-peek .crgems-tab-panel {
	flex-basis: calc(100% - 2 * var(--crgems-peek));
	width: calc(100% - 2 * var(--crgems-peek));
	min-width: calc(100% - 2 * var(--crgems-peek));
}

/* ─── 聚焦模式：中间完整大卡片 + 两侧相邻完整小卡片（一屏 3 张） ───── */
.crgems-solutions-tabs-widget.focus-mode .crgems-tabs-viewport {
	overflow: hidden;
}

.crgems-solutions-tabs-widget.focus-mode .crgems-tabs-track {
	justify-content: flex-start;
	gap: var(--crgems-focus-gap, 0px);
	/* 卡片宽度改用像素变量(JS 注入)，track 用 max-content 让 scrollWidth 精确等于内容宽，
	   根治 flex 溢出容器 scrollWidth 被浏览器低估导致末张无法完全居中的怪癖 */
	width: max-content;
}

/* 中间卡片占 1 份，两侧各占 ratio 份；三张合计 = 100%，恰好填满视口。
   宽度优先用 JS 注入的像素变量(--crgems-side-w)，未注入时回退到基于 100vw 的 calc。
   计算公式已考虑「聚焦模式间距」：先从视口宽度扣除两侧间隔，再按比例分配，
   保证两侧小卡外边缘贴紧视口边缘的同时，中间大卡与两侧小卡之间保留该间距。
   注意：回退绝不能用 100%，因为 track 是 width:max-content，100% 相对 track 会形成
   "子宽依赖父宽、父宽依赖子宽"的循环依赖，导致 Elementor 编辑器首次渲染时卡片宽度为 0。 */
.crgems-solutions-tabs-widget.focus-mode .crgems-tab-panel {
	flex: 0 0 var(--crgems-side-w, calc((100vw - 2 * var(--crgems-focus-gap, 0px)) * var(--crgems-side-ratio, 0.45) / (1 + 2 * var(--crgems-side-ratio, 0.45))));
	width: var(--crgems-side-w, calc((100vw - 2 * var(--crgems-focus-gap, 0px)) * var(--crgems-side-ratio, 0.45) / (1 + 2 * var(--crgems-side-ratio, 0.45))));
	min-width: auto;
	opacity: 0.42;
	transform: scale(var(--crgems-focus-side-scale, 0.88));
	filter: brightness(0.92);
	transition: flex-basis 0.45s cubic-bezier(0.16, 1, 0.3, 1),
				width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
				opacity 0.45s ease,
				transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
				filter 0.45s ease;
}

.crgems-solutions-tabs-widget.focus-mode .crgems-tab-panel.active {
	flex: 0 0 var(--crgems-big-w, calc((100vw - 2 * var(--crgems-focus-gap, 0px)) / (1 + 2 * var(--crgems-side-ratio, 0.45))));
	width: var(--crgems-big-w, calc((100vw - 2 * var(--crgems-focus-gap, 0px)) / (1 + 2 * var(--crgems-side-ratio, 0.45))));
	opacity: 1;
	transform: scale(1);
}

/* 两侧小卡片内容块更含蓄，突出中间主视觉 */
.crgems-solutions-tabs-widget.focus-mode .crgems-tab-panel:not(.active) .crgems-tab-content {
	max-width: 92%;
	margin: 16px;
	padding: 14px;
	background-color: rgba(255, 255, 255, 0.78);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.crgems-solutions-tabs-widget.focus-mode .crgems-tab-panel:not(.active) .crgems-tab-title {
	font-size: 1.125rem;
	margin-bottom: 6px;
}

.crgems-solutions-tabs-widget.focus-mode .crgems-tab-panel:not(.active) .crgems-tab-desc {
	font-size: 0.8125rem;
	line-height: 1.55;
}

.crgems-solutions-tabs-widget .crgems-tab-image {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.crgems-solutions-tabs-widget .crgems-tab-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* 循环克隆卡片本身可点击，点击后切换到对应的真实标签；
   但克隆卡内部的链接不应跳转，避免进入错误页面。 */
.crgems-solutions-tabs-widget .crgems-tab-panel-clone .crgems-tab-panel-link,
.crgems-solutions-tabs-widget .crgems-tab-panel-clone .crgems-tab-link {
	pointer-events: none;
}

/* 整卡可点击跳转：透明覆盖层铺满 panel，层级在内容块下方 */
.crgems-solutions-tabs-widget .crgems-tab-panel-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	text-decoration: none;
}

.crgems-solutions-tabs-widget .crgems-tab-content {
	position: absolute;
	max-width: 50%;
	padding: 32px;
	margin: 40px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	z-index: 2;
	pointer-events: none;
}

/* 内容块背景色/透明度由控件内联注入;此处兜底保持兼容 */
.crgems-solutions-tabs-widget .crgems-tab-content {
	background-color: rgba(255, 255, 255, 0.92);
}

/* 内容块位置 — 9 点定位 */
.crgems-solutions-tabs-widget .crgems-position-top-left .crgems-tab-content {
	top: 0;
	left: 0;
}

.crgems-solutions-tabs-widget .crgems-position-top-center .crgems-tab-content {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 40px 0;
}

.crgems-solutions-tabs-widget .crgems-position-top-right .crgems-tab-content {
	top: 0;
	right: 0;
}

.crgems-solutions-tabs-widget .crgems-position-left-center .crgems-tab-content {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	margin: 0 40px;
}

.crgems-solutions-tabs-widget .crgems-position-center .crgems-tab-content {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
}

.crgems-solutions-tabs-widget .crgems-position-right-center .crgems-tab-content {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	margin: 0 40px;
}

.crgems-solutions-tabs-widget .crgems-position-bottom-left .crgems-tab-content {
	bottom: 0;
	left: 0;
}

.crgems-solutions-tabs-widget .crgems-position-bottom-center .crgems-tab-content {
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	margin: 40px 0;
}

.crgems-solutions-tabs-widget .crgems-position-bottom-right .crgems-tab-content {
	bottom: 0;
	right: 0;
}

/* ─── 文字 ─────────────────────────────── */
.crgems-solutions-tabs-widget .crgems-tab-title {
	margin: 0 0 12px;
	color: #1e3a8a;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.crgems-solutions-tabs-widget .crgems-tab-desc {
	margin: 0 0 20px;
	color: #374151;
	font-size: 0.9375rem;
	line-height: 1.7;
}

.crgems-solutions-tabs-widget .crgems-tab-link {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1e3a8a;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
	pointer-events: auto;
}

.crgems-solutions-tabs-widget .crgems-tab-link::after {
	content: "\2192";
	transition: transform 0.2s ease;
}

.crgems-solutions-tabs-widget .crgems-tab-link:hover {
	gap: 10px;
}

.crgems-solutions-tabs-widget .crgems-tab-link:hover::after {
	transform: translateX(3px);
}

/* ─── 响应式 ───────────────────────────── */
@media (max-width: 767px) {
	.crgems-solutions-tabs-widget .crgems-tabs-nav {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.crgems-solutions-tabs-widget .crgems-tabs-nav::-webkit-scrollbar {
		display: none;
	}

	.crgems-solutions-tabs-widget .crgems-tabs-nav .crgems-tab-btn {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 10px 4px;
		font-size: 0.9375rem;
		white-space: nowrap;
		writing-mode: horizontal-tb;
		word-break: keep-all;
		overflow-wrap: normal;
		text-orientation: mixed;
	}

	.crgems-solutions-tabs-widget .crgems-tab-panel {
		height: 380px;
	}

	.crgems-solutions-tabs-widget.show-peek .crgems-tab-panel {
		flex-basis: 100%;
		width: 100%;
		min-width: 100%;
	}

	.crgems-solutions-tabs-widget .crgems-tab-content {
		max-width: calc(100% - 32px);
		margin: 16px;
		padding: 20px;
	}
}