/**
 * Product Menu Showcase - 左菜单 + 右图片联动组件
 *
 * @package HD_Valve
 * @since   1.0.0
 */

/* ─── 容器：左右各 50% ───────────────────────────────────── */
.hdv-pms-wrap {
	display: flex;
	align-items: stretch; /* 两栏等高 */
	width: 100%;
}

/* ─── 左侧菜单区（50%） ──────────────────────────────────── */
.hdv-pms-menu {
	flex: 0 0 50%;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 40px;
	box-sizing: border-box;
}

.hdv-pms-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hdv-pms-menu ul li {
	margin: 0;
	/* 上下间距放在 <li>，<a> 不设 padding-bottom，避免下划线偏移 */
	padding: var(--hdv-pms-item-padding, 6px) 0;
}

/* 每条菜单项链接 */
.hdv-pms-item-link {
	position: relative;
	display: inline-block;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	color: #1a1a1a;          /* 默认颜色，可在 Elementor 覆盖 */
	text-decoration: none;
	line-height: 1.3;
	cursor: pointer;
	transition: color 0.25s ease;
}

/* 下划线：::after 紧贴文字底部 */
.hdv-pms-item-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background-color: #cc0000;  /* 默认红色，可在 Elementor 覆盖 */
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

/* 悬浮时变色（颜色由 Elementor 控制） */
.hdv-pms-item-link:hover {
	/* color 由 Elementor 的 text_hover_color 控制 */
}

/* 激活项：颜色 + 下划线从左展开 */
.hdv-pms-item.is-active .hdv-pms-item-link {
	/* color 由 Elementor 的 active_color 控制 */
}

.hdv-pms-item.is-active .hdv-pms-item-link::after {
	transform: scaleX(1);
}

/* View All 链接（颜色默认跟随激活色，可在 Elementor 独立覆盖） */
.hdv-pms-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--hdv-pms-view-all-margin, 24px);
	color: var(--hdv-pms-active-color, #cc0000);
	text-decoration: none;
	transition: gap 0.2s ease, color 0.2s ease;
}

.hdv-pms-view-all:hover {
	gap: 10px;
}

/* ─── 右侧图片区（50%，固定高度，cover 填满） ────────────── */
.hdv-pms-images {
	flex: 0 0 50%;
	width: 50%;
	position: relative;
	/* 高度由 CSS 变量控制，可在 Elementor 样式面板调整 */
	height: var(--hdv-pms-image-height, 400px);
	overflow: hidden;
}

/* 每张图片绝对定位，叠放在同一区域 */
.hdv-pms-image-item {
	position: absolute;
	inset: 0; /* top/right/bottom/left: 0 */
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.hdv-pms-image-item.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* 图片填满容器，裁切方式居中 */
.hdv-pms-image-item img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center center;
}