/* Login / MFA screens. Paired with Pages/Shared/_LoginLayout.cshtml. */

body.login-body {
    min-height: 100vh;
    min-height: 100dvh;
    /* Vertical padding keeps the card reachable on short landscape viewports,
       where a centred flex item would otherwise overflow past the top edge. */
    padding: 2rem 0;
    justify-content: flex-end;
    /* Explicitly transparent -- otherwise app.css's "html, body" rule fills
       this in with its light gray page background, which (like any
       background-color set directly on body) paints over the ::before
       pseudo-element's negative z-index layer below regardless of what's in
       it, hiding the photo behind a solid color again. */
    background-color: transparent;
}

/* Kept on its own layer (rather than directly on body) so the mobile blur
   below can target just the photo without also blurring the card. Sized
   slightly larger than the viewport so the blur's own edge softening falls
   outside it instead of showing as a faint border. */
body.login-body::before {
    content: "";
    position: fixed;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    z-index: -1;
    background-image: url('images/pmi-bg-login.png');
    /* cover (not stretch/100% 100%): crops to fill without distorting the
       photo's proportions. The source (1116x658) is a native resolution, so
       cover still has to upscale it on anything wider than that -- some
       softness at large monitor sizes is expected without a higher-res
       source image, but the alternative (stretching) visibly warps the
       logo/wordmark, which reads worse than a little softness. */
    background-size: cover;
    /* Anchored to the bottom: the photo is proportionally wider than most
       viewports are tall, so cover crops vertically -- centering that crop
       cuts through the tagline baked into the bottom of the image. */
    /*background-position: center bottom;*/
    background-position: 60% 70%;
    background-repeat: no-repeat;
    background-color: var(--pmi-black);
}

.login-card-wrapper {
    max-width: 420px;
    margin-right: 3rem;
}

.login-card {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Only thin the card out where the blur actually renders; without it the flat
   translucent white washes out and drops text contrast below AA. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-card {
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

.login-logo {
    display: block;
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0 auto 0.5rem;
}

/* Bootstrap's .text-muted (#6c757d) only clears ~2:1 against the translucent
   card over this near-black background. This clears AA at ~6:1. */
.login-hint {
    color: #3f4650;
}

/* Separate crop of the same photo, composed for narrow/tall viewports rather
   than the wide desktop one. Its own breakpoint (1024px) rather than reusing
   991.98px below, since which *image* to show and how to lay out the card
   are independent decisions that happen to often line up. */
@media (max-width: 1024px) {
    body.login-body::before {
        background-image: url('images/pmi-bg-login-mobile.png');
    }
}

@media (max-width: 991.98px) {
    body.login-body {
        justify-content: center;
    }

    .login-card-wrapper {
        margin-right: 0;
    }

    body.login-body::before {
        /* Cover crops horizontally on narrow viewports, which would slice
           through the artwork's wordmark. Favour the clean chevron pattern
           on the right; the wordmark is a real element in the card at these
           sizes. */
        background-position: right bottom;
        /* The card sits directly over the photo on mobile (no room to offset
           it to one side like on desktop), so blur it for legibility/contrast
           behind the translucent card. filter can't go on body itself since
           that would blur the card along with it -- this pseudo-element is
           the photo's own layer, so blurring it leaves the card untouched. */
        filter: blur(12px);
    }
}