/* ==========================================================================
   Header — Figma 3:3932 (425×48), 3:3618 (576×48), 3:3683 (768×48),
            3:3736 (1024×48), 3:3801 (1280×48), 3:3891 (4362×48)
   Лежит поверх hero и прибита к верху окна: в макете шапка перекрывает верх
   первого экрана, поэтому hero отсчитывает свой padding-top от нуля страницы,
   а при прокрутке шапка остаётся на месте.

   До 1024 в шапке только лого, переключатель языка и Menu. На 1024 меню раскрывается
   в строку (см. медиазапрос внизу): появляются «ex. grafdesigna», cases,
   services, About, а кнопка Menu уходит. На 1280 та же раскладка тянется
   резиной — своего медиазапроса не требует. На 1920 она упирается в
   --container-max = 1872 и дальше только центрируется: подложка шапки во всю
   ширину, содержимое посередине — ровно как в макете 3:3891 (контейнер 1872
   на x = 1245 в кадре 4362).
   ========================================================================== */

/* Прибита к верху окна: при прокрутке шапка остаётся на месте, содержимое
   уезжает под неё. Из потока она выключена так же, как была на absolute, —
   в макете шапка перекрывает верх первого экрана, и hero по-прежнему
   отсчитывает свой padding-top от нуля страницы, ничего не сдвигается.
   Заодно это то, что нужно открытому меню: панель на 1024+ висит внутри
   шапки и на absolute уехала бы вверх при первом же скролле. */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10;
  background-color: var(--color-bg-base);
}

/* Открытое меню. До 1024 шапка разворачивается в оверлей во весь экран:
   строка с лого, языком и Close закреплена сверху, само меню занимает остаток
   и скроллится внутри (в макете его содержимое — 1080 при кадре 1058).
   100dvh, а не 100vh: в мобильных браузерах адресная строка съедает разницу.
   На 1024+ высота остаётся своей — см. медиазапрос внизу файла. */
.header--open {
  block-size: 100dvh;
}

.header--open .header__container {
  flex: 0 0 auto;
}

/* В открытом состоянии правая колонка расходится по краям: переключатель
   языка встаёт к левому краю своей половины, Close — к правому (в макете 425
   это x = 200.5 и 340 при колонке 200.5–377). */
.header--open .header__nav {
  justify-content: space-between;
  gap: var(--spacing-0);
}

.header__container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-xl);
  width: 100%;
  max-width: var(--container-max);
  height: var(--header-height);
  padding-block-start: var(--spacing-xs);
}

.header__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* Лого красится темой, поэтому это не <img>, а маска.
   В Figma светлый и тёмный логотип — один и тот же контур с разной заливкой
   (#222222 против #e6e6e6, то же `color/text/primary`, что и у текста шапки).
   <img> из CSS не покрасить, а второй файл пришлось бы держать в синхронизации
   с первым, поэтому контур берётся маской, а цвет — currentColor: лого меняет
   тему вместе с соседними пунктами и без единой лишней строки в теме.
   Путь считается от этого файла, а не от страницы, — поэтому один и тот же
   для главной, каталога и страницы кейса, лежащих на разной глубине. */
.header__logo {
  display: block;
  width: 76px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("../../assets/img/logo.svg") no-repeat center / 76px 24px;
  mask: url("../../assets/img/logo.svg") no-repeat center / 76px 24px;
}

.header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-xl);
}

/* Подпись «ex. grafdesigna» — не ссылка, но в макете это такой же бокс,
   поэтому типографика общая. */
.header__link,
.header__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block-end: var(--spacing-sm);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-text-sm);
  letter-spacing: var(--letter-spacing-uppercase);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* Зона нажатия у двух кнопок шапки — во всю её высоту.

   Бокс подписи в макете — «строка + 4», то есть 21px (на 1024+ 24). Пальцем
   в такую полоску не попасть: до 1024 это единственные две кнопки на экране,
   и промах по ним — промах по всей навигации. Минимум, с которого цель
   считается достижимой, — 24 (WCAG 2.5.8), у Apple и Google в руководствах
   44 и 48.

   Растим не бокс, а невидимый слой поверх: бокс держит подчёркивание и
   базовую линию, снятые с макета, и трогать его нельзя — подпись уехала бы
   с общей строки. Слой отцентрован по кнопке, высотой ровно в шапку, и на 8
   шире с каждой стороны. Между кнопками 24 зазора, так что слои не
   пересекаются и промаха «попал не в ту» не создают.

   Ничего под собой он не перекрывает: в шапке над и под кнопками пусто, а
   панель языка начинается ниже её нижней линии. */
.header__link--menu,
.lang__trigger {
  position: relative;
}

.header__link--menu::before,
.lang__trigger::before {
  content: "";
  position: absolute;
  inset-inline: calc(-1 * var(--spacing-md));
  inset-block-start: 50%;
  block-size: var(--header-height);
  transform: translateY(-50%);
}

/* Кнопка Menu — она же Close: в макете открытого меню на её месте стоит
   «Close», поэтому в разметке лежат обе подписи, а меняется видимая. */
.header__link-label--open {
  display: none;
}

.header--open .header__link-label--closed {
  display: none;
}

.header--open .header__link-label--open {
  display: inline;
}

/* Подчёркивание — тенью, а не рамкой: в Figma обводка идёт внутрь фрейма и
   его высоту не меняет, а border добавил бы 1px. Бокс от этого перестал бы
   быть «строка + 4», и текст, отцентрованный по высоте шапки, уехал бы вверх
   на пол-пикселя — заодно разошлись бы базовые линии подчёркнутых и обычных
   пунктов меню. */
.header__link--underline {
  box-shadow: inset 0 -1px 0 var(--color-border-primary);
}

/* Переключатель языка — кнопка с текущим языком и выпадающая панель со
   всеми тремя (blocks/lang.css). В шапке он занимает место одного пункта: в
   макете там подпись «Ru», и по ширине кнопка с ней совпадает.

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

   Панель выпадает из шапки наружу, поэтому .header__container ничего не
   обрезает: раньше на нём стоял overflow: clip. Обрезать там нечего —
   колонки заданы через minmax(0, 1fr) и раздуться не могут, а пункты
   набраны nowrap и в свою половину помещаются с запасом даже на 320 — на
   всех трёх языках и во всех трёх движках (tools/verify-browsers.mjs). */
.header__lang {
  justify-self: end;
  /* Растянут на всю высоту шапки, хотя кнопка внутри по-прежнему по центру:
     от высоты этого блока отсчитывается панель, и только растянутый он даёт
     ей опуститься ниже линии шапки, а не выпасть из-под кнопки внахлёст. */
  align-self: stretch;
}

/* Пункты меню, которых нет до 1024 */
.header__tagline,
.header__link--cases,
.header__link--services,
.header__link--about {
  display: none;
}

/* 1024+ · Figma 3:3736 (1024), 3:3801 (1280) — контейнер становится сеткой
   на 12 колонок с зазором 4. Колонка при опорной ширине 1024: (976 − 11·4) / 12
   = 77.67; при 1280: (1232 − 11·4) / 12 = 99 — и позиции пунктов в макете 1280
   ровно кратны шагу 103 (0 / 309 / 618 / 824 / 1030 / 1133), то есть колонки
   те же самые.
   Пункты стоят по колонкам макета: лого 1–2, «ex. grafdesigna» 4, cases 7–8,
   services 9–10, About 11, Ru 12. Текст прижат к левому краю своей колонки,
   Ru — к правому краю шапки.

   Меню — вложенная сетка на колонках 7–12, а не display: contents: шесть
   равных долей внутри повторяют шесть внешних колонок один в один (тот же
   зазор, те же 1fr), поэтому геометрия совпадает без subgrid. Нумерация
   grid-column у пунктов меню при этом своя, от края блока. */
@media (min-width: 1024px) {
  .header__container {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--spacing-sm);
  }

  .header__brand {
    grid-column: 1 / span 2;
  }

  .header__nav {
    display: grid;
    grid-column: 7 / -1;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--spacing-sm);
  }

  .header__tagline,
  .header__link--cases,
  .header__link--services,
  .header__link--about {
    display: flex;
    justify-self: start;
  }

  /* подпись живёт во внешней сетке — колонка шапки та же, что и номер */
  .header__tagline { grid-column: 4; }

  /* пункты меню — во вложенной, поэтому номер свой (в скобках — колонка шапки) */
  .header__link--cases    { grid-column: 1 / span 2; } /* 7–8  */
  .header__link--services { grid-column: 3 / span 2; } /* 9–10 */
  .header__link--about    { grid-column: 5; }          /* 11   */

  .header__lang {
    grid-column: 6;                                    /* 12   */
  }

  /* Пункты меню разъехались по строке — кнопка Menu в макете исчезает */
  .header__link--menu {
    display: none;
  }

  /* На 1024+ меню — не оверлей, а панель под шапкой: экран она не занимает,
     страница под ней прокручивается, а сама панель едет вместе с прибитой
     шапкой и остаётся на виду. Высота здесь своя, от содержимого, — оверлей
     во весь экран (100dvh) нужен только до 1024. */
  .header--open {
    block-size: auto;
  }

  .header--open .header__nav {
    justify-content: flex-end;
    gap: var(--spacing-sm);
  }
}