/* ===== Shared "Way to Install" Section ===== */

.phomi-install-section {
	background: #fff;
	padding: 6.25vw 0 6.770833vw;
	text-align: center;
}

.phomi-install-section h2 {
	font-size: clamp(36px, 2.5vw, 48px);
	font-weight: 400;
	line-height: 1.333333;
	margin: 0;
}

/*
 * Tab 栏整体垂直翻转、按钮再翻回，使横向滚动条显示在 Tab 上方。
 * 翻转后 border-bottom 视觉上在顶部，inset 阴影视觉上在 Tab 底部。
 */
.phomi-install-section__tabs {
	-webkit-overflow-scrolling: touch;
	border-bottom: 2px solid #F2F2F2;
	box-shadow: inset 0 2px 0 #F2F2F2;
	display: flex;
	gap: 0;
	justify-content: flex-start;
	margin-top: 4.166667vw;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	transform: scaleY(-1);
}

.phomi-install-section__tabs button {
	background: #fff;
	background-clip: padding-box;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #000;
	cursor: pointer;
	flex: 1 0 auto;
	font: 18px / 1.333333 var(--phomi-font);
	height: 80px;
	min-width: 200px;
	padding: 0 28px;
	transform: scaleY(-1);
	white-space: nowrap;
}

.phomi-install-section__tabs button[aria-selected="true"] {
	border-bottom-color: #000;
	font-weight: 500;
}

.phomi-install-section__panel {
	display: grid;
	gap: 3.125vw;
	grid-template-columns: minmax(0, 49.479167vw) minmax(0, 39.635417vw);
	padding: 4.166667vw 3.645833vw 0;
	text-align: left;
}

.phomi-install-section__panel[hidden] {
	display: none;
}

.phomi-install-section__copy {
	grid-column: 1 / -1;
}

.phomi-install-section__copy h3 {
	font-size: clamp(26px, 1.875vw, 36px);
	font-weight: 400;
	line-height: 1.555556;
	margin: 0;
}

.phomi-install-section__copy p {
	color: #666;
	font-size: 16px;
	line-height: 1.5;
	margin: 1.041667vw 0 0;
}

.phomi-install-section__diagram {
	background: #f5f5f5;
	height: 31.822917vw;
	min-height: 420px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.phomi-install-section__diagram img {
	display: block;
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.phomi-install-section__diagram--empty {
	min-height: 420px;
}

.phomi-install-section__preview {
	display: block;
	height: 31.822917vw;
	min-height: 420px;
	position: relative;
	width: 100%;
}

a.phomi-install-section__preview {
	color: inherit;
	text-decoration: none;
}

.phomi-install-section__preview {
	overflow: hidden;
}

.phomi-install-section__preview img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* bug#3827 / bug#3975：Way to install 图片悬停放大 1.05 倍（产品详情页、eDisplay、eSolar 共用） */
.phomi-install-section__diagram img,
.phomi-install-section__preview img {
	transition: transform 0.28s ease;
}

.phomi-install-section__diagram:hover img,
.phomi-install-section__preview:hover img {
	transform: scale(1.05);
}

/* bug#3847：产品详情页 Way to install 底色经模板参数 background_color 设为 #f9f9f9，Tab 按钮同步改色 */
.phomi-product-detail-page .phomi-install-section__tabs button {
	background: #f9f9f9;
}

/* ===== Responsive ===== */

@media (max-width: 1280px) {
	.phomi-install-section__diagram,
	.phomi-install-section__preview {
		min-height: 0;
	}
}

@media (max-width: 1024px) {
	/*
	 * #3729：responsive.css 在 ≤1024px 会给 `#primary > section > *` 统一加
	 * `transform: none !important`，Tab 栏的 scaleY(-1) 被清掉、按钮却还翻着，
	 * 标题文字就成了镜像。窄屏直接取消整套翻转（滚动条回到 Tab 下方），
	 * 边框与选中下划线的视觉位置与满屏一致。
	 */
	.phomi-install-section__tabs,
	.phomi-install-section__tabs button {
		transform: none;
	}

	.phomi-install-section__panel {
		grid-template-columns: 1fr;
	}

	/* bug#3986：上下堆叠时容器高度随图片自适应，完整显示图片，不再固定高度裁切 */
	.phomi-install-section__diagram,
	.phomi-install-section__preview {
		height: auto;
		min-height: 0;
	}

	.phomi-install-section__diagram img,
	.phomi-install-section__preview img {
		height: auto;
		object-fit: contain;
		position: static;
	}

	.phomi-install-section__diagram--empty {
		height: 320px;
		min-height: 320px;
	}
}

@media (max-width: 760px) {
	.phomi-install-section {
		padding: 72px 0;
	}

	.phomi-install-section__tabs button {
		flex: 0 0 auto;
		min-width: 180px;
		padding: 0 20px;
	}

	.phomi-install-section__panel {
		padding: 42px 24px 0;
	}
}

@media (max-width: 420px) {
	.phomi-install-section h2 {
		font-size: 34px;
	}

	.phomi-install-section__diagram--empty {
		height: 260px;
		min-height: 260px;
	}
}