@import "design-tokens.less";

.page-support {
	overflow: hidden;
	background: @home-bg;
	box-sizing: border-box;

	.grid-1 {
		position: relative;
		width: 100%;
		min-height: 53rem;
		color: #fff;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 1.6rem;
		padding-right: 1.6rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			position: relative;
			z-index: 2;
			font-size: @inner-hero-title-desktop;
			line-height: 1.15;
			letter-spacing: -0.02em;
			width: 100%;
			max-width: @layout-max;
		}

		.desc {
			position: relative;
			z-index: 2;
			width: 100%;
			max-width: 64rem;
			font-size: @inner-hero-desc-desktop;
			margin-top: 1.2rem;
			line-height: 1.6;
		}

		.sub-title {
			font-size: 1.8rem;
			letter-spacing: -0.01em;
		}
	}

	.grid-2 {
		.home-section-shell();
		align-items: stretch;
		padding-top: @inner-section-gap-desktop;
		padding-bottom: 6.4rem;
		padding-left: 0;
		padding-right: 0;
		box-sizing: border-box;

		.grid-title {
			position: relative;
			width: 100%;
			color: @color-ink-muted;
			font-size: 3.2rem;
			line-height: 1.2;
			letter-spacing: -0.02em;
			margin-bottom: 6.4rem;
			text-align: center;

			/* 标题与 logo 同区重叠：logo 用 abs-center 居中叠在文字上 */
			.font-b {
				position: relative;
				z-index: 2;
				display: inline-block;
				padding: 2.4rem 0;
			}
		}

		.grid-title .logo {
			width: 8.2rem;
			height: 8.7rem;
			z-index: 1;
			object-fit: contain;
			pointer-events: none;
		}

		.card-group {
			width: 100%;
			margin-top: 0;
			gap: 2rem;
			align-items: stretch;
		}

		.card {
			flex: 1 1 0;
			min-width: 0;
			width: auto;
			background: #fff;
			border-radius: @radius-home-card;
			box-shadow: @shadow-home-card;
			border: 1px solid rgba(15, 23, 42, 0.06);
			box-sizing: border-box;

			.location {
				flex-shrink: 0;
				width: 1.8rem;
				height: 2.4rem;
				object-fit: contain;
			}

			.email {
				flex-shrink: 0;
				width: 1.8rem;
				height: 1.5rem;
				object-fit: contain;
				position: relative;
				top: 0.2rem;
			}

			.time {
				flex-shrink: 0;
				width: 1.8rem;
				height: 1.8rem;
				object-fit: contain;
			}
		}

		.card-1 {
			padding: 2.4rem 2rem 2.8rem;

			.card-title {
				color: @color-ink;
				font-size: 2rem;
				margin-bottom: 1.2rem;

				&.ca-version {
					margin-bottom: 4.2rem;
				}
			}

			.card-desc {
				color: @color-ink;
				font-size: 1.6rem;
				line-height: 1.4;
			}

			.first-title {
				font-size: 1.6rem;
				line-height: 1.3;
				color: @color-ink;
				margin-bottom: 1.6rem;
			}

			.location-text {
				flex: 1;
				min-width: 0;
				color: @color-ink-muted;
				line-height: 1.45;
				font-size: 1.5rem;
				margin-left: 1.2rem;
			}

			.row-2,
			.row-4 {
				margin-top: 1.2rem;
				margin-bottom: 0;
				align-items: flex-start;
			}

			.row-3 {
				margin-top: 1.2rem;
				align-items: flex-start;
			}

			.phone-text,
			.time-text {
				color: @color-ink-muted;
				font-size: 1.5rem;
				line-height: 1.45;
				margin-left: 1.2rem;
			}

			.other-location {
				color: @color-ink-muted;
				font-size: 1.5rem;
				line-height: 1.45;
				margin-top: 1.2rem;
			}
		}

		.card-2,
		.card-3 {
			position: relative;
			min-height: 54rem;
			padding: 3.2rem 2.4rem 10rem;
			margin-left: 0;
			margin-right: 0;

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

			.write,
			.registration {
				flex-shrink: 0;
				width: 6.5rem;
				height: auto;
				max-height: 7.2rem;
				margin-right: 2rem;
				object-fit: contain;
			}

			.card-text {
				flex: 1;
				min-width: 0;
				width: auto;

				.card-title {
					color: @color-ink;
					font-size: 2rem;
					line-height: 1.25;
				}

				.card-desc {
					color: @color-ink-muted;
					font-size: 1.6rem;
					line-height: 1.5;
					margin-top: 1.2rem;
				}
			}

			.button {
				background: @color-brand;
				border-radius: @radius-pill;
				display: inline-flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 1.8rem;
				min-width: 21.8rem;
				height: 5.2rem;
				padding: 0 2.4rem;
				bottom: 2.4rem;
				text-decoration: none;
				/* 保留 abs-center-x 水平居中，hover 时勿单独改 transform */
				transform: translateX(-50%);
				transition:
					background @transition-fast,
					box-shadow @transition-fast;

				&:hover {
					background: @color-brand-deep !important;
					transform: translateX(-50%);
					box-shadow: 0 0.4rem 1.2rem rgba(31, 148, 210, 0.35);
				}
			}
		}

		.card-3 .registration {
			margin-right: 2rem;
		}
	}
}

@media screen and (max-width: @bp-mobile) {
    .page-support {
        .grid-1 {
            height: 68.4rem;
            padding-top: 19.8rem;
            .title {
                font-size: 3.2rem;
            }
            .desc {
                font-size: 1.4rem;
                width: 34rem;
                margin-top: 4rem;
            }
        }
        .grid-2 {
            padding-top: 6.7rem;
            padding-bottom: 3.2rem;
            .grid-title {
                font-size: 2.2rem;
                width: 33.5rem;
                .font-b {
                    text-align: center;
                }
            }
            .logo {
                width: 6.2rem;
                height: 6.6rem;
            }
            .card-group {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .card {
                width: 38.3rem;
                height: 32.2rem;
                .location {
                    width: 1.7rem;
                    height: 2.3rem;
                }
                .phone {
                    width: 1.8rem;
                    height: 1.8rem;
                }
                .time {
                    width: 1.8rem;
                    height: 1.8rem;
                }
            }
            .card-1 {
                padding-left: 5rem;
                padding-right: 4rem;
                padding-top: 5.4rem;
                padding-bottom: 5.4rem;
                height: auto;
                .card-title {
                    font-size: 2.4rem;
                    text-align: center;
                    margin-bottom: 0.9rem;
                    &.ca-version {
                        margin-bottom: 5.5rem;
                    }
                }
                .first-title {
                    font-size: 1.4rem;
                    text-align: center;
                    margin-bottom: 2.9rem;
                }
                .location-text {
                    width: 22.4rem;
                    font-size: 1.4rem;
                    margin-left: 1.3rem;
                }
                .phone-text {
                    font-size: 1.4rem;
                    margin-left: 1.2rem;
                }
                .time-text {
                    font-size: 1.4rem;
                    margin-left: 1.2rem;
                }
                .row-2 {
                    margin-top: 2rem;
                    margin-bottom: 2.4rem;
                }
            }
            .card-2 {
                padding-left: 7.4rem;
                padding-right: 7.4rem;
                padding-top: 2.5rem;
                margin-left: 0;
                margin-right: 0;
                margin-top: 3rem;
                margin-bottom: 3rem;
                .flex {
                    flex-direction: column;
                    align-items: center;
                }
                .write {
                    width: 7rem;
                    height: 6.8rem;
                    margin-right: 0;
                    margin-bottom: 1.9rem;
                }
                .card-text {
                    width: 100%;
                    .card-title {
                        text-align: center;
                        font-size: 2.4rem;
                    }
                    .card-desc {
                        text-align: center;
                        font-size: 1.4rem;
                        margin-top: 0.9rem;
                    }
                }
                .button {
                    width: 20.4rem;
                    height: 5.6rem;
                    bottom: 2.5rem;
                    font-size: 1.6rem;
                }
            }
            .card-3 {
                padding-left: 5.4rem;
                padding-right: 5.4rem;
                padding-top: 2.5rem;
                margin-left: 0;
                margin-right: 0;
                .flex {
                    flex-direction: column;
                    align-items: center;
                }
                .registration {
                    width: 7rem;
                    height: 7.8rem;
                    margin-right: 0;
                    margin-bottom: 0.9rem;
                }
                .card-text {
                    width: 100%;
                    .card-title {
                        text-align: center;
                        font-size: 2.4rem;
                    }
                    .card-desc {
                        text-align: center;
                        font-size: 1.4rem;
                        margin-top: 0.9rem;
                    }
                }
                .button {
                    width: 20.4rem;
                    height: 5.6rem;
                    bottom: 2.5rem;
                    font-size: 1.6rem;
                }
            }
        }
    }
}

@import "support-page.less";