/* Строка контактов под формой на узком экране.

   ☠️ Контакты идут одной строкой через точки-разделители:
   «Не готовы говорить? Пройдите квиз за 1 минуту · +7 910 … · Telegram ·
   hello.tck-b@yandex.ru». На телефоне строка переносится как придётся:
   стрелка уезжает на следующую строку отдельно от текста, точки-разделители
   повисают в начале строк, а почта оказывается оторванной от остального.

   На узком экране разделители не нужны — контакты просто выстраиваются
   столбиком, каждый со своей строки.

   ⚠️ Блок в разметке без класса, только inline-стили, поэтому цепляемся
   за содержимое: контейнер, внутри которого лежит ссылка на телефон.
   Так правка работает на всех страницах и не зависит от вёрстки страницы. */

@media (max-width: 640px) {
  div:has(> a[href^="tel:"]):has(> a[href*="t.me"]) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Точки-разделители между ссылками при вертикальной раскладке лишние. */
  div:has(> a[href^="tel:"]):has(> a[href*="t.me"]) > span {
    display: none !important;
  }

  /* Длинная ссылка на квиз: стрелка должна остаться рядом с текстом,
     а не убегать на отдельную строку. */
  div:has(> a[href^="tel:"]):has(> a[href*="t.me"]) > a {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Почта длиннее ширины экрана — разрешаем перенос внутри адреса,
     иначе она вылезает за край. */
  div:has(> a[href^="tel:"]) > a[href^="mailto:"] {
    word-break: break-word;
  }
}