/* PC 布局在 packaged-new.less；本文件仅保留移动端 */
@import "design-tokens.less";

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

	.page-packaged {
		overflow-x: hidden;
		padding-bottom: 4.8rem;

		.banner {
			@packaged-banner-mo-min: 55rem;
			position: relative;
			display: flex;
			flex-direction: column;
			min-height: @packaged-banner-mo-min;
			height: auto;
			overflow: hidden;
			box-sizing: border-box;
			padding-top: @header-height-mobile;
			padding-bottom: 2.4rem;
			padding-left: @packaged-mo-gutter;
			padding-right: @packaged-mo-gutter;

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

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

			.banner-bg {
				display: none;
			}

			.banner-text {
				position: relative;
				z-index: 2;
				width: 100%;
				max-width: 38.2rem;
				height: auto;
				min-height: 0;
				left: auto;
				right: auto;
				top: auto;
				transform: none;
				margin: auto auto 0;
				display: block;
				background: transparent;
				box-sizing: border-box;

				&.abs {
					position: relative;
				}

				&.h-full {
					height: auto;
					min-height: 0;
				}

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

				.title {
					font-size: 3rem;
					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.4rem;
					line-height: 1.55;
					width: 100%;
				}
			}
		}

		/* 覆盖 base.less 手机端 legacy mpx 换算（47rem pill、5.4rem 等） */
		#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: @packaged-mo-gutter;
			padding-right: @packaged-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 @packaged-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;
					}
				}
			}
		}

		.card-ca {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			padding-left: @packaged-mo-gutter;
			padding-right: @packaged-mo-gutter;
			padding-top: 0;
			height: auto;
			margin-top: 3.5rem;
			box-sizing: border-box;

			.card-bg-img {
				width: 100%;
				height: 21.3rem;
				object-fit: cover;
			}

			.card-title {
				color: #333;
				font-size: 2.4rem;
				margin-top: 3rem;
				line-height: 1.2;
			}

			.card-desc {
				font-size: 1.4rem;
				color: #333;
				width: 100%;
				margin-top: 2rem;
				line-height: 1.5;
			}
		}

		.content-container {
			width: 100%;
			margin-left: auto;
			margin-right: auto;
			padding-left: 1.6rem;
			padding-right: 1.6rem;
			box-sizing: border-box;

			#content-1 {
				padding-top: 2rem;
				padding-bottom: 3rem;

				.inner {
					flex-direction: column;
					align-items: center;
					padding-left: 0;
					padding-right: 0;
					gap: 0;

					.flex-left {
						position: relative;
						width: 100%;
						max-width: none;
						background-color: #f2f2f2;
						border-radius: 2.5rem;
						padding-top: 5rem;
						padding-left: @packaged-mo-inset;
						padding-right: @packaged-mo-inset;
						padding-bottom: 34rem;
						margin-right: 0;
						margin-bottom: 7rem;
						height: auto;
						min-height: 0;
						box-sizing: border-box;
						overflow: visible;

						.title {
							font-size: 2.4rem;
							margin-bottom: 2rem;
							width: 100%;
							max-width: 30rem;
						}

						.list {
							font-size: 1.4rem;
							line-height: 1.8;
							width: 100%;
							max-width: 34.6rem;
							margin-left: 0.6rem;
							box-sizing: border-box;

							.indicator {
								left: -0.8rem;
							}
						}

						.machine-wrapper {
							width: 32.4rem;
							max-width: calc(100% - 3.6rem);
							height: 26.8rem;
							bottom: 7.8rem;
						}
					}

					.flex-right {
						width: 100%;
						max-width: none;
						min-width: 0;

						.right-title {
							font-size: 2.4rem;
							line-height: 1.2;
						}

						.card-1 {
							width: 100%;
							max-width: 38.2rem;
							height: 63.8rem;
							margin-top: 2.4rem;
							margin-left: auto;
							margin-right: auto;

							.top-text {
								left: 1.9rem;
								top: 1.6rem;

								.top-title {
									font-size: 2rem;
								}
							}

							.card-text-1 {
								font-size: 1.6rem;
								width: 17.4rem;
								max-width: 45%;
								left: 0;
								top: 27.7rem;
							}

							.card-text-2 {
								font-size: 1.2rem;
								bottom: 0;
								left: 0;
								width: 20.5rem;
								max-width: 55%;
							}

							.card-text-3 {
								font-size: 1.6rem;
								left: 21rem;
								right: 1.6rem;
								top: 37rem;
								width: auto;
							}
						}

						.card-2 {
							margin-top: 7rem;

							.card-title {
								font-size: 2.4rem;
								line-height: 1.2;
							}

							.mo-card-sub-title {
								text-align: center;
								width: 100%;
								font-size: 1.6rem;
								color: #333;
								margin-top: 3rem;
								margin-bottom: 0.8rem;
							}

							.mo-card-2 {
								display: block;
								width: 100%;
								max-width: 38.3rem;
								height: auto;
								margin-left: auto;
								margin-right: auto;
							}
						}

						.card-3 {
							margin-top: 7rem;

							.card-title {
								font-size: 2.4rem;
								width: 100%;
								max-width: 35rem;
								margin-bottom: 1.2rem;
								line-height: 1.2;
							}

							.card-desc {
								font-size: 1.6rem;
								line-height: 1.4;
								margin-top: 0;
							}

							.mo-card-1,
							.mo-card-2,
							.mo-card-3,
							.mo-card-4 {
								width: 100%;
								max-width: 38.2rem;
								height: auto;
								margin-left: auto;
								margin-right: auto;

								.bg-img,
								img {
									position: relative;
									width: 100%;
									height: auto;
									object-fit: contain;
								}
							}

							.mo-card-1 {
								margin-top: 3.2rem;
							}

							.mo-card-2,
							.mo-card-3,
							.mo-card-4 {
								margin-top: 2rem;
							}
						}

						.card-3-extra {
							margin-top: 6.4rem;

							.card-title {
								font-size: 2.4rem;
								line-height: 1.2;
								width: 100%;
								max-width: 30rem;
							}

							> .flex {
								flex-direction: column;
								align-items: stretch;
								gap: 2.4rem;
							}

							.spec-1,
							.spec-2 {
								width: 100%;
								margin-right: 0;
							}

							.spec-title {
								font-size: 1.4rem;
								line-height: 1.2;
							}

							.spec-desc {
								font-size: 1.1rem;
								line-height: 1.4;
								margin-top: 1.1rem;
							}
						}

						.card-4 {
							margin-top: 6.5rem;

							.card-title {
								font-size: 2.4rem;
								width: 100%;
								max-width: 35rem;
								margin-bottom: 2.8rem;
								line-height: 1.2;
							}

							.img-container {
								position: relative;
								width: 100%;
								max-width: 38.2rem;
								height: 27rem;
								margin-top: 2.8rem;
								margin-bottom: 1.4rem;
								overflow: hidden;

								.wind-img {
									position: absolute;
									inset: 0;
									width: 100%;
									height: 100%;
									object-fit: contain;
									object-position: center center;
								}

								.text-wrapper {
									display: none;
								}
							}

							.note {
								font-size: 1.2rem;
								line-height: 1.5;
								width: 100%;
								margin-top: 0;
							}
						}
					}
				}
			}
		}

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

		/* 覆盖 base.less 手机端 video 区 8rem 等 legacy 间距 */
		.ani-tab-grid {
			width: 100%;
			max-width: 38.2rem;
			margin-left: auto;
			margin-right: auto;
			margin-top: 6rem;
			padding-left: @packaged-mo-gutter;
			padding-right: @packaged-mo-gutter;
			box-sizing: border-box;

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

				.tab-grid-left {
					font-size: 1.6rem;
				}

				.tab-grid-right {
					font-size: 1.2rem;

					.plus {
						margin-left: 1.8rem;
					}
				}
			}

			.ani-tab-show-more {
				margin-top: 0.3rem;
				padding-left: 0;
				padding-right: 0;
				box-sizing: border-box;
				width: 100%;

				.video-grid {
					position: relative;
					left: auto;
					top: auto;
					width: 100%;
					height: 26rem;
					border-radius: 0.5rem;
					overflow: hidden;

					&.abs {
						position: relative;
					}

					> .bg-img,
					> img.bg-img {
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					.video-grid-inner {
						position: relative;
						z-index: 1;
						width: 100%;
						height: 100%;
						min-height: 26rem;
						padding-top: 4.9rem;
						padding-left: 1rem;
						padding-right: 1rem;
						box-sizing: border-box;
						align-items: center;
						justify-content: flex-start;

						&.bg-img {
							position: relative;
							inset: auto;
							object-fit: unset;
						}

						.play-btn {
							width: 3.2rem;
							height: 3.2rem;
							margin-right: 1rem;
						}

						.title {
							font-size: 2.4rem;
						}

						.desc {
							text-align: center;
							font-size: 1.2rem;
							margin-top: 1.1rem;
							width: 100%;
							max-width: none;
						}

						.button {
							font-size: 1.6rem;
							text-align: center;
							width: 20.4rem;
							max-width: 100%;
							margin-top: 3.2rem;
							border-radius: 3.1rem;
							height: 5.4rem;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
	}
}