/* Публичный слой сайта: шапка, подвал, карта сайта и мягкое появление блоков.

   Зона отвечает за то, что видит человек, пришедший из поиска и в сервис ещё
   не вошедший. Рабочие экраны сюда не заглядывают: подвал сайта включают
   только публичные шаблоны, а шапка приезжает отдельным include.

   Цвета берутся из токенов `osnovy.css` — блог, лендинг и карта сайта обязаны
   выглядеть одним сервисом. */

/* --- шапка публичных страниц -------------------------------------------

   Одна строка вместо двух: `align-items: center` вместо базового `baseline`
   (у кнопки входа своя высота, и по базовой линии она растягивала шапку),
   отступы вдвое меньше рабочих. Просьба Эда 05.09.2026 — шапка занимала
   слишком много места, а на телефоне съедала пятую часть экрана. */
.shapka-sayta {
  align-items: center;
  gap: 6px 14px;
  padding: 10px 24px;
  border-bottom: 1px solid transparent;
  /* Ужимается плавно: рывок на первом же движении колеса читается как
     поломка страницы. Меняются только отступы и рамка — высота содержимого
     остаётся, поэтому текст под шапкой не прыгает. */
  transition: padding var(--t-pop) var(--e-out),
              border-color var(--t-pop) var(--e-out);
}

.shapka-sayta-slogan {
  font-size: 13px;
  color: var(--fg-2);
  /* Слоган уезжает ШИРИНОЙ, а не `display: none`: пропажа элемента из потока
     дёргает соседей, а сжатие ширины проходит незаметно. */
  max-width: 30em;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width var(--t-pop) var(--e-out),
              opacity var(--t-pop) var(--e-out);
}

/* Прокрутили вниз — шапка ужимается ещё и отделяется от текста тонкой чертой
   (класс ставит `blog.js`; без скрипта шапка просто остаётся обычной). */
.shapka-sayta.szhata {
  padding-top: 4px;
  padding-bottom: 4px;
  border-bottom-color: var(--bd);
}

.shapka-sayta.szhata .shapka-sayta-slogan {
  max-width: 0;
  opacity: 0;
}

/* Кнопка входа в шапке ниже рабочей: 11 пикселей отступа сверху и снизу
   растили строку до 46 пикселей одной кнопкой. */
.shapka-sayta .btn-uzkaya {
  padding: 6px 14px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .shapka-sayta { padding-left: 16px; padding-right: 16px; }
  /* На телефоне слогану места нет: там шапка обязана остаться одной строкой,
     иначе липкая шапка отнимает у текста две. */
  .shapka-sayta-slogan { display: none; }
}

/* --- подвал сайта -------------------------------------------------------

   Стоит на публичных страницах (лендинг, «Кто делает сервис», соглашение,
   политика, блог, статья, карта сайта). На рабочих экранах его нет: там
   человек работает, а не ходит по сайту, и у них остаётся короткий подвал
   `.podval` из `base.html`. */
.podval-sayta {
  /* Своего отступа сверху нет: у страницы уже есть свой нижний воздух
     (`.shell` — 96 пикселей), и вместе они давали полтора пустых экрана. */
  border-top: 1px solid var(--bd);
  background: var(--sunken);
}

.podval-sayta-vnutri {
  max-width: var(--col);
  margin: 0 auto;
  padding: 32px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 32px;
  font-size: 13px;
  color: var(--fg-3);
}

.podval-sayta-o p { margin: 0 0 8px; max-width: 42em; line-height: 1.55; }
.podval-sayta-o p:last-child { margin-bottom: 0; }

.podval-sayta-imya {
  font-weight: 620;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Строка про закрытое тестирование: обещать мгновенный вход, когда доступ
   открывают по одному, значит врать на первом же шаге. */
.podval-sayta-test { color: var(--fg-3); }

.podval-sayta-zagolovok {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 620;
  color: var(--ink);
}

.podval-sayta-stolbec ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.podval-sayta-stolbec li { margin-bottom: 7px; }

.podval-sayta a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color var(--t-pop) var(--e-out);
}

.podval-sayta a:hover,
.podval-sayta a:focus-visible { color: var(--ink); text-decoration: underline; }

@media (max-width: 760px) {
  .podval-sayta-vnutri {
    grid-template-columns: 1fr 1fr;
    padding: 24px 16px 32px;
  }
  /* Строка о сервисе занимает обе колонки: разрезанная пополам, она читается
     двумя обрывками. */
  .podval-sayta-o { grid-column: 1 / -1; }
}

/* --- карта сайта для человека ------------------------------------------ */

.karta-gruppa { margin-top: 36px; }

.karta-gruppa h2 {
  margin: 0 0 14px;
  font-size: 20px;
  line-height: 1.25;
}

.karta-spisok {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bd);
}

/* Две колонки, а не строка с переносом: у статей заголовки разной длины, и
   подписи, начинающиеся каждая со своего места, читаются лесенкой. */
.karta-punkt {
  display: grid;
  grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--bd);
}

.karta-punkt a {
  font-weight: 620;
  text-decoration: none;
  transition: color var(--t-pop) var(--e-out);
}

.karta-punkt a:hover,
.karta-punkt a:focus-visible { text-decoration: underline; }

.karta-podpis {
  color: var(--fg-3);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 720px) {
  /* На узком экране подпись встаёт под ссылку: в двух колонках по половине
     экрана от неё остаются обрывки в два слова. */
  .karta-punkt { grid-template-columns: 1fr; }
}

/* --- мягкое появление блоков при прокрутке ------------------------------

   Класс `poyav` ставит СКРИПТ (`blog.js`), и только тем блокам, которые в
   момент загрузки лежат ниже окна. Поэтому первый экран показывается сразу и
   ничего не ждёт, а страница без JS остаётся полностью читаемой: в базовом
   стиле никакого `opacity: 0` нет.

   Двигаются только прозрачность и сдвиг — раскладка не меняется, соседи не
   прыгают. */
.poyav {
  opacity: 0;
  transform: translateY(10px);
}

.poyav-vidno {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--e-out), transform 200ms var(--e-out);
}

/* Тому, кому анимация мешает, ничего не прячем вовсе. Скрипт до этого места
   и не доходит (он проверяет ту же настройку сам), но правило стоит и в
   стиле: настройку можно включить уже после загрузки страницы. */
@media (prefers-reduced-motion: reduce) {
  .poyav { opacity: 1; transform: none; }
  .poyav-vidno { transition: none; }
  .shapka-sayta,
  .shapka-sayta-slogan { transition: none; }
}