/**
 * 硬件产品卡（定位基站 / 定位标签）共享样式
 * 交互：点击「产品详情」展开，mouseleave 收起（见 hardware-product-card.js）
 * 卡高固定；标题/底部在文档流；产品图脱离流，锚点 top:0 + left:50%，仅宽高 520×540 → 443×460 过渡
 */

.hw-product-card {
	--hw-img-w: 32.5rem;
	--hw-img-h: 33.75rem;
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 33.75rem;
	min-height: 33.75rem;
	max-height: 33.75rem;
	overflow: hidden;
	background: #fff;
	border-radius: 0.875rem;
	padding: 2.75rem 2.75rem 1.875rem 2.75rem;
	box-shadow: 0 0 .625rem rgba(23, 38, 68, 0.1);
	transition: box-shadow 0.6s ease;
}

.hw-product-card.is-expanded {
	/* 之前是设计告诉这个尺寸，验收阶段我发现设计稿上是420 436 */
	/* --hw-img-w: 27.6875rem;
	--hw-img-h: 28.75rem; */
	--hw-img-w: 26.25rem;
	--hw-img-h: 27.25rem;
}

.hw-product-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 0;
	z-index: 2;
	flex-shrink: 0;
	position: relative;
}

.hw-product-card__cname {
	margin: 0 0 0.375rem;
	font-size: 1.625rem;
	color: #1d1d1f;
	line-height: 2.125rem;
	font-family: s-demibold, sans-serif;
	font-weight: normal;
}

.hw-product-card__model {
	margin: 0;
	font-size: 1.25rem;
	color: #1d1d1f;
	line-height: 1.6875rem;
	font-family: s-demibold, sans-serif;
}

.hw-product-card__head-right img {
	width: 3rem;
	height: 1.8125rem;
	object-fit: contain;
}

/* 产品图：脱离文档流；锚点恒定 top:0 + left:50%，激活只缩放宽高，不改定位 */
.hw-product-card__visual {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	width: var(--hw-img-w);
	height: var(--hw-img-h);
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
	pointer-events: none;
	overflow: hidden;
	transition: width 0.6s ease, height 0.6s ease;
}

.hw-product-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
	object-position: top center;
}

/* 三列：默认铺满卡宽（出血），激活同比缩窄（443/520） */
.hw-product-card--layout-cols-3 {
	/* --hw-img-w: calc(100% + 5.75rem); */
	--hw-img-w: 100%;
}

.hw-product-card--layout-cols-3.is-expanded {
	--hw-img-w: calc(100% * 26.25 / 32.5);
	--hw-img-h: calc((100% + 5.75rem) * 27.25 / 32.5);
}

/* 两列：与三列相同全宽出血 + 全高（不用固定 32.5rem 宽） */
.hw-product-card--layout-cols-2 {
	/* --hw-img-w: calc(100% + 5.75rem); */
	--hw-img-w: 100%;
}

.hw-product-card--layout-cols-2.is-expanded {
	--hw-img-w: calc(100% * 26.25 / 32.5);
}

.hw-product-card--layout-horizontal {
	flex-direction: row;
	align-items: stretch;
	height: auto;
	min-height: 33.75rem;
	max-height: none;
	padding: 2.75rem;
	gap: 0;
}

.hw-product-card--layout-horizontal .hw-product-card__visual {
	position: absolute;
	top: 0;
	left: 2.75rem;
	width: var(--hw-img-w);
	height: var(--hw-img-h);
	transform: none;
}

.hw-product-card--layout-horizontal .hw-product-card__info {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin-left: calc(var(--hw-img-w) + 2rem);
	z-index: 2;
}

.hw-product-card--layout-horizontal .hw-product-card__foot {
	margin-top: auto;
}

.hw-product-card--visual-hide.is-expanded .hw-product-card__visual {
	opacity: 0;
}

.hw-product-card--visual-hide.is-expanded .hw-product-card__img {
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.hw-product-card__foot {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	margin-top: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	z-index: 2;
}

.hw-product-card__detail {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 1.125rem;
	line-height: 1.5rem;
	font-family: s-medium, sans-serif;
	color: #6b758a;
	text-decoration: none !important;
	transition: color 0.6s ease;
}

.hw-product-card__detail:hover {
	color: #1d1d1f;
	text-decoration: none !important;
}

.hw-product-card.is-expanded .hw-product-card__detail {
	color: #1d1d1f;
}

.hw-product-card__detail-chev {
	display: inline-block;
	width: 0.4375rem;
	height: 0.4375rem;
	border: 0;
	border-right: 0.125rem solid #6b758a;
	border-bottom: 0.125rem solid #6b758a;
	transform: rotate(45deg);
	flex-shrink: 0;
	vertical-align: middle;
	margin-top: -0.125rem;
	box-sizing: border-box;
	transition: transform 0.6s ease, border-color 0.6s ease, margin-top 0.6s ease;
}

.hw-product-card.is-expanded .hw-product-card__detail-chev {
	transform: rotate(225deg);
	border-right-color: #1d1d1f;
	border-bottom-color: #1d1d1f;
	margin-top: 0;
}

/* 特点：在「产品详情」下方文档流展开；高度由 JS 写入实际 scrollHeight，过渡更顺滑 */
.hw-product-card__features {
	position: relative;
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 1.5625rem;
	row-gap: 1rem;
	align-content: start;
	justify-content: start;
	width: 100%;
	max-width: 100%;
	max-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	min-height: 0;
	box-sizing: border-box;
	pointer-events: none;
	transition: max-height 0.55s cubic-bezier(0.33, 1, 0.68, 1), padding 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.hw-product-card.is-expanded .hw-product-card__features {
	margin: 0;
	padding: 1.25rem 0 0;
	pointer-events: auto;
}

.hw-product-card__features--grid-1 {
	grid-template-columns: 1fr;
	column-gap: 0;
	row-gap: 1rem;
	justify-content: stretch;
	justify-items: stretch;
}

.hw-product-card__features--flex-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem .375rem;
	align-content: flex-start;
	grid-template-columns: none;
}

.hw-product-card__feature-item,
.hw-product-card .uwb-feature-item,
.uwb-tags-section .uwb-feature-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.4375rem;
	width: max-content;
	max-width: 100%;
	justify-self: start;
	box-sizing: border-box;
}

.hw-product-card__features--grid-1 > .hw-product-card__feature-item,
.hw-product-card__features--grid-1 > .uwb-feature-item {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	justify-self: stretch;
}

.hw-product-card__feature-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	object-fit: contain;
}

.hw-product-card__feature-item span,
.hw-product-card__feature-copy {
	font-size: 1.125rem;
	line-height: 1.5rem;
	color: #616266;
	font-family: s-regular, sans-serif;
}

.hw-product-card__features-heading {
	margin: 0 0 0.625rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1.35;
	font-family: s-medium, sans-serif;
	color: #1d1d1f;
}

/* 阶梯动画：子项渐显由 tsingoal .ts-animate-stagger-up 负责，容器不再叠 opacity */

/* 硬件卡横向轮播（PC）：阴影留白 + 三列宽度与 gap 联动，避免横向露出下一张 */
@media (min-width: 981px) {
	.uwb-tag-track {
		--uwb-tag-track-visible: 3;
		--uwb-tag-track-gap: 1.25rem;
	}

	.uwb-tag-track .hw-product-card {
		flex: 0 0 calc((100% - (var(--uwb-tag-track-visible) - 1) * var(--uwb-tag-track-gap)) / var(--uwb-tag-track-visible));
	}

	/*
	 * 外容器略宽于版心（100% + 两侧留白），内层 track 仍为 100% 内容宽；
	 * padding-inline 供左右 box-shadow 绘制，margin-inline 负值抵消占位。
	 */
	.uwb-tag-track-wrapper,
	.uwb-anchor-swiper {
		--hw-carousel-shadow-pad: .75rem;
		box-sizing: border-box;
		width: calc(100% + 2 * var(--hw-carousel-shadow-pad));
		margin-inline: calc(-1 * var(--hw-carousel-shadow-pad));
		padding-inline: var(--hw-carousel-shadow-pad);
		padding-block: var(--hw-carousel-shadow-pad);
		margin-block: calc(-1 * var(--hw-carousel-shadow-pad));
		overflow: hidden;
	}

	/*
	 * 硬件轮播带：三列 slide 宽度 = section 版心；切换钮在版心外侧，间距 20px（投影在 shadow-pad 内，不计入间距）
	 * --uwb-carousel-outset = 钮宽 2.75rem + 间距 1.25rem
	 */
	.uwb-carousel-belt {
		--uwb-carousel-nav-size: 2.75rem;
		--uwb-carousel-nav-gap: 1.25rem;
		--uwb-carousel-outset: calc(var(--uwb-carousel-nav-size) + var(--uwb-carousel-nav-gap));
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
		column-gap: var(--uwb-carousel-nav-gap);
	}

	/* 版心内 Tab 面板：belt 向两侧撑出，stage 仍占满 section 内容宽 */
	.section .uwb-tag-panels .uwb-carousel-belt {
		width: calc(100% + 2 * var(--uwb-carousel-outset));
		max-width: calc(100rem + 2 * var(--uwb-carousel-outset));
		margin-inline: calc(-1 * var(--uwb-carousel-outset));
	}

	.uwb-carousel-belt__stage {
		flex: 0 1 100rem;
		max-width: 100rem;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.section .uwb-tag-panels .uwb-carousel-belt__stage {
		flex: 0 1 100%;
		max-width: 100%;
	}

	/* 切换钮在版心外，避免 section / panels 裁切 */
	.section .uwb-tag-panels,
	.uwb-tag-panels .uwb-tag-panel {
		overflow: visible;
	}

	.uwb-carousel-nav {
		position: relative;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible;
		width: 2.75rem;
		height: 2.75rem;
		box-sizing: border-box;
		border: none;
		border-radius: 50%;
		cursor: pointer;
		background-color: rgba(29, 29, 31, 0.14);
		background-image: none;
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
		transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.6s ease;
	}

	.uwb-carousel-nav::after {
		content: '';
		display: block;
		flex-shrink: 0;
		width: 0.625rem;
		height: 1.25rem;
		border: 0;
		background: url('/wp-content/uploads/industry/v3/jiantou.svg') no-repeat center;
		background-size: contain;
		box-sizing: border-box;
		pointer-events: none;
	}

	.uwb-carousel-nav:hover:not(:disabled) {
		background-color: rgba(29, 29, 31, 0.08);
	}

	.uwb-carousel-nav:active:not(:disabled) {
		background-color: rgba(29, 29, 31, 0.2);
	}

	.uwb-carousel-nav:disabled {
		opacity: 0;
		transform: scale(0.8);
		pointer-events: none;
		cursor: default;
		transition: opacity 0.6s ease, transform 0.6s ease, background-color 0.6s ease;
	}

	.uwb-carousel-nav--next:not(:disabled) {
		transform: rotate(180deg);
	}

	.uwb-carousel-nav--next:disabled {
		transform: rotate(180deg) scale(0.8);
	}
}