/* Messenger positions are fixed independently of the contact title. */
.contacts__item-top,
.contacts__block-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    align-items: start;
    gap: 12px;
    width: 100%;
}
.contacts__item-name,
.contacts__block-name {
    min-width: 0;
    margin: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
}
.contacts__item-socials,
.contacts__block-socials {
    display: grid;
    grid-template-columns: repeat(3, 36px);
    gap: 0;
    justify-self: end;
    align-self: start;
    margin-top: -6px;
}
.contacts__item-socials > a.contacts__messenger,
.contacts__block-socials > a.contacts__messenger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 4px;
    grid-row: 1;
}
.contacts__messenger--max { grid-column: 1; }
.contacts__messenger--telegram { grid-column: 2; }
.contacts__messenger--whatsapp { grid-column: 3; }
.contacts__messenger svg { width: 20px; height: 20px; flex-shrink: 0; }
.contacts__messenger:hover { background-color: rgba(37,37,37,.06); }
.contacts__messenger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (pointer: coarse) {
    .contacts__item-top, .contacts__block-top { grid-template-columns: minmax(0, 1fr) 132px; }
    .contacts__item-socials, .contacts__block-socials { grid-template-columns: repeat(3, 44px); margin-top: -10px; }
    .contacts__item-socials > a.contacts__messenger,
    .contacts__block-socials > a.contacts__messenger { width: 44px; height: 44px; padding: 12px; }
}

/* The two primary contacts need an explicit panel width to avoid intrinsic shrinkage. */
.contacts__header-content { width: min(850px, calc(100% - 30px)); box-sizing: border-box; }
.contacts__block { flex: 1 1 0; min-width: 0; }
.contacts__block-name { overflow-wrap: normal; }

@media (max-width: 575px) {
    .contacts__block-name { font-size: 16px; overflow-wrap: break-word; }
}
