﻿.am-header__row {
    grid-template-columns: max-content minmax(0, 1fr) auto;
}

.am-logo {
    min-width: 0;
    width: max-content;
    max-width: 380px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-self: start;
}

    .am-logo img {
        display: block;
        width: auto;
        height: auto;
        max-height: 96px;
        max-width: min(380px, 100%);
        object-fit: contain;
    }

.am-logo__text {
    display: block;
    max-width: 380px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-lang {
    position: relative;
    margin-right: 10px;
}

.am-langbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
}

.am-langshort {
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .5px;
}

.am-langmenu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 170px;
    max-width: min(280px, calc(100vw - 16px));
    max-height: min(420px, calc(100vh - 24px));
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0,0,0,.14);
    padding: 8px;
    z-index: 9999;
}

    .am-langmenu[hidden] {
        display: none !important;
    }

.am-langitem {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px;
    border: 0;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
}

    .am-langitem:hover {
        background: #f6f7fb;
    }

    .am-langitem.is-current {
        background: #eef2ff;
        font-weight: 700;
    }

    .am-langitem:disabled {
        opacity: .75;
        cursor: default;
    }

.am-langbadge {
    font-size: 12px;
    opacity: .7;
}

@media (max-width: 1024px) {
    .am-logo {
        max-width: min(100%, 300px);
        padding-right: 10px;
    }

        .am-logo img {
            max-height: 68px;
            max-width: 100%;
        }

    .am-logo__text {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .am-logo {
        max-width: min(100%, 240px);
        padding-right: 8px;
    }

        .am-logo img {
            max-height: 56px;
            max-width: 100%;
        }

    .am-logo__text {
        max-width: 100%;
    }

    .am-lang {
        margin-right: 0;
    }
}
