/* ==========================================================================
   Страница «Обратная связь» (/about/feedback/)
   Все значения — из дизайн-системы ВЭР (brand.html v2.9), см. спеку web-designer.
   Скоуп .tg-feedback: подключается на всех статических страницах, но применяется
   только к контенту страницы обратной связи (не влияет на остальные).
   ========================================================================== */

.tg-feedback {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 8px;
}

/* --- Заголовок блока (04A2-адаптация; sentence case намеренно) --- */
.tg-feedback__heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: #000;
  text-align: center;
  margin: 0 0 16px;
}

/* --- Лид-инструкция (токен 03G) --- */
.tg-feedback__lead {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #363636;
  text-align: center;
  margin: 0 0 32px;
}

/* --- Список кнопок-площадок --- */
.tg-feedback__btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.tg-fbtn {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  background: #1C1F24;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tg-fbtn:hover,
.tg-fbtn:focus-visible {
  background: #2d3039;
  box-shadow: 0 6px 22px rgba(28,31,36,.35);
  transform: translateY(-2px);
}
.tg-fbtn:focus-visible {
  outline: 2px solid #FFCE00;
  outline-offset: 2px;
}
.tg-fbtn:hover .tg-fbtn__arrow,
.tg-fbtn:focus-visible .tg-fbtn__arrow {
  transform: translateX(4px);
}

.tg-fbtn__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-fbtn__icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.tg-fbtn__label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: #fff;
  flex-grow: 1;
}
.tg-fbtn__arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #fff;
  display: flex;
  transition: transform .2s ease;
}
.tg-fbtn__arrow svg { width: 20px; height: 20px; display: block; }

/* --- Разделитель блоков (--border) --- */
.tg-feedback__divider {
  border: none;
  border-top: 1px solid #D9D9D9;
  margin: 96px 0;
}

/* --- Обращение к директору --- */
.tg-feedback__statement {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #363636;
  text-align: center;
  max-width: 520px;
  margin: 0 auto 40px;
}
.tg-feedback__statement b {
  color: #000;
  font-weight: 600;
}

/* --- Карточка директора --- */
.tg-feedback__director {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tg-feedback__avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(28,31,36,.10); /* --shadow-med (04F) */
  border: 4px solid #fff;
  margin-bottom: 20px;
}
.tg-feedback__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tg-feedback__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #000;
  margin-bottom: 4px;
  text-align: center;
}
.tg-feedback__role {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #363636;
  margin-bottom: 24px;
  text-align: center;
}

/* --- Иконки личных каналов (1:1 токен 06A .site-header__social-btn) --- */
.tg-feedback__channels {
  display: flex;
  gap: 12px;
}
.tg-fchan {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #363636;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

/* Fix (2026-07-27): `.side-text a, .page-content a { color:#000 }` из new-theme.css
   (специфичность 0,1,1) перебивала `.tg-fchan { color:#fff }` (0,1,0) → иконки
   соцканалов директора рендерились чёрными на тёмном фоне #363636. Поднимаем
   специфичность дефолтного цвета до 0,2,0 — иконки становятся белыми. Правило стоит
   ДО :hover (та же специфичность, но hover ниже по источнику) → жёлтый #fed501 при
   наведении работает как прежде. */
.page-content .tg-fchan {
  color: #fff;
}
.tg-fchan:hover,
.tg-fchan:focus-visible {
  background: #555;
  color: #fed501;
  transform: translateY(-2px);
}
.tg-fchan:focus-visible {
  outline: 2px solid #FFCE00;
  outline-offset: 2px;
}
.tg-fchan svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}

/* --- Мобильная раскладка (≤767px, правило ×0.75 из 03-spacing) --- */
@media (max-width: 767px) {
  .tg-feedback { max-width: 100%; }
  .tg-feedback__heading { font-size: 22px; margin-bottom: 12px; }
  .tg-feedback__lead { font-size: 14px; margin-bottom: 24px; }
  .tg-fbtn { height: 56px; padding: 0 16px; }
  .tg-fbtn__icon { width: 20px; height: 20px; margin-right: 12px; }
  .tg-fbtn__icon img { width: 20px; height: 20px; }
  .tg-fbtn__label { font-size: 14px; }
  .tg-feedback__divider { margin: 64px 0; }
  .tg-feedback__statement { font-size: 14px; margin-bottom: 28px; }
  .tg-feedback__avatar { width: 96px; height: 96px; margin-bottom: 16px; }
  .tg-feedback__name { font-size: 18px; }
  .tg-feedback__role { font-size: 14px; margin-bottom: 20px; }
}

/* --- Уважение к prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .tg-fbtn,
  .tg-fbtn__arrow,
  .tg-fchan {
    transition-duration: .01ms !important;
  }
  .tg-fbtn:hover,
  .tg-fbtn:focus-visible,
  .tg-fchan:hover,
  .tg-fchan:focus-visible {
    transform: none;
  }
  .tg-fbtn:hover .tg-fbtn__arrow,
  .tg-fbtn:focus-visible .tg-fbtn__arrow {
    transform: none;
  }
}