/* Иллюстрации Проектпортала — общие классы для лендингов и auth */

.pp-illustration {
    display: block;
    margin-inline: auto;
}

.pp-illustration img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.pp-illustration--hero {
    width: 100%;
    max-width: 600px;
}

.pp-illustration--hero-start {
    width: 100%;
    max-width: 560px;
}

.pp-illustration--hero-specialists {
    width: 100%;
    max-width: 580px;
}

.pp-illustration--role {
    width: 240px;
    max-width: 100%;
    height: 200px;
    flex-shrink: 0;
}

.pp-illustration--role img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pp-illustration--auth {
    width: 100%;
    max-width: 400px;
}

.pp-illustration--auth-login {
    max-width: 360px;
}

@media (max-width: 991.98px) {
    .pp-illustration--hero {
        max-width: 380px;
    }

    .pp-illustration--hero-start {
        max-width: 360px;
    }

    .pp-illustration--hero-specialists {
        max-width: 380px;
    }
}

@media (max-width: 575.98px) {
    .pp-illustration--role {
        width: 140px;
        height: 120px;
    }
}

/*
 * Auth login/register:
 * карточка всегда по центру экрана; иллюстрация слева абсолютно,
 * не влияет на расчёт положения и ширины карточки.
 */
body.body_guest.body_auth .auth-container.reg-shell.reg-shell--with-art {
    --pp-auth-card-w: 500px;
    --pp-auth-art-gap: 32px;
    max-width: none;
    width: 100%;
}

body.body_guest.body_auth .reg-shell__layout {
    position: relative;
    display: block;
    width: 100%;
}

body.body_guest.body_auth .reg-shell--with-art .reg-card {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: var(--pp-auth-card-w);
    margin-left: auto;
    margin-right: auto;
    flex: none;
}

body.body_guest.body_auth .reg-shell__visual {
    display: none;
    pointer-events: none;
    user-select: none;
}

/* Показываем иллюстрацию только когда слева хватает места (~400 + 32 + 500/2 + поля) */
@media (min-width: 1100px) {
    body.body_guest.body_auth .reg-shell__visual {
        display: block;
        position: absolute;
        top: 50%;
        left: calc(50% - (var(--pp-auth-card-w) / 2) - var(--pp-auth-art-gap));
        transform: translate(-100%, -50%);
        width: min(400px, calc(50% - (var(--pp-auth-card-w) / 2) - var(--pp-auth-art-gap) - 1.25rem));
    }

    body.body_guest.body_auth .reg-shell__visual .pp-illustration--auth {
        width: 100%;
        max-width: 400px;
        margin: 0;
    }

    body.body_guest.body_auth .reg-shell__visual .pp-illustration--auth-login {
        max-width: 360px;
    }
}