/* Centered logo row; authentication form left and illustration right. */
html:has(.lp_container--auth),
body:has(.lp_container--auth) {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.lp_container--auth {
    /*
      The stack sits just under the header for the first 800px of available
      height; only the height beyond that band is shared top and bottom.
    */
    --auth-top-band: 800px;
    height: auto;
    min-height: calc(100vh - 50px);
    justify-content: flex-start;
    padding-block: max(20px, calc((100vh - 50px - var(--auth-top-band)) / 2));
    overflow-x: hidden;
    overflow-y: visible;
}

.fixed-header .lp_container--auth {
    overflow-x: hidden;
    overflow-y: visible;
}

.lp_container--auth .lp_columns {
    --auth-art-width: 430px;
    --auth-art-height: 360px;
    --auth-form-width: 480px;
    --auth-column-gap: 10px;
    --auth-edge-gutter: 20px;
    /*
      Room right of the illustration once the two equal columns are centered.
      As it runs out the column gap is spent first, then the illustration
      slides left, behind the form, so its right edge stays on screen.
    */
    --auth-slack: calc(50vw - (var(--auth-art-width) + var(--auth-edge-gutter)));
    --auth-art-shift: clamp(0px, calc(0px - var(--auth-slack)), 300px);
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: start;
    row-gap: 16px;
    column-gap: clamp(0px, var(--auth-slack), var(--auth-column-gap));
    overflow: visible;
}

.lp_container--auth .auth-logo-zone {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    width: min(200px, 100%);
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.lp_container--auth .auth-logo-zone img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.lp_container--auth .auth-form-column {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: end;
    width: fit-content;
    min-width: 0;
    max-width: min(var(--auth-form-width), 100%);
    height: auto;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    z-index: 2;
}

.login-wrapper .auth-client-logo {
    display: none;
}

.lp_container--auth .auth-showcase {
    position: relative;
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: start;
    /* Keeps its size and overflows the column so the shift can tuck it under the form. */
    width: var(--auth-art-width);
    height: var(--auth-art-height);
    overflow: hidden;
    z-index: 1;
    transform: translateX(calc(0px - var(--auth-art-shift)));
    transition: transform 0.3s ease;
}

.lp_container--auth .auth-showcase-rotator {
    position: relative;
    width: 100%;
    height: 100%;
}

.lp_container--auth .auth-showcase-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: unset !important;
    object-fit: contain;
    object-position: top left;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.lp_container--auth .auth-showcase-image.is-active {
    opacity: 1;
}

/* Once more than half the illustration is obscured, leave the form as the sole lower zone. */
@media (max-width: 700px) {
    .lp_container--auth .lp_columns {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        padding-inline: 16px;
    }

    .lp_container--auth .auth-logo-zone {
        grid-column: 1;
    }

    .lp_container--auth .auth-form-column {
        grid-column: 1;
        justify-self: center;
        width: 100%;
        max-width: var(--auth-form-width);
        align-items: center;
    }

    .lp_container--auth .auth-showcase {
        display: none;
    }
}