/* =========================================================
   PROCITEC – PŘIHLAŠOVACÍ HLAVIČKA
   ========================================================= */

.auth-card-login {
    max-width: 720px;
    padding: 38px 42px 40px;
}

.auth-header {
    display: grid;
    grid-template-columns:
        minmax(240px, 330px)
        minmax(0, 1fr);
    align-items: center;
    gap: 38px;
    margin-bottom: 32px;
    text-align: left;
}

.auth-logo-frame {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 115px;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.auth-logo-frame .auth-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 115px;
    margin: 0;
}

.auth-header-content {
    min-width: 0;
}

.auth-header-content h1 {
    margin: 0 0 10px;
}

.auth-header-content .auth-description {
    margin: 0;
}


/* =========================================================
   PROCITEC PORTAL – LOGO VEDLE NADPISU
   ========================================================= */

.portal-header {
    display: grid;
    grid-template-columns:
        minmax(290px, 390px)
        minmax(0, 1fr);
    grid-template-areas:
        "logo title"
        "logo description"
        "logo user";
    align-items: center;
    column-gap: 48px;
    row-gap: 8px;
    padding: 32px 42px;
    text-align: left;
}

.portal-logo-frame {
    grid-area: logo;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 145px;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.portal-logo-frame .portal-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 145px;
    margin: 0;
}

.portal-header h1 {
    grid-area: title;
    align-self: end;
    margin: 0;
}

.portal-description {
    grid-area: description;
    align-self: center;
    margin: 0;
}

.portal-user {
    grid-area: user;
    align-self: start;
    justify-self: start;
    margin-top: 8px;
}


/* =========================================================
   RESPONZIVNÍ ZOBRAZENÍ
   ========================================================= */

@media (max-width: 800px) {
    .portal-header {
        grid-template-columns: 1fr;
        grid-template-areas:
            "logo"
            "title"
            "description"
            "user";
        justify-items: center;
        row-gap: 10px;
        padding: 29px 20px 26px;
        text-align: center;
    }

    .portal-logo-frame {
        width: min(100%, 430px);
        min-height: 125px;
        margin-bottom: 8px;
    }

    .portal-logo-frame .portal-logo {
        max-height: 125px;
    }

    .portal-header h1,
    .portal-description {
        align-self: auto;
    }

    .portal-user {
        align-self: auto;
        justify-self: center;
        margin-top: 8px;
    }
}

@media (max-width: 680px) {
    .auth-card-login {
        max-width: 440px;
        padding: 30px 25px;
    }

    .auth-header {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
        margin-bottom: 28px;
        text-align: center;
    }

    .auth-logo-frame {
        width: min(100%, 350px);
        min-height: 100px;
    }

    .auth-logo-frame .auth-logo {
        max-height: 100px;
    }

    .auth-header-content h1 {
        margin-bottom: 8px;
    }
}

@media (max-width: 620px) {
    .portal-logo-frame {
        width: min(100%, 360px);
        min-height: 110px;
    }

    .portal-logo-frame .portal-logo {
        max-height: 110px;
    }
}

@media (max-width: 420px) {
    .auth-card-login {
        padding: 27px 20px;
    }

    .auth-logo-frame {
        width: min(100%, 310px);
        min-height: 90px;
    }

    .auth-logo-frame .auth-logo {
        max-height: 90px;
    }
}