/* ============================================================
   SITE — общий хром всех страниц
   Anna Gorodetskaya — Portfolio v2 · 22 августа 2026

   Здесь живёт только то, что появилось в ТЗ №2 и относится ко
   всем страницам сразу: липкая навигация со счётчиками и
   постоянный CTA. Токены не переопределяются — они приходят из
   design/system/base.css, а грунт из skin-editorial.css. Скин не
   форкается: файл добавляет к нему, а не переписывает его.
   ============================================================ */

/* ------------------------------------------------------------
   НАВИГАЦИЯ
   Шапка sticky уже в скине. Здесь — счётчики разделов, CTA и
   раскладка на трёх зонах: имя / разделы / действие.
   ------------------------------------------------------------ */

.hdr__in { gap: var(--s-3); }

/* счётчик рядом с разделом: WORK 16, SERVICES 03. Число набрано
   тише самого пункта — это подпись к нему, а не второй пункт */
.hdr__n {
  font-variant-numeric: tabular-nums;
  color: var(--ink-55);
  margin-left: 0.35em;
}

.hdr__nav > a { white-space: nowrap; }

/* CTA заметен цветом, а не размером (§4.2: «visually distinct but
   not oversized») — кегль тот же, что у пунктов меню */
.hdr__cta {
  padding: 0.6em 1.15em;
  background: var(--accent);
  color: #FFFFFF;
  white-space: nowrap;
}

.hdr__cta:hover { background: var(--ink); color: var(--ground); }

/* ------------------------------------------------------------
   МОБИЛЬНЫЙ ХРОМ
   Имя и действие в первой строке, разделы переносятся под них.
   CTA остаётся в шапке и не занимает отдельной плавающей полосы:
   §10.2 прямо запрещает sticky CTA, съедающий высоту экрана.
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  .hdr__in {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    column-gap: var(--s-2);
    height: auto;
    padding-block: 8px;
  }

  .hdr__name { grid-column: 1; grid-row: 1; align-self: center; }
  .hdr__cta  { grid-column: 2; grid-row: 1; padding: 0.55em 0.9em; }
  .hdr__nav  { grid-column: 1 / -1; grid-row: 2; width: auto; }
}

/* ------------------------------------------------------------
   ЗОНЫ НАЖАТИЯ НА ТЕЛЕФОНЕ (8 сентября 2026)

   На 390 часть интерактива мельче 44×44. Настоящим кнопкам просто
   задана минимальная высота. Отдельно стоящим ссылкам хит-область
   расширена псевдоэлементом — бокс и раскладка при этом не меняются.

   В шапке этот приём НЕ применяется. Две строки навигации стоят
   плотно (19–23 px на строку), и расширенные зоны соседей начинают
   перекрывать друг друга: проба elementFromPoint показала, что над
   ссылкой навигации выигрывает зона имени, а под ней — контейнер
   второй строки. Уместить 44 px на строку без перестройки шапки
   нельзя, а две строки навигации и так съедают 230 px до первой
   карточки. Это решение про раскладку, а не про CSS-приём.
   ------------------------------------------------------------ */
@media (max-width: 720px) {
  .wall__p,
  .case__back,
  .page__all { position: relative; }

  .wall__p::after,
  .case__back::after,
  .page__all::after {
    content: "";
    position: absolute;
    inset: -13px -6px;
  }

  .btn,
  .wall__f,
  .s1__replay,
  .pf__replay {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}