/* ==========================================================================
   Шапка — node 743:2691, y 27–66
   Логотип-монограмма слева (x=40), меню, кнопка-пилюля справа (правый край 1880).
   Поля шапки в макете 40px, у контейнера 24px → добавляем 16px оптики.
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 24px 0 53px 0;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Фон шапки — градиент цвета страницы, сплошной сверху и прозрачный снизу.
   Появляется, только когда страница уехала ниже шапки и под неё начал
   подъезжать контент — иначе меню читалось бы поверх фотографий секций.
   Рисуем в CSS, а не картинкой: ровная вертикальная растяжка одного цвета
   файла не стоит, а заодно фон сам едет за --c-bg.
   Высота — ровно высота шапки (100%, а не число): кегль тянется по ширине
   окна, а с ним и высота шапки, — так градиент подстраивается сам.
   z-index: -1 держит его позади содержимого шапки, но внутри её слоя
   (position: sticky + z-index: 1030 создают стек-контекст), так что
   контент страницы он всё равно перекрывает. */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 120%;
  /* Прозрачность записана тем же цветом, а не ключевым словом transparent:
     оно раскрывается в rgba(0,0,0,0), и на старых движках такой переход
     давал серо-чёрную кайму. */
  background: linear-gradient(to bottom, var(--c-bg), rgb(224 224 224 / 0));
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}

.header.is-scrolled::before {
  opacity: 1;
}

.header__inner {

}

.header__logo {
  width: 4rem; /* 64px */
  flex: 0 0 auto;
}

/* Меню прижато к правой части: в макете «кто мы» начинается с x=974.
   Задаём не координаты, а зазор между пунктами — остальное считает flex.
   Единицы только rem: корневой кегль тянется по ширине окна (base.css),
   и px-отступ рядом с rem-текстом разъезжается на промежуточных ширинах. */
.header__nav {
  display: flex;
  align-items: center;
  gap: 5.4375rem;        /* 87px @1920 */
  margin-left: auto;
  margin-right: 5.4375rem;
}

/* Хвост шапки шириной ровно с фото ростера в герое: «контакты» садится на
   его левый край, кнопка — на правый. Ширина задана самому блоку, а не
   набрана отступами, поэтому выравнивание не зависит ни от ширины слова
   «контакты», ни от кегля шрифта. */
.header__tail {
  flex: 0 0 var(--media-w);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__link {
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity 0.45s ease;
}

.header__link:hover { opacity: 0.55; }

/* --- Мобильный макет (823:987) -------------------------------------------
   Лого 42×28 на x=30, бургер 42×28 правым краем на 468, оба на y=30.
   То есть шапка идёт по «внутреннему» краю макета — контейнер даёт 15,
   остальные 15 добирает --grid-inset.
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .header {
    padding: 1.875rem 0 0;   /* 30px сверху, снизу ничего: за отступ до фото
                                отвечает padding-top героя */
  }

  .header__inner { padding-inline: var(--grid-inset); }

  .header__logo { width: 2.625rem; }  /* 42px; пропорция svg 1.5 → высота 28 */

  /* Три полосы 42×2 с шагом 13: при высоте 28 и space-between они встают
     ровно на 0 / 13 / 26, как в макете (y = 30 / 43 / 56). */
  .header__burger {
    flex: 0 0 auto;
    width: 2.625rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }

  .header__burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--c-ink);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Раскрытого состояния в макете нет — берём самое скромное: полосы
     складываются в крестик, под шапкой выезжают те же три ссылки. */
  .header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(13px) rotate(45deg); }
  .header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-13px) rotate(-45deg); }

  .header__menu {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.875rem var(--grid-inset) 1.25rem;
  }

  .header__link { font-size: var(--fs-caption); }
}