@import "design-tokens.less";

/* 1720px artboard → @layout-max (120rem); use (N / 1720 * @layout-max) for horizontal sizes */
@pump-artboard: 1720;
@pump-scale: (@layout-max / 172rem); /* 120rem content vs 172rem legacy canvas */

.pump-content() {
	width: 100%;
	max-width: @layout-max;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.page-pump {
	overflow: hidden;
	padding-bottom: 10rem;

	@pump-banner-overlay-pct: 55%;
	/* banner-bg 左下透明三角：正文自遮罩左缘再右移约 banner 高的 1/3 */
	@pump-banner-pc-height: calc(300 / 1080 * 100vw);
	@pump-banner-pc-min-h: 30rem;
	@pump-banner-text-inset: ~"max((300 / 1080 * 100vw / 3), 10rem)";

	/* PC banner：对齐原稿（rpx 300/1080·mpx 定位）；仅修正 .bg-img 对正文的破坏 */
	.banner {
		position: relative;
		/* 原 height: calc(var(--rpx) * 300)，宽屏下高于固定 30rem */
		height: @pump-banner-pc-height;
		min-height: @pump-banner-pc-min-h;
		overflow: hidden;

		picture {
			position: absolute;
			left: 0;
			top: -9rem;
			width: 132.8rem;
			height: 99.9rem;
			z-index: 0;
			margin: 0;
		}

		.banner-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			object-fit: cover;
		}

		.banner-bg {
			position: absolute;
			width: @pump-banner-overlay-pct;
			height: 100%;
			top: 0;
			right: 0;
			left: auto;
			object-fit: cover;
			object-position: right center;
			z-index: 1;
		}

		.banner-text {
			position: absolute;
			z-index: 2;
			left: ~"calc((100% - @{pump-banner-overlay-pct}) + @{pump-banner-text-inset})";
			right: auto;
			width: 56rem;
			max-width: ~"calc(@{pump-banner-overlay-pct} - @{pump-banner-text-inset})";
			top: 0;
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.banner-text-inner {
				position: relative;
				top: auto;
				left: auto;
				width: 100%;
				height: auto;
				padding-left: 0;
				padding-top: 0;
				padding-right: 0;
				box-sizing: border-box;
				object-fit: unset;
			}

			.banner-text-inner.bg-img {
				position: relative;
				top: auto;
				left: auto;
				width: 100%;
				height: auto;
			}

			.title {
				color: #333333;
				font-size: 4.5rem;
				line-height: 1.2;
			}

			.desc {
				color: #333333;
				font-size: 1.7rem;
				line-height: 1.5;
				margin-top: 4rem;
			}
		}
	}

	#categories.categories {
		.pump-content();
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;

		.title {
			margin-left: 0;
		}

		.pills {
			padding-left: 0;
			padding-right: 0;
		}
	}

	.grid-2 {
		.pump-content();
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: (36 / @pump-artboard * @layout-max);
		padding-left: 0;
		padding-right: 0;
		margin-top: (80 / @pump-artboard * @layout-max);
		margin-bottom: (80 / @pump-artboard * @layout-max);

		.machine {
			width: (284 / @pump-artboard * @layout-max);
			height: (421 / @pump-artboard * @layout-max);
			flex-shrink: 0;
			object-fit: contain;
			margin-left: 0;
		}

		.grid-text {
			flex: 1;
			min-width: 0;

			.title {
				font-size: 4rem;
				color: #333;
			}

			.desc {
				color: #333;
				font-size: 2.2rem;
				max-width: (795 / @pump-artboard * @layout-max);
				margin-top: (40 / @pump-artboard * @layout-max);
				line-height: 1.5;
			}
		}
	}

	.grid-3 {
		.pump-content();
		margin-bottom: (49 / @pump-artboard * @layout-max);

		.title {
			color: #4b4949;
			font-size: 4rem;
			margin-bottom: (66 / @pump-artboard * @layout-max);
		}

		.rooms {
			width: 100%;
			height: (492 / @pump-artboard * @layout-max);
			margin-bottom: (80 / @pump-artboard * @layout-max);

			.rooms-top-ca {
				width: (57 / @pump-artboard * 100%);
				height: (162 / 492 * 100%);
				left: (1598.5 / @pump-artboard * 100%);
				top: (301.5 / 492 * 100%);
			}
		}

		.compare {
			width: 100%;
			height: (508 / @pump-artboard * @layout-max);

			.compare-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.product-img {
				width: (420.8 / @pump-artboard * 100%);
				height: auto;
				aspect-ratio: 1;
				right: (212 / @pump-artboard * 100%);
				top: (90 / 508 * 100%);
			}
		}
	}

	.grid-4 {
		.pump-content();
		position: relative;

		&.ca {
			margin-bottom: (100 / @pump-artboard * @layout-max);
		}

		margin-bottom: (55 / @pump-artboard * @layout-max);

		.title {
			color: #333;
			font-size: 3rem;
			margin-bottom: (96 / @pump-artboard * @layout-max);
		}

		.sub-title {
			color: #666;
			font-size: (52 / @pump-artboard * @layout-max);
			line-height: 1.5;
			margin-left: (115 / @pump-artboard * @layout-max);
		}

		.big-title {
			color: #1f94d2;
			margin-top: (55 / @pump-artboard * @layout-max);
			margin-bottom: (42 / @pump-artboard * @layout-max);
			margin-left: (115 / @pump-artboard * @layout-max);
			align-items: flex-end;

			.text-big {
				font-size: (208 / @pump-artboard * @layout-max);
				line-height: 1;
			}

			.text-small {
				font-size: (89 / @pump-artboard * @layout-max);
				line-height: 1;
				position: relative;
				top: (-26 / @pump-artboard * @layout-max);
			}
		}

		.desc {
			color: #666;
			font-size: (52 / @pump-artboard * @layout-max);
			line-height: 1.1;
			margin-left: (115 / @pump-artboard * @layout-max);
		}

		.map-img {
			width: (1548 / @pump-artboard * 100%);
			height: auto;
			max-width: 100%;
			object-fit: contain;
			margin-top: (115 / @pump-artboard * @layout-max);
			margin-left: (64 / @pump-artboard * @layout-max);
			display: block;
			position: relative;
			z-index: 0;
		}

		.bottom-cards {
			position: relative;
			z-index: 2;
			margin-top: (2.4rem * @pump-scale);
			margin-left: (11.1rem * @pump-scale);
			padding-top: (2.2rem * @pump-scale);
			width: 100%;
			max-width: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-start;
			box-sizing: border-box;

			.card-left {
				flex: 0 0 (69rem * @pump-scale);
				width: (69rem * @pump-scale);
				height: (21rem * @pump-scale);
				border-radius: (1.8rem * @pump-scale);
				border: 1px solid #828282;
				margin-right: (4rem * @pump-scale);
				padding-top: (5rem * @pump-scale);
				padding-left: (2.6rem * @pump-scale);
				padding-right: (1.6rem * @pump-scale);
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: flex-start;

				.card-label {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					padding-left: (1.6rem * @pump-scale);
					padding-right: (1.6rem * @pump-scale);
					height: (4.1rem * @pump-scale);
					background: #333;
					border-radius: (2.05rem * @pump-scale);
					top: (-2.05rem * @pump-scale);
					z-index: 3;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: (3.6rem * @pump-scale);
					line-height: 1.4;
					white-space: nowrap;
				}

				.label-text {
					font-size: (2.2rem * @pump-scale);
					line-height: 1;
					color: #333;
					margin-bottom: (1.2rem * @pump-scale);
				}

				.small-label {
					color: #211815;
					font-size: (1.4rem * @pump-scale);
					line-height: 1;
				}

				.value-text {
					color: #211815;
					font-size: (3.2rem * @pump-scale);
					line-height: 1.2;
				}

				.name-text {
					font-size: (1.4rem * @pump-scale);
					line-height: 1.1;
					color: #211815;
				}

				.separator {
					align-self: stretch;
					width: 1px;
					background: #211815;
					margin-left: (1.4rem * @pump-scale);
					margin-right: (1.4rem * @pump-scale);
					flex-shrink: 0;
				}

				.left-part {
					flex: 0 0 auto;
					margin-right: (4.8rem * @pump-scale);

					> .flex {
						align-items: flex-start;
					}
				}

				.right-part {
					flex: 1;
					min-width: 0;
				}
			}

			.card-right {
				flex: 0 0 (76.5rem * @pump-scale);
				width: (76.5rem * @pump-scale);
				height: (21rem * @pump-scale);
				border-radius: (1.8rem * @pump-scale);
				border: 1px solid #1f94d2;
				padding-top: (5.9rem * @pump-scale);
				padding-left: (4rem * @pump-scale);
				padding-right: (0.8rem * @pump-scale);
				color: #333333;
				font-size: (1.8rem * @pump-scale);
				line-height: 1.2;
				box-sizing: border-box;
				display: flex;
				flex-direction: row;
				align-items: flex-start;
				position: relative;
				overflow: visible;
				z-index: 1;

				.card-label {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					width: (36.3rem * @pump-scale);
					max-width: calc(100% - 2rem);
					height: (4.1rem * @pump-scale);
					background: #1f94d2;
					border-radius: (2.05rem * @pump-scale);
					top: (-2.05rem * @pump-scale);
					z-index: 5;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: (3.6rem * @pump-scale);
					line-height: 1.4;
					white-space: nowrap;
					box-sizing: border-box;

					sup {
						font-size: 50%;
						top: -0.2em;
						position: relative;
						margin-left: (0.8rem * @pump-scale);
						margin-right: (0.8rem * @pump-scale);
					}
				}

				.left-part {
					flex: 0 0 (18rem * @pump-scale);
					width: (18rem * @pump-scale);
					margin-right: (5.8rem * @pump-scale);
					text-align: center;
				}

				.right-part {
					flex: 1;
					width: (44rem * @pump-scale);
					max-width: (44rem * @pump-scale);
					min-width: 0;
					text-align: center;
				}

				.row-2 {
					margin-top: (3.5rem * @pump-scale);
					font-size: (1.4rem * @pump-scale);
					line-height: 1.35;
				}

				.vertical-line {
					height: (10.5rem * @pump-scale);
					left: (14.5rem * @pump-scale);
					top: (2.8rem * @pump-scale);
					width: 0;
					border-left: 1px dashed #1f94d2;
				}

				.horizontal-line {
					height: 0;
					width: (70.9rem * @pump-scale);
					left: (3.1rem * @pump-scale);
					top: (5.4rem * @pump-scale);
					border-top: 1px dashed #1f94d2;
				}
			}
		}
	}

	.ani-tab-grid {
		.pump-content();

		.ani-tab-grid-title {
			width: 100%;
			max-width: @layout-max;
			padding-left: (114 / @pump-artboard * @layout-max);
			padding-right: (114 / @pump-artboard * @layout-max);
		}
	}

	.download-grid {
		margin-top: 2rem;
	}
}

@media screen and (max-width: @bp-mobile) {
	@pump-mo-gutter: 0.8rem;
	@pump-mo-inset: 1.2rem;

	.page-pump {
		.banner {
			@pump-banner-mo-min: 55rem;
			@pump-banner-mo-body-min: (@pump-banner-mo-min - @header-height-mobile - 2.4rem);
			position: relative;
			min-height: @pump-banner-mo-min;
			overflow: hidden;
			box-sizing: border-box;
			padding-top: @header-height-mobile;
			padding-bottom: 2.4rem;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;

			picture {
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
			}

			.banner-img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				object-fit: cover;
			}

			.banner-bg {
				display: none;
			}

			.banner-text {
				position: relative;
				z-index: 2;
				width: 100%;
				max-width: 38.2rem;
				min-height: @pump-banner-mo-body-min;
				height: auto;
				left: auto;
				right: auto;
				transform: none;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;

				&.abs {
					position: relative;
				}

				&.h-full {
					height: auto;
					min-height: @pump-banner-mo-body-min;
				}

				.banner-text-inner,
				.banner-text-inner.bg-img {
					position: relative;
					top: auto;
					left: auto;
					width: 100%;
					height: auto;
					background: rgba(0, 0, 0, 0.55);
					border-radius: 0.4rem;
					padding: 2.4rem 1rem;
					box-sizing: border-box;
					object-fit: unset;
				}

				.title {
					font-size: @inner-hero-title-mobile;
					color: #fff;
					letter-spacing: 0;
					text-align: center;
					line-height: 1.2;
				}

				.desc {
					font-size: @inner-hero-desc-mobile;
					color: #fff;
					text-align: center;
					margin-top: 1.2rem;
					line-height: 1.55;
				}
			}
		}

		#categories.categories {
			display: none;
			flex-direction: column;
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			margin-top: 2.4rem;
			padding-top: 0;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;
			box-sizing: border-box;

			.title {
				margin-left: 0;
				margin-bottom: 2.4rem;
				font-size: 2.4rem;
			}

			.pills {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 2rem 0.8rem;
				padding-left: 0;
				padding-right: 0;

				.pill {
					width: 100%;
					max-width: 100%;
					height: auto;
					min-height: 4.8rem;
					padding: 1.2rem @pump-mo-inset;
					font-size: 1.2rem;
					line-height: 1.3;
					white-space: normal;
					text-align: center;
					border-radius: 6rem;
					box-sizing: border-box;

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(5),
					&:nth-child(6) {
						margin-top: 0;
						margin-bottom: 0;
					}
				}
			}
		}

		.grid-2 {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;
			margin-top: 6rem;
			margin-bottom: 6rem;
			align-items: flex-start;
			flex-wrap: wrap;

			.machine {
				width: 12.478rem;
				height: 19.6rem;
				object-fit: contain;
				margin-top: -2.8rem;
				margin-left: 1.5rem;
			}

			.grid-text {
				width: 26.6rem;

				.title {
					font-size: 2.4rem;
				}

				.desc {
					font-size: 1.4rem;
					width: 26.6rem;
					max-width: 100%;
					margin-top: 1.6rem;
				}
			}
		}

		.grid-3 {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;
			margin-bottom: 6.9rem;

			.title {
				font-size: 2.4rem;
				margin-bottom: 2.5rem;
			}

			.rooms {
				width: 100%;
				height: 11.2rem;
				margin-bottom: 1.4rem;

				.rooms-top-ca {
					width: 5.7rem;
					height: 16.2rem;
					left: auto;
					right: 0.8rem;
					top: 6.8rem;
				}
			}

			.compare {
				width: 100%;
				height: 48.43rem;

				.product-img {
					width: 42.08rem;
					height: auto;
					max-width: 55%;
					right: 5%;
					top: 17.7%;
				}
			}
		}

		.grid-4 {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;

			&.ca {
				margin-bottom: 7rem;
			}

			margin-bottom: 5rem;

			.title {
				font-size: 2rem;
				margin-bottom: 1.1rem;
			}

			.sub-title {
				font-size: 1.4rem;
				margin-left: 0;
			}

			.big-title {
				margin-left: 0;
				margin-top: 0.8rem;
				margin-bottom: 0.8rem;

				.text-big {
					font-size: 4.5rem;
				}

				.text-small {
					font-size: 2.4rem;
					top: -0.5rem;
				}
			}

			.desc {
				font-size: 1.2rem;
				margin-left: 0;
			}

			.map-img {
				width: 100%;
				max-width: 40.6rem;
				height: auto;
				margin-left: -0.8rem;
				margin-top: 3.2rem;
			}

			.bottom-cards {
				margin-left: 0;
				margin-top: 3.4rem;
				padding-top: 1.2rem;
				flex-direction: column;
				flex-wrap: wrap;
				gap: 0;
				z-index: 2;

				.card-left {
					width: 100%;
					flex: none;
					height: 18rem;
					border-radius: 0.8rem;
					margin-right: 0;
					padding-top: 3.8rem;
					padding-left: 1.5rem;
					padding-right: 1.5rem;
					flex-direction: row;
					align-items: flex-start;

					.card-label {
						width: 8.6rem;
						height: 3.1rem;
						top: -1.05rem;
						border-radius: 0.8rem;
						font-size: 2.4rem;
						padding-left: 0;
						padding-right: 0;
					}

					.label-text {
						font-size: 1.4rem;
						margin-bottom: 0.6rem;
					}

					.small-label {
						font-size: 1.2rem;
					}

					.value-text {
						font-size: 2.4rem;
					}

					.name-text {
						font-size: 1.2rem;
					}

					.separator {
						margin-left: 0.4rem;
						margin-right: 0.8rem;
					}

					.left-part {
						flex: 1;
						min-width: 0;
						margin-right: 2.6rem;

						.label-text {
							margin-bottom: 2rem;
						}
					}

					.right-part {
						flex: 1;
						min-width: 0;
					}
				}

				.card-right {
					width: 100%;
					flex: none;
					height: 19.6rem;
					border-radius: 0.8rem;
					margin-top: 5rem;
					padding-top: 3.8rem;
					padding-left: 1.5rem;
					padding-right: 0.5rem;
					font-size: 1.4rem;
					overflow: visible;
					z-index: 1;

					.card-label {
						width: 26.9rem;
						max-width: calc(100% - 2rem);
						height: 3.1rem;
						border-radius: 0.8rem;
						top: -1.05rem;
						font-size: 2.4rem;
						z-index: 5;
					}

					.left-part {
						flex: 0 0 15.5rem;
						width: 15.5rem;
						margin-right: 4.2rem;
					}

					.right-part {
						flex: 1;
						width: auto;
						max-width: none;
					}

					.row-2 {
						margin-top: 2rem;
						font-size: 1.2rem;
					}

					.vertical-line {
						height: 14.5rem;
						left: 18.6rem;
						top: 3.6rem;
					}

					.horizontal-line {
						width: calc(100% - 2.8rem);
						max-width: 35.5rem;
						left: 1.4rem;
						top: 6.2rem;
					}
				}
			}
		}

		.ani-tab-grid {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			padding-left: @pump-mo-gutter;
			padding-right: @pump-mo-gutter;
			box-sizing: border-box;

			.ani-tab-grid-title {
				width: 100%;
				margin-left: 0;
				margin-right: 0;
				padding: 1.2rem 1rem;
				box-sizing: border-box;
			}

			.ani-tab-show-more {
				margin-top: 0.3rem;
				padding-left: 0;
				padding-right: 0;

				.video-grid {
					.video-grid-inner {
						padding-left: 1rem;
						padding-right: 1rem;
					}
				}
			}
		}

		.download-grid {
			margin-top: 2.4rem;

			.ani-tab-show-more {
				display: none;
			}
		}
	}
}