/* CtaBlock：三套主题各一套柔和渐变底色，悬停时加深渐变并浮现阴影 */

.cta-block {
	--vc-cta-from: #f0f4f8;
	--vc-cta-to: #e2e8f0;
	--vc-cta-border: transparent;
	--vc-cta-hover-from: #e9eff6;
	--vc-cta-hover-to: #d7e0ea;
	--vc-cta-hover-border: rgba(30, 60, 110, .16);
	--vc-cta-hover-shadow: 0 14px 36px rgba(30, 60, 110, .14);
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, var(--vc-cta-from) 0%, var(--vc-cta-to) 100%);
	border: 1px solid var(--vc-cta-border);
	border-radius: 1rem;
	padding: 5rem;
	transition: border-color .25s ease, box-shadow .25s ease;
}

/* 悬停加深层：渐变本身不可过渡，改由叠加层的透明度过渡实现平滑切换 */
.cta-block::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(135deg, var(--vc-cta-hover-from) 0%, var(--vc-cta-hover-to) 100%);
	opacity: 0;
	transition: opacity .25s ease;
}

.cta-block:hover {
	border-color: var(--vc-cta-hover-border);
	box-shadow: var(--vc-cta-hover-shadow);
}

.cta-block:hover::after {
	opacity: 1;
}

/* 标题：英文一律大写渲染（CSS 只作用于拉丁字母，中文不受影响） */
.cta-block h1 {
	text-transform: uppercase;
}

/* Dark：深蓝渐变 + 细边框 */
html[data-bs-theme="dark"] .cta-block {
	--vc-cta-from: #0f1b29;
	--vc-cta-to: #16283c;
	--vc-cta-border: rgba(148, 163, 184, .18);
	--vc-cta-hover-from: #142539;
	--vc-cta-hover-to: #1c324a;
	--vc-cta-hover-border: rgba(148, 163, 184, .34);
	--vc-cta-hover-shadow: 0 14px 36px rgba(0, 0, 0, .45);
}

/* Eyecare：米绿渐变 + 细边框 */
html[data-vc-theme="eye"] .cta-block {
	--vc-cta-from: #f2f8ec;
	--vc-cta-to: #e1edd6;
	--vc-cta-border: rgba(111, 148, 106, .28);
	--vc-cta-hover-from: #eaf3e1;
	--vc-cta-hover-to: #d5e5c6;
	--vc-cta-hover-border: rgba(111, 148, 106, .45);
	--vc-cta-hover-shadow: 0 14px 36px rgba(74, 110, 70, .16);
}

@media (prefers-reduced-motion: reduce) {
	.cta-block,
	.cta-block::after {
		transition: none;
	}
}