/**
 * 百家 Why Choose Us（鼠标倾斜）
 */

.baijia-wcu {
	width: 100%;
}

/* ===== 标题区 ===== */
.baijia-wcu-header {
	margin-bottom: 40px;
}

.baijia-wcu-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #a6ce39;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.baijia-wcu-eyebrow::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 14px;
	background-color: currentColor;
	border-radius: 2px;
}

.baijia-wcu-heading {
	margin: 0;
	color: #1e1e1e;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
}

/* ===== 主网格：左 / 中 / 右 ===== */
.baijia-wcu-grid {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	gap: 40px;
	align-items: center;
}

.baijia-wcu-col-left  { justify-self: start; }
.baijia-wcu-col-right { justify-self: start; }
.baijia-wcu-col-center {
	justify-self: stretch;
	width: 100%;
}

/* ===== 特色条目 ===== */
.baijia-wcu-feature {
	display: flex;
	gap: 18px;
	align-items: flex-start;
	margin-bottom: 28px;
}

.baijia-wcu-feature:last-child {
	margin-bottom: 0;
}

.baijia-wcu-feature-icon {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #a6ce39;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.baijia-wcu-feature-icon i,
.baijia-wcu-feature-icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.baijia-wcu-feature-body {
	flex: 1 1 auto;
	min-width: 0;
}

.baijia-wcu-feature-title {
	margin: 4px 0 8px;
	color: #1e1e1e;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
}

.baijia-wcu-feature-desc {
	margin: 0;
	color: #666;
	font-size: 13px;
	line-height: 1.65;
}

/* ===== 中心：纯图片 + 3D 倾斜 ===== */
.baijia-wcu-center {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 520px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 给 3D 倾斜时的阴影/放大留空间，避免被父容器裁掉 */
	padding: 20px;
}

/* 图片倾斜容器（3D 倾斜作用在此） */
.baijia-wcu-img-wrap {
	position: relative;
	width: 100%;
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.3, 1);
	will-change: transform;
}

.baijia-wcu-img-inner {
	display: block;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	background-color: #ffffff;
	/* 强制无阴影，覆盖 Elementor 老实例缓存的 box-shadow 规则 */
	box-shadow: none !important;
}

.baijia-wcu-img-inner img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	/* 默认按比例完整显示；object-fit 只在固定高度容器下起作用，这里高度 auto，图片自然完整 */
}

.baijia-wcu-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(45deg, #f0f0f0 0 10px, #fafafa 10px 20px);
}

/* ==========================================================
 * 响应式：平板 + 手机均为单列，顺序「左 → 中 → 右」
 * ========================================================== */
@media (max-width: 1024px) {
	.baijia-wcu-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.baijia-wcu-col-left,
	.baijia-wcu-col-center,
	.baijia-wcu-col-right {
		justify-self: center;
		width: 100%;
		max-width: 600px;
	}
	/* 取消之前可能的 order 影响，强制按 DOM 顺序排列（左→中→右） */
	.baijia-wcu-col-left   { order: 0; }
	.baijia-wcu-col-center { order: 1; }
	.baijia-wcu-col-right  { order: 2; }
	.baijia-wcu-heading {
		font-size: 32px;
	}
}

@media (max-width: 640px) {
	.baijia-wcu-grid {
		gap: 28px;
	}
	.baijia-wcu-center {
		max-width: 360px;
		padding: 10px;
	}
	.baijia-wcu-heading {
		font-size: 24px;
	}
	.baijia-wcu-feature {
		gap: 14px;
		margin-bottom: 20px;
	}
	.baijia-wcu-feature-title {
		font-size: 15px;
	}
	.baijia-wcu-feature-desc {
		font-size: 12.5px;
	}
}

/* 触屏：禁用 3D 倾斜（由 JS 检测不绑定，这里兜底视觉复位） */
@media (hover: none) {
	.baijia-wcu-img-wrap {
		transform: none !important;
	}
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
	.baijia-wcu-img-wrap {
		transition: none !important;
		transform: none !important;
	}
}