/* ============================================================
   «ПЕРЕДАТЬ ТЕМ, КТО ВАЖЕН И ДОРОГ» — общий файл на весь сайт.

   Первая версия была подчёркнутой строкой в подвале и провалилась.
   Разбор Дмитрия (ТЗ «Ссылка Передать», 07.08.2026) назвал три причины,
   и ни одна не в формулировке:
     1) подчёркивание в подвале ставит строку в один ряд с «политикой»
        и «условиями» — она читается как служебная сноска;
     2) кегль был как у копирайта рядом, глазу не за что зацепиться;
     3) ничто не сообщало, что по строке можно нажать.
   Отсюда нынешний вид: рамка + сериф крупнее окружения + ромб как маркер.

   Глагол тоже сменился: «поделиться» — из словаря соцсетей, а память
   передают. Слово «поделиться» в интерфейсе сайта больше не употребляется.

   Заливка еле заметная (3 %), а не сплошная латунь, — намеренно. Залитая
   кнопка стала бы вторым главным действием страницы, и человек внизу
   выбирал бы между ней и бронью. Рамка читается как действие, но остаётся
   вторичной.

   Токенов :root здесь нет: файл подключается к страницам, где они уже
   объявлены. Но объявлены не одни и те же — шкала кеглей легла только
   на index.html, поэтому --h-card взят с запасным значением.
   ============================================================ */

.peredat{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
}

/* Сама кнопка. Подчёркивания нет ни в одном состоянии — именно оно
   и делало строку похожей на служебную ссылку подвала. */
.peredat-knopka{
  box-sizing:border-box;
  display:inline-flex;align-items:center;gap:12px;
  min-height:60px;padding:0 32px;
  border:1px solid rgba(231,197,131,.28);
  border-radius:8px;
  background:rgba(231,197,131,.03);
  color:var(--night-text);
  font-family:var(--serif);
  font-size:var(--h-card,clamp(21px,2vw,26px));
  line-height:1.25;
  text-decoration:none;
  transition:border-color .12s var(--ease),background-color .12s var(--ease);
}

/* Ромб с переплёта — тот же приём, что у маркера кикера (.kicker--mark):
   фоновая картинка на псевдоэлементе, а не <img>. Так он не даёт сдвига
   вёрстки при загрузке и берётся из общей переменной, а не из своего пути.

   20px, а не 13px из ТЗ. Там ждали одиночный вытянутый ромб 232×322,
   а наш ribbon-diamond.webp — квадратная плитка узора 72×72 с обрамлением.
   На 13px её внутренние линии сливаются в красную кляксу: это то самое
   правило проекта «ниже 20px узор превращается в грязь». Сравнили 13 / 18 /
   20 / 24 снимком — узор начинает читаться ровно с двадцати. */
.peredat-knopka::before{
  content:'';flex:none;width:20px;height:20px;
  background:var(--ribbon-diamond) center/contain no-repeat;
  opacity:.92;
}

/* На наведении меняется только заливка и рамка: ни сдвига, ни тени,
   ни увеличения — подвал не место для движения. */
.peredat-knopka:hover{
  border-color:var(--brass-soft);
  background:rgba(231,197,131,.07);
}
.peredat-knopka:active{background:rgba(231,197,131,.1)}
.peredat-knopka:focus-visible{
  outline:2px solid var(--brass-soft);outline-offset:3px;
}

/* ряд каналов: появляется только там, где нет системной шторки отправки.
   hidden снимается скриптом, а класс .on включает проявление — анимируются
   только opacity и transform, как везде на сайте */
.peredat-kanaly{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0 4px;
  opacity:0;transform:translateY(-4px);
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.peredat-kanaly.on{opacity:1;transform:none}
.peredat-kanaly[hidden]{display:none}

/* каналы набраны мельче кнопки: это уже выбор способа, а не призыв */
.peredat-kanal{
  display:inline-flex;align-items:center;min-height:44px;
  appearance:none;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:var(--t-micro);line-height:1.4;
  color:var(--night-mute);text-decoration:none;
  padding:0 8px;
  transition:color .2s var(--ease);
}
.peredat-kanal:hover{color:var(--night-brass)}
.peredat-kanal:focus-visible{outline:2px solid var(--night-brass);outline-offset:2px;border-radius:2px}
.peredat-kanal:active{color:var(--night-brass)}
/* подтверждение встаёт на место надписи и ничего не сдвигает */
.peredat-kanal.gotovo{color:var(--night-brass)}

.peredat-tochka{
  color:var(--hush);opacity:.5;font-size:var(--t-micro);
  user-select:none;
}

/* Кнопка в конце страницы чтения. Там весь набор идёт от левого края —
   центрированная кнопка висела посреди пустого места и читалась как чужая.
   Своей черты сверху нет: блок действий над ней уже отчёркнут. Отступа
   тоже нет — .wrap страницы это grid с gap 56px, и свой margin поверх него
   выбивал бы кнопку из общего ритма блоков. */
.peredat--otdelno{
  align-items:flex-start;text-align:left;
}

/* ---------- телефон ----------
   Ромб уходит над текстом: слева от строки он съедает меру, и фраза
   ломается на три строки. Кнопка во всю ширину и выше стандартных 44px —
   это самая нижняя кнопка страницы, палец дотягивается до неё неточно. */
@media(max-width:640px){
  .peredat-knopka{
    display:grid;justify-items:center;gap:10px;
    width:100%;min-height:72px;padding:16px 20px;
    text-align:center;
    font-size:22px;
    /* без balance фраза ломалась как «…кто важен и / дорог» — одно слово
       на второй строке. Тот же приём, что у заголовков сайта. */
    text-wrap:balance;
  }
  .peredat-knopka::before{width:22px;height:22px}
  /* на странице чтения кнопка тоже во всю ширину: иначе она осталась бы
     узкой полосой у левого края, а до неё дотягиваются большим пальцем */
  .peredat--otdelno{align-items:stretch}
}

/* На узком экране ряд каналов переносится, и точка-разделитель оставалась
   висеть в конце строки — читалось как обрыв вёрстки. Там, где перенос
   неизбежен, точки убираем совсем, а каналы разводим воздухом. */
@media(max-width:560px){
  .peredat-tochka{display:none}
  .peredat-kanaly{gap:0 10px}
  .peredat-kanal{padding:0 4px}
}

@media(prefers-reduced-motion:reduce){
  .peredat-kanaly{transition:none;transform:none}
}