/* ═══════════════════════════════════════════════════════
   СТРАНИЦА КОНТАКТОВ.
   Общий движок — ../shared/styles.css. Здесь только то, чего нет в кейсах.

   Иконки — Remix Icon 4.5 (Apache 2.0): единый линейный пак, где в одном
   стиле есть и интерфейсные значки, и бренды. Пути вшиты в разметку, чтобы
   не тянуть шрифт или спрайт ради девяти значков.
   ═══════════════════════════════════════════════════════ */

/* ─── Герой: фото + типографика + 3D-знак ─────────── */

.c-hero__grid { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .c-hero__grid {
    grid-template-columns: 32% 1fr;
    gap: 3.5rem;
    align-items: start;         /* по верху: у заголовка и фото общая линия */
  }
}

.c-hero__photo { margin: 0; max-width: 17rem; }
@media (min-width: 64rem) { .c-hero__photo { max-width: none; margin-top: .6rem; } }
.c-hero__photo img {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
  /* ⚠️ Никакого своего фона под фото: любой оттенок рано или поздно разойдётся
     с фоном страницы и даст кайму по краю — на видео этим уже обожглись. */
}

.c-hero__head { text-align: left; }

/* Заголовок здесь короче кейсовых, и общий кегль его переращивает: на двух
   словах он лезет в четыре строки и топит остальной текст. */
@media (min-width: 64rem) {
  [data-case="contacts"] .c-hero__head .dspl { font-size: 3.6rem; letter-spacing: -.035rem; }
  [data-case="contacts"] .c-hero__head .dspl.serif { font-size: 2.4rem; }
}

.c-hero__who {
  margin-top: 1.5rem;
  font-size: 1.05rem; line-height: 1.4; color: var(--ink);
}
.c-hero__open {
  margin-top: .55rem; max-width: 32rem;
  font-size: 1rem; line-height: 1.5; color: var(--ink-2);
}

/* Два факта, снимающие вопросы до письма: где человек и когда ответит. */
.c-facts {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem;
  margin-top: 1.5rem; padding: 0; list-style: none;
}
.c-facts__i {
  padding: .34rem .7rem; border: 1px solid var(--line); border-radius: 2rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2);
}

/* ⚠️ Знак приходится переопределять целиком, а не одной координатой.
   В общем CSS у .hero__object при ≥48rem стоит left: 30%; top: 66% плюс
   transform с translate(-50%, -50%) — то есть координаты означают ЦЕНТР.
   Если задать только right, left никуда не денется и победит, а знак уедет
   к верхнему краю. Поэтому здесь сбрасываем left и снимаем центрирование:
   right/top начинают значить ровно то, что написано. */
@media (min-width: 64rem) {
  [data-case="contacts"] .hero__object {
    position: absolute;
    /* top отсчитывается от верха .hero, а он начинается выше шапки — поэтому
       не «чуть-чуть», а с запасом, иначе знак лезет под кнопки. */
    left: auto; right: 3%; top: 8rem;
    width: 20vw; max-width: 13rem; margin: 0;
    transform: perspective(1600px)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
               translate3d(var(--mx, 0px), var(--my, 0px), 0);
  }
}

/* ─── Ведущий блок: Telegram и WeChat ─────────────── */
/* Имя у них общее, поэтому и строка одна: два раза «Taomasta» в списке
   выглядит как ошибка вёрстки, а не как два канала. */

/* ⚠️ .sec-sub объявлен только в case-ai/case.css, в общем движке его нет —
   на этой странице заголовок оставался вовсе без отступов и «Соцсети»
   прилипал к предыдущей строке. */
.sec-sub { display: block; margin: 0 0 1.2rem; color: var(--ink-2); }
.ct--social + .sec-sub,
.lead + .sec-sub,
.sec-sub + .sec-sub { margin-top: 0; }

/* Разделительных линий в списке нет намеренно: контактов немного, и воздуха
   между строками хватает, чтобы они читались по отдельности. Полосы тут
   превращали короткий список в таблицу. */
/* Колонка значений — одна на весь раздел. Складывается из тех же величин, что
   и строка списка, поэтому «Taomasta» встаёт ровно над почтой и телефонами:
   отступ ссылки + иконка + зазор + колонка подписи + зазор. */
#direct {
  --ct-ico: 1.15rem; --ct-gap: .9rem; --ct-name: 7rem; --ct-pad: .2rem;
  --val-x: calc(var(--ct-pad) + var(--ct-ico) + var(--ct-gap) + var(--ct-name) + var(--ct-gap));
}

.lead {
  margin-top: 0;
  padding-bottom: 4.5rem;      /* тот самый «пустой блок» перед остальными контактами */
  display: grid; gap: 1rem;
}
/* Каналы столбиком слева, имя — справа от них, на линии колонки значений. */
@media (min-width: 48rem) {
  .lead {
    grid-template-columns: var(--val-x) auto;
    justify-content: start;
    /* ⚠️ start, а не baseline. Имя должно стоять на первой строке, вровень
       с «Telegram», но baseline здесь не работает: он не пробивается через
       вложенные флексы (колонка каналов → строка канала → ссылка), и замер
       показывал расхождение в 4 px. Вместо этого равняем коробки по верху —
       у обеих высота задана кнопкой 2.2rem, а текст в них центрован одним
       и тем же интерлиньяжем, поэтому базовые линии совпадают сами. */
    align-items: start;
    column-gap: 0;
  }
}
/* Порядок внутри блока: пометка → названия каналов → само имя.
   Имя одно на два мессенджера, поэтому сначала говорим, ГДЕ писать, и только
   потом даём КОМУ — иначе крупное «Taomasta» повисает без привязки. */
.lead__row {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .55rem; margin-top: 0;
}

/* Имя набрано тем же кеглем, что и названия каналов рядом, только полужирным:
   крупный дисплейный размер спорил с ними за внимание, хотя это одна мысль —
   «вот эти каналы, вот это имя». */
.lead__val {
  --fs: .95rem;
  display: flex; align-items: center; gap: .5rem;
  margin: 0;
  font-size: var(--fs); font-weight: 700; line-height: 1.2;
}

/* Оптическая компенсация свеса больше не нужна: имя и значения списка теперь
   почти одного кегля (.95rem против 1rem), разница свеса — сотые доли пикселя.
   Выравнивание кнопки по верхней линии строчных — тоже: на мелком кегле она
   висела бы заметно ниже строки, поэтому просто по центру. */
.lead__val .act { align-self: center; }

.chan { display: flex; align-items: center; gap: .45rem; order: var(--o, 3); }
.chan__a {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: inherit;
  font-size: .95rem; line-height: 1.2;   /* тот же, что у имени рядом, — см. align-items: start выше */
  transition: opacity .3s var(--e-out);
}
a.chan__a:hover { opacity: .6; }
.chan__ico { width: 1.25rem; height: 1.25rem; display: block; flex: none; }

/* ⚠️ Порядок каналов зависит от языка, а не от разметки: в Китае WeChat —
   основной канал, и ставить его вторым значит терять контакт. */
.chan--tg { --o: 1; }
.chan--wc { --o: 2; }
html[lang^="zh"] .chan--wc { --o: 1; }
html[lang^="zh"] .chan--tg { --o: 2; }

/* ─── Список остальных контактов ──────────────────── */

.ct { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }

.ct__i {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
}
.ct--social { margin-top: 0; }

/* Заголовок «Соцсети» отделяется воздухом, а не линией. */
.ct + .sec-sub { margin-top: 3.5rem; }

/* ⚠️ Ссылка не растягивается на всю строку: с flex: 1 кнопки улетали к правому
   краю и висели в отрыве от текста. Теперь они идут сразу за значением —
   так же, как у Telegram и WeChat в ведущем блоке. */
.ct__link {
  flex: 0 1 auto; min-width: 0;
  display: flex; align-items: center; gap: var(--ct-gap);
  padding: var(--ct-pad);
  text-decoration: none; color: inherit;
}
a.ct__link { transition: opacity .3s var(--e-out); }
a.ct__link:hover { opacity: .6; }
.ct__link--static { cursor: default; }     /* RedNote: ссылки нет, только имя и QR */

.ct__ico { flex: none; width: var(--ct-ico); height: var(--ct-ico); display: block; color: var(--ink-2); }
/* ⚠️ Знак RedNote — не пиктограмма, а иероглифический логотип 小红书, и на общем
   кегле он превращается в пятно. Увеличиваем его масштабом, а НЕ шириной:
   от ширины разъезжалась вся строка — подпись и значение уезжали на 4 px
   правее остальных, и колонка переставала быть колонкой. */
.ct__i--rn .ct__ico { transform: scale(1.26); }
.ct__name {
  flex: none; min-width: var(--ct-name);
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2);
}
.ct__val { font-size: 1rem; line-height: 1.2; overflow-wrap: anywhere; }

@media (max-width: 47.99rem) {
  .ct__link { flex-wrap: wrap; gap: .3rem .7rem; }
  .ct__name { min-width: 0; }
  .ct__val { flex-basis: 100%; }
}

/* ─── Кнопки действий ─────────────────────────────── */

.act {
  flex: none;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: inherit;
  display: grid; place-content: center;
  transition: border-color .3s var(--e-out), opacity .25s var(--e-out);
}
.act__i { width: 1rem; height: 1rem; display: block; }
.act:hover { border-color: currentColor; }

/* На десктопе кнопки действий появляются при наведении на строку — чтобы
   список читался как текст, а не как панель управления. На тач-устройствах
   наводить нечем, поэтому там они видны всегда.
   Место под них занято и в покое (opacity, а не display), иначе строка
   дёргалась бы при каждом наведении. */
@media (hover: hover) {
  .act { opacity: 0; }
  .ct__i:hover .act,
  .lead:hover .act,
  .act:focus-visible,
  .act--copy.is-done { opacity: 1; }
}

/* Подтверждение копирования показываем той же подсказкой: у неё уже есть
   и позиционирование, и анимация — незачем плодить второй механизм. */
.act--copy.is-done::after {
  content: attr(data-tip-done);
  opacity: 1; transform: translate(-50%, 0);
}

/* QR нужен, только когда экран нельзя навести на самого себя: на телефоне
   код бесполезен — там работают ссылка и копирование. */
@media (max-width: 47.99rem) { .act--qr { display: none; } }

/* ─── Модалка с QR ────────────────────────────────── */

.qr {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center;
  padding: var(--pad);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
}
.qr[hidden] { display: none; }

.qr__box {
  position: relative;
  display: grid; justify-items: center; gap: 1rem;
  padding: 2rem 2rem 1.6rem;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg);
  animation: qrIn .45s var(--e-out) both;
}
@keyframes qrIn { from { opacity: 0; transform: translateY(1rem) scale(.97); } }

.qr__t {
  margin: 0; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-2);
}
.qr__img {
  display: block; width: 16rem; height: 16rem; max-width: 60vw;
  border-radius: 8px;
  /* Код должен оставаться контрастным: на тёмной теме белое поле обязательно,
     иначе камера его не прочитает. */
  background: #fff; padding: .6rem;
}
.qr__hint { margin: 0; font-size: .8rem; color: var(--ink-2); text-align: center; }

.qr__x {
  position: absolute; top: .6rem; right: .6rem;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 1px solid var(--line); background: none; color: inherit;
  display: grid; place-content: center;
  transition: border-color .3s var(--e-out);
}
.qr__x:hover { border-color: currentColor; }

@media (prefers-reduced-motion: reduce) { .qr__box { animation: none; } }