/* Иконки соцсетей. ТЗ 2026-08-27, пп. 4 и 6.

   Раньше в подвале стояли два серых глифа цвета текста — их не было
   видно, и по ним не читалось, куда они ведут. Теперь каждая иконка
   носит цвет своей площадки: ВКонтакте синий, Telegram голубой,
   YouTube красный. Цвет приходит из PHP переменной --wtg-social-color,
   поэтому новая сеть добавляется одной строкой в списке, без правки CSS. */

/* ── Подвал ───────────────────────────────────────────────────────── */
.wtg-socials {
  list-style: none;
  padding: 0;
}

.wtg-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: var(--wtg-social-color, #2f6fed);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wtg-social-color, #2f6fed) 40%, transparent);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Запасной вариант для браузеров без color-mix: тень просто мягче. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .wtg-social { box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
}

.wtg-social svg {
  width: 22px;
  height: 22px;
  display: block;
}

.wtg-social:hover,
.wtg-social:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.12);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--wtg-social-color, #2f6fed) 55%, transparent);
}

.wtg-social:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Instagram — единственный бренд, у которого нет одного цвета. */
.wtg-social--instagram {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
}

/* ── Страница контактов ───────────────────────────────────────────── */
/* Плитка иконки получает цвет площадки — карточки перестают быть
   шестью одинаковыми серыми прямоугольниками. */
.wtg-social-card .contacts__social-icon {
  background: var(--wtg-social-color, #2f6fed);
  color: #fff;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--wtg-social-color, #2f6fed) 35%, transparent);
}

.wtg-social-card:hover .contacts__social-icon {
  background: var(--wtg-social-color, #2f6fed);
  filter: brightness(1.12);
}

.wtg-social-card:hover {
  border-color: var(--wtg-social-color, #2f6fed);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--wtg-social-color, #2f6fed) 28%, transparent);
}

.wtg-social-card--instagram .contacts__social-icon,
.wtg-social-card.wtg-social--instagram .contacts__social-icon {
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 45%, #6228d7);
}

/* Поддержка в Telegram вместо почты: тот же цвет, что и у иконки в шапке
   раздела, чтобы блок читался как «написать в Telegram», а не как форма. */
.contacts__email-icon.wtg-social--telegram {
  background: var(--wtg-social-color, #29a9eb);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--wtg-social-color, #29a9eb) 35%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .wtg-social { transition: none; }
  .wtg-social:hover { transform: none; }
}