@use '../abstracts/mixins' as *;

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 480px) 1fr;
    background: var(--color-bg);

    @include media-down(lg) { grid-template-columns: 1fr; }

    &__panel {
        display: flex;
        flex-direction: column;
        padding: var(--space-6);
        background: var(--color-surface);
    }
    &__brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
        margin-bottom: var(--space-6);

        &-name { font-size: var(--fs-md); }
    }
    &__body {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    &__footer {
        margin: var(--space-4) 0 0;
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
        text-align: center;
    }
    &__illustration {
        position: relative;
        overflow: hidden;
        background: linear-gradient(140deg, #1E40AF 0%, #2563EB 55%, #0EA5E9 100%);
        color: #fff;

        @include media-down(lg) { display: none; }
    }
    &__gradient {
        position: absolute;
        inset: -20%;
        background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.25), transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(255,255,255,.15), transparent 40%);
        pointer-events: none;
    }
    &__quote {
        position: relative;
        z-index: 1;
        padding: var(--space-9);
        max-width: 520px;

        h1 { color: #fff; font-size: var(--fs-4xl); margin-bottom: var(--space-3); }
        p  { color: rgba(255,255,255,.85); font-size: var(--fs-lg); }
    }
}

.auth-card {
    width: 100%;
    max-width: 380px;

    &__header { margin-bottom: var(--space-5); }
    &__title { font-size: var(--fs-2xl); margin-bottom: var(--space-1); }
    &__subtitle { color: var(--color-text-muted); }
    &__form .btn { margin-top: var(--space-2); }
    &__link { font-size: var(--fs-sm); color: var(--color-primary); }
    &__meta { text-align: center; margin-top: var(--space-4); }
}