/* ========================================
   ORGANIZATION AUTH PAGES — SPLIT-SCREEN REDESIGN
   Scoped entirely to .org-auth-shell, which only the org-branded
   /{slug}/login, /forget-password and /reset-password pages render.
   The platform's own /login etc. never get this wrapper, so their
   look (login-container/login-card from password-toggles.css) is
   untouched.
   ======================================== */

.org-auth-shell {
    height: calc(100vh - var(--navbar-height, 64px));
    overflow: hidden;
}

.org-auth-row {
    display: flex;
    align-items: stretch;
    /* height, not min-height: min-height is only a floor, so content
       taller than one screen was still free to push the row (and so the
       whole page) past the viewport -- which is exactly what kept
       happening. A hard height makes this row an actual ceiling; anything
       that doesn't fit inside it has to scroll within .org-auth-form-col
       (via its own max-height + overflow-y:auto below) instead of
       growing the page. */
    height: 100%;
}

.org-auth-image-col {
    position: relative;
    flex: 1 1 50%;
    max-width: 50%;
    overflow: hidden;
}

.org-auth-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.org-auth-form-col {
    position: relative;
    flex: 1 1 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    /* Vertically centered -- safe now that .org-auth-row has a hard height
       (not min-height) and this column has overflow-y:auto as a fallback,
       so centering can no longer push the page past one screen the way it
       did before that fix. The footer line is pinned to the bottom via
       position:absolute (below) instead of flex order, specifically so it
       stays out of this centering and never ends up part of it. */
    justify-content: center;
    /* The padding is clamp()'d to the viewport height (not a fixed px
       value): a fixed padding that "fit" on one screen overflowed shorter
       ones. The bottom value is extra generous to reserve room for the
       absolutely-positioned footer line so centered content never
       overlaps it. */
    padding: clamp(20px, 5vh, 56px) 8% clamp(56px, 9vh, 76px);
    overflow-y: auto;
    background: #ffffff;
}

.org-auth-form-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.org-auth-eyebrow {
    color: var(--primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    margin-bottom: clamp(8px, 1.5vh, 14px);
}

.org-auth-form-col h1 {
    font-size: clamp(1.75rem, 3vw + 1rem, 2.4rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111;
    margin-bottom: clamp(6px, 1vh, 10px);
}

.org-auth-subtitle {
    color: #8a8f98;
    font-size: 1rem;
    margin-bottom: clamp(16px, 2.5vh, 30px);
}

/* Tightens the generic Bootstrap mt-35/mt-30/mt-20 utility spacing used
   between the form and its surrounding elements -- those are fixed px
   values too, and the same "fits on a tall screen, overflows a short one"
   problem applies to them as much as to this column's own padding. */
.org-auth-form-inner form {
    margin-top: clamp(16px, 3vh, 28px) !important;
}

.org-auth-form-inner .mt-30 {
    margin-top: clamp(12px, 2vh, 20px) !important;
}

/* Pinned to the bottom of .org-auth-form-col with position:absolute (that
   column is the positioned ancestor) instead of flex order/auto-margins --
   those would have competed with centering the form above (an auto margin
   eats all the free space meant for centering, so the two can't coexist
   in plain flex). Absolute positioning keeps it fully out of that layout,
   which is also why .org-auth-form-col's bottom padding was made extra
   generous above, to reserve room for it. Sitting right after "Forgot
   your password?" made it read as part of the form; this keeps it
   present but clearly secondary. */
.org-auth-footer-text {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: clamp(16px, 3vh, 28px);
    text-align: center;
    color: #b5bac1;
    font-size: .75rem;
}

/* The design embeds the "Powered by..." line at the bottom of the form
   column itself (see .org-auth-footer-text above), so the sitewide footer
   bar is redundant here. */
.org-auth-footer {
    display: none;
}

@media (max-width: 991px) {
    .org-auth-shell {
        height: auto;
        overflow: visible;
    }

    .org-auth-row {
        flex-direction: column;
        height: auto;
    }

    .org-auth-image-col,
    .org-auth-form-col {
        max-width: 100%;
        flex: none;
    }

    /* Form first, image below -- the reverse of the source order (the
       image comes first in the markup so it's the left column on desktop)
       since `order` only changes visual position, not DOM order. */
    .org-auth-form-col {
        order: 1;
    }

    .org-auth-image-col {
        order: 2;
        height: clamp(280px, 45vh, 420px);
    }

    /* Stacked layout scrolls as a normal page, top-to-bottom, instead of
       the desktop column's vertical centering + pinned-footer setup. */
    .org-auth-form-col {
        position: static;
        justify-content: flex-start;
        overflow-y: visible;
        padding: 40px 24px;
    }

    .org-auth-footer-text {
        position: static;
        margin-top: 24px;
    }
}