/*
 * Login shell responsive override.
 * The CDN stylesheet is desktop-first and fixes the canvas at 1264/1200px.
 * Keep this file after /ssr/login/index.css so foldable viewport changes can
 * select mobile, compact desktop, or full desktop layout without UA sniffing.
 */
html,
body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body {
    overflow-x: clip;
}

.loginBody {
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
}

.loginBody ._header {
    min-width: 0;
    gap: 16px;
}

.loginBody ._header .header_logo {
    max-width: min(45vw, 220px);
    object-fit: contain;
}

.loginBody ._header .header_right {
    min-width: 0;
}

.loginBody ._mainBox {
    width: min(100%, 1200px);
    min-width: 0;
    height: auto;
    min-height: calc(100vh - 148px);
    min-height: calc(100svh - 148px);
    padding: 24px 32px;
}

.loginBody ._mainBox .__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
    width: 100%;
    min-width: 0;
    top: 0;
}

.loginBody ._mainBox .loginBox_left {
    min-width: 0;
    margin-right: 40px;
    flex-shrink: 1;
}

.loginBody ._mainBox .loginBox_left .txts .item img.login-slogan-image {
    display: block;
    width: min(100%, 487px);
    height: auto;
    margin: 0;
}

.loginBody ._mainBox .loginBox_left .txts .item img.login-slogan-image--cityu {
    width: min(100%, 600px);
    max-height: 100px;
}

.loginBody ._mainBox .loginBox_left .txts .item .desc.login-slogan-desc {
    margin-top: 40px;
    color: #0d1c28;
    font-size: clamp(28px, 3vw, 38px);
}

.loginBox_right {
    width: 100%;
    min-width: 0;
    max-width: 480px;
}

.loginFooter {
    min-width: 0;
    padding-right: 16px;
    padding-left: 16px;
    box-sizing: border-box;
}

.loginFooter .copyright {
    flex-wrap: wrap;
    row-gap: 6px;
}

/* Mate XT single-screen posture: mobile form, no decorative left column. */
@media (max-width: 767px) {
    .loginBody ._header {
        padding: 12px 16px;
    }

    .loginBody ._header .header_logo {
        height: 28px !important;
    }

    .loginBody ._header .header_right .line,
    .loginBody ._header .header_right .btn_outline {
        display: none;
    }

    .loginBody ._header .header_right .btn_primary {
        padding-right: 12px;
        padding-left: 12px;
        white-space: nowrap;
    }

    .loginBody ._mainBox {
        min-height: calc(100vh - 68px);
        min-height: calc(100svh - 68px);
        padding: 16px;
        align-items: flex-start;
    }

    .loginBody ._mainBox .__container {
        display: block;
    }

    .loginBody ._mainBox .loginBox_left {
        display: none;
    }

    .loginBox_right,
    .loginBox_right.form-active,
    .loginBox_right.expired-active,
    .loginBox_right.success-active,
    .reset-page .loginBox_right,
    .reset-page .loginBox_right.form-active,
    .reset-page .loginBox_right.expired-active,
    .reset-page .loginBox_right.success-active {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        padding: 48px 24px 28px;
    }

    .login_form_footer .otherType::before,
    .login_form_footer .otherType::after {
        width: 30%;
    }

    .loginFooter .container,
    .loginFooter .copyright {
        line-height: 1.8;
    }

    .loginFooter .copyright .line {
        margin: 0 8px;
    }
}

/* Mate XT dual-screen posture: retain the PC two-column experience compactly. */
@media (min-width: 768px) and (max-width: 1099px) {
    .loginBody ._mainBox {
        padding: 20px 24px;
    }

    .loginBody ._mainBox .__container {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    }

    .loginBody ._mainBox .loginBox_left {
        margin-right: clamp(20px, 4vw, 40px);
    }

    .loginBox_right,
    .loginBox_right.form-active,
    .loginBox_right.expired-active,
    .loginBox_right.success-active,
    .reset-page .loginBox_right,
    .reset-page .loginBox_right.form-active,
    .reset-page .loginBox_right.expired-active,
    .reset-page .loginBox_right.success-active {
        max-width: 420px;
        padding: 48px 40px 32px;
    }
}

/* Mate XT triple-screen posture and regular desktop: original full PC card. */
@media (min-width: 1100px) {
    .loginBody ._mainBox .__container {
        grid-template-columns: minmax(0, 1fr) 480px;
    }
}

/* Foldables are often wide but short; remove the legacy 720px height lock. */
@media (min-width: 768px) and (max-height: 760px) {
    .loginBody ._mainBox {
        min-height: 0;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .loginBody ._mainBox .__container {
        align-items: start;
    }

    .loginBody ._mainBox .loginBox_left {
        align-self: center;
    }

    .loginBox_right,
    .loginBox_right.form-active,
    .loginBox_right.expired-active,
    .loginBox_right.success-active,
    .reset-page .loginBox_right,
    .reset-page .loginBox_right.form-active,
    .reset-page .loginBox_right.expired-active,
    .reset-page .loginBox_right.success-active {
        padding-top: 40px;
        padding-bottom: 28px;
    }
}