/**
 * External sign-in entries and the two-column login layout (frontend only,
 * so the sukanTheme `--sukan-*` custom properties are available).
 *
 * The login page override arranges the official form (left) and the external
 * sign-in entries (right) in `.sukan_login_layout`; on narrow screens the
 * entries stack below the form with a top divider. The card itself spans the
 * full frontend content container; each column caps its own content at a
 * readable measure so inputs never stretch into long bars.
 */

.page_login.sukan_login {
    inline-size: 100%;
    max-inline-size: none;
}

.sukan_login_layout {
    display: grid;
    gap: var(--sukan-space-6, 2rem);
}

.sukan_login_layout__main {
    min-inline-size: 0;
}

.sukan_login_layout__main .cmp_form {
    margin-inline: auto;
    max-inline-size: 30rem;
}

.sukan_login_layout__aside {
    border-block-start: 1px solid var(--sukan-color-border-subtle, #e5e7eb);
    min-inline-size: 0;
    padding-block-start: var(--sukan-space-5, 1.5rem);
}

.sukan_login_layout__aside .sukan_external_login {
    margin-block-start: 0;
    margin-inline: auto;
    max-inline-size: 26rem;
}

.sukan_external_login h2 {
    font-size: var(--sukan-font-size-h4, 1.125rem);
    margin: 0 0 var(--sukan-space-2, 0.5rem);
}

.sukan_external_login__description {
    color: var(--sukan-color-text-muted, #6b7280);
    font-size: var(--sukan-font-size-small, 0.875rem);
    margin: 0 0 var(--sukan-space-4, 1rem);
}

.sukan_external_login__providers {
    display: grid;
    gap: var(--sukan-space-3, 0.75rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

.sukan_external_login__link {
    align-items: center;
    background: var(--sukan-color-surface, #fff);
    border: 1px solid var(--sukan-color-interactive, #3498db);
    border-radius: var(--sukan-radius-small, 0.25rem);
    color: var(--sukan-color-interactive-hover, #2980b9);
    display: flex;
    font-weight: var(--sukan-font-weight-strong, 700);
    gap: var(--sukan-space-2, 0.5rem);
    justify-content: center;
    line-height: var(--sukan-line-height-control, 1.25);
    min-block-size: var(--sukan-touch-target, 2.75rem);
    padding: 0.625rem 1rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--sukan-duration-standard, 160ms) ease,
        color var(--sukan-duration-standard, 160ms) ease;
}

.sukan_external_login__link:hover,
.sukan_external_login__link:focus-visible {
    background: var(--sukan-color-interactive, #3498db);
    color: #fff;
}

.sukan_external_login__link:focus-visible {
    outline: var(--sukan-focus-width, 0.1875rem) solid var(--sukan-color-focus, #005fcc);
    outline-offset: var(--sukan-focus-offset, 0.1875rem);
}

.sukan_external_login__icon {
    block-size: 1.25rem;
    flex: none;
    inline-size: 1.25rem;
}

/* Secondary register button beside the primary submit in the login form. */
.page_login.sukan_login .buttons a.register.sukan_login_register {
    align-items: center;
    background: var(--sukan-color-surface, #fff);
    border: 1px solid var(--sukan-color-interactive, #3498db);
    border-radius: var(--sukan-radius-small, 0.25rem);
    color: var(--sukan-color-interactive-hover, #2980b9);
    display: inline-flex;
    flex: 0 1 auto;
    font-weight: var(--sukan-font-weight-strong, 700);
    justify-content: center;
    line-height: var(--sukan-line-height-control, 1.25);
    min-block-size: var(--sukan-touch-target, 2.75rem);
    padding: 0.6rem 1.25rem;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--sukan-duration-standard, 160ms) ease,
        color var(--sukan-duration-standard, 160ms) ease;
}

.page_login.sukan_login .buttons a.register.sukan_login_register:hover,
.page_login.sukan_login .buttons a.register.sukan_login_register:focus-visible {
    background: var(--sukan-color-interactive, #3498db);
    color: #fff;
}

.page_login.sukan_login .buttons a.register.sukan_login_register:focus-visible {
    outline: var(--sukan-focus-width, 0.1875rem) solid var(--sukan-color-focus, #005fcc);
    outline-offset: var(--sukan-focus-offset, 0.1875rem);
}

@media (min-width: 48rem) {
    .sukan_login_layout {
        align-items: start;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .sukan_login_layout__aside {
        border-block-start: 0;
        border-inline-start: 1px solid var(--sukan-color-border-subtle, #e5e7eb);
        padding-block-start: 0;
        padding-inline-start: var(--sukan-space-6, 2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sukan_external_login__link,
    .page_login.sukan_login .buttons a.register.sukan_login_register {
        transition: none;
    }
}