/* Блок «Поможем выбрать курс»: три канала связи вместо формы заявки.

   Базовая карточка (.channels, .channel) приходит из style.css — та же, что на
   странице контактов, где она подробная: там человек ищет реквизиты. Здесь
   задача другая, карточка работает как кнопка: крупно название канала, контакт
   подписью под ним.

   Контакт не убран совсем намеренно. Для мессенджеров он и правда не нужен —
   клик открывает чат. Но mailto на десктопе без настроенного почтового клиента
   молча не срабатывает, и видимый адрес остаётся единственным способом его
   узнать.

   Контейнер в style.css был flex с двумя колонками (450 + 320) под текст и
   форму. Формы больше нет: текст сверху во всю ширину, каналы под ним. */

/* Три вложенные поверхности, все тёмные: секция → контейнер → карточки.

   Раньше два из этих трёх прямоугольников были белыми, и тёмная секция
   работала не как акцент, а как рамка вокруг белого блока. Белого больше нет,
   но сама трёхслойная структура сохранена: она даёт глубину и отделяет блок
   от соседних секций.

   Поверхности различаются не по contrast ratio — формула WCAG считает текст, а
   для двух тёмных фонов всегда даёт около единицы, — а по шагу светлоты L*:
   11,3 → 16,6 → 21,3, то есть +5,3 и +4,7. Ступень около пяти единиц читается
   как отдельная поверхность и при этом не спорит с соседней за внимание.

   Все три цвета уже есть в палитре сайта, новых оттенков блок не вводит.

   Фон секции задан здесь, а не инлайном в разметке: три уровня подбираются
   только вместе, разносить их по файлам нельзя. */
#request-widget {
  background-color: #171F26;
}

/* Контейнер теряет только белый фон: скругление и отступы из style.css нужны
   как были, включая адаптивные. */
#request-widget .help-form-container {
  display: block;
  background: #212A32;
}

#request-widget .help-form-container .description .title h2 {
  color: #FFFFFF;
}

#request-widget .help-form-container .description .text {
  color: #C8CFD4;
}

.help-form-pick .channels-hours {
  color: #A3ADB6;
}

.help-form-pick .channels-hours b {
  color: #FFFFFF;
}

/* Ширина и правый отступ описания заданы в style.css под старую раскладку в две
   колонки — без формы они только режут строку. */
#request-widget .help-form-container .description {
  max-width: 720px;
  padding-right: 0;
  display: block;
}

.help-form-pick .channels {
  margin-top: 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Кнопка: иконка слева, две строки текста справа. */
.help-form-pick .channel {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 0 16px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 18px 20px;
  border-radius: 16px;
  background: #2C343C;
  border-color: #3A434D;
}

.help-form-pick .channel:hover,
.help-form-pick .channel:focus-visible {
  border-color: #FFFFFF;
}

.help-form-pick .channel__icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  /* Плашка в цвете канала, иконка белая: по такому квадрату Telegram и
     WhatsApp узнаются раньше, чем прочитано название. Бежевая плашка вдобавок
     спорила с жёлтыми кнопками действия за внимание. */
  background: #171F26;
  color: #FFFFFF;
}

/* Официальный ярко-зелёный WhatsApp (#25D366) даёт с белым только 1.98:1 —
   ниже минимума 3:1 для графики. Берём затемнённый вариант того же оттенка:
   3.09:1, и зелёный по-прежнему читается как WhatsApp.
   Telegram #229ED9 — официальный цвет, 3.02:1. У почты бренда нет, поэтому
   она остаётся в графите сайта. */
.help-form-pick .channel--telegram .channel__icon {
  background: #229ED9;
}

.help-form-pick .channel--whatsapp .channel__icon {
  background: #1FA855;
}

/* Графитовая плашка почты на тёмной карточке даёт 1,32:1 и сливается с ней.
   У почты бренда нет, поэтому берём обратный ход: светлая плашка, тёмная
   иконка — 10,5:1 к карточке. */
.help-form-pick .channel--email .channel__icon {
  background: #E8EBED;
  color: #171F26;
}

.help-form-pick .channel__name {
  grid-column: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 19px;
  line-height: 26px;
  color: #FFFFFF;
}

/* Точка показывает скорость канала: мессенджер отвечает быстрее почты.
   Повторяет логику .channel__kind i из style.css. */
.help-form-pick .channel__name i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #CBD2D9;
  flex: none;
}

/* Тёмно-зелёный из палитры кнопок здесь даёт 2,1:1 — на верхней поверхности
   лестницы точка почти не видна. Осветлённый тон того же оттенка: 4,3:1. */
.help-form-pick .channel--fast .channel__name i {
  background: #4CA87F;
}

.help-form-pick .channel__note {
  grid-column: 2;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  color: #A3ADB6;
  /* Длинная почта не должна распирать колонку. */
  overflow-wrap: break-word;
  word-break: break-word;
}

.help-form-pick .channels-hours {
  margin-top: 20px;
}

/* На планшете три колонки дают 250px, и почта в них ломается посреди слова.
   Две колонки, а третья карточка занимает нижний ряд целиком: иначе она висит
   слева обрывком. */
@media only screen and (max-width: 991px) {
  .help-form-pick .channels {
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .help-form-pick .channels > .channel:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

@media only screen and (max-width: 767px) {
  .help-form-pick .channels {
    grid-template-columns: minmax(0, 1fr);
  }

  .help-form-pick .channels > .channel:last-child:nth-child(odd) {
    grid-column: auto;
  }
}

@media only screen and (max-width: 575px) {
  .help-form-pick .channel {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 0 14px;
    padding: 16px 18px;
  }

  .help-form-pick .channel__icon {
    width: 44px;
    height: 44px;
  }

  .help-form-pick .channel__name {
    font-size: 18px;
    line-height: 25px;
  }
}