/* Кнопка «Связаться с нами» в шапке и всплывающая карточка с контактами.
   На десктопе карточка раскрывается по наведению, на сенсорных устройствах
   по нажатию. Телефон на десктопе просто текст, на телефоне ссылка. */

.hdr-contacts {
    position: relative;
    display: inline-block;
    text-align: left;
}

.hdr-contacts__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 18px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: #e1261c;
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;
}

.hdr-contacts__btn:hover,
.hdr-contacts.is-open .hdr-contacts__btn {
    background: #ffe9e8;
}

.hdr-contacts__card {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 60;
    box-sizing: border-box;
    margin-top: 14px;
    padding: 26px 28px;
    min-width: 320px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(20, 24, 34, .20);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

/* Мостик над карточкой: без него курсор по дороге от кнопки к карточке
   выходит за пределы блока и она успевает закрыться. */
.hdr-contacts__card::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.hdr-contacts.is-open .hdr-contacts__card {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.hdr-contacts__tel {
    display: block;
    margin: 0;
    color: #141822;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
}

.hdr-contacts__tel_link {
    display: none;
}

.hdr-contacts__mail {
    display: inline-block;
    margin: 16px 0 0;
    color: #e1261c;
    font-size: 20px;
    line-height: 1.2;
    text-decoration: none;
    border-bottom: 1px solid rgba(225, 38, 28, .35);
}

.hdr-contacts__mail:hover {
    border-bottom-color: #e1261c;
}

.hdr-contacts__cta {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 22px 0 0;
    padding: 13px 18px;
    border: 0;
    border-radius: 4px;
    background: #e1261c;
    color: #fff;
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease;
}

.hdr-contacts__cta:hover {
    background: #c91f17;
}

/* На сенсорных устройствах номер должен набираться нажатием */
@media (hover: none), (pointer: coarse) {
    .hdr-contacts__tel_text {
        display: none;
    }

    .hdr-contacts__tel_link {
        display: block;
    }
}

/* Узкие экраны: карточка не должна вылезать за край окна */
@media screen and (max-width: 420px) {
    .hdr-contacts__tel {
        font-size: 21px;
    }
}

/* ---------- Планшет и телефон ----------
   Раньше «Связаться с нами» была только внутри свёрнутого меню, а в шапке
   стояла отдельная иконка обратного звонка. На планшете кнопку не находили.
   Теперь кнопка стоит прямо в шапке в том же виде, что и на компьютере,
   а на узких экранах сжимается до трубки и открывает ту же карточку.
   Номер в этой карточке всегда ссылка: звонят как раз отсюда. */
.hdr-contacts_baget {
    display: none;
    vertical-align: middle;
}

.hdr-contacts_baget .hdr-contacts__btn-icon {
    display: none;
}

.hdr-contacts_baget .hdr-contacts__tel_text {
    display: none;
}

.hdr-contacts_baget .hdr-contacts__tel_link {
    display: block;
}

.hdr-contacts_baget .hdr-contacts__card {
    right: 0;
    min-width: 300px;
    max-width: calc(100vw - 32px);
}

@media screen and (max-width: 1310px) {
    .menu-baget {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
    }

    .hdr-contacts_baget {
        display: inline-block;
    }
}

@media screen and (max-width: 450px) {
    .menu-baget {
        gap: 12px;
    }

    /* На телефоне остаётся только трубка, как и было */
    .hdr-contacts_baget .hdr-contacts__btn {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 50%;
    }

    .hdr-contacts_baget .hdr-contacts__btn-text {
        display: none;
    }

    .hdr-contacts_baget .hdr-contacts__btn-icon {
        display: block;
    }

    /* Трубка стоит у самого края, и карточка, привязанная к ней, вылезала
       за экран. Привязываем её к шапке: тогда она идёт во всю ширину. */
    .header {
        position: relative;
    }

    .hdr-contacts_baget {
        position: static;
    }

    .hdr-contacts_baget .hdr-contacts__card {
        left: 0;
        right: 0;
        min-width: 0;
        max-width: none;
    }
}

/* На телефоне по номеру именно звонят, поэтому зона касания
   доводится до 44 пикселей: строчки в 24 пикселя пальцем мало. */
@media screen and (max-width: 450px) {
    .hdr-contacts_baget .hdr-contacts__tel_link {
        padding: 10px 0;
    }

    .hdr-contacts_baget .hdr-contacts__mail {
        padding: 6px 0;
        margin-top: 8px;
    }
}