/* =====================================================================
   BUCKLER · мобильный хедер — исправление наезда логотипа на текст
   (2026-07-28, отступ подстроен 2026-07-28)

   Причина. В <meta viewport> задан viewport-fit=cover, и фиксированный
   хедер (position:fixed; top:0) на устройствах с «чёлкой»/строкой статуса
   уходил под безопасную зону: логотип поднимался под строку статуса, а
   первый экран (надзаголовок «Вся экспертиза…» и заголовок) начинался
   слишком высоко и оказывался под хедером.

   Решение. Учитываем безопасную зону сверху env(safe-area-inset-top):
     1) хедер получает верхний внутренний отступ на величину безопасной
        зоны, поэтому его содержимое опускается ниже строки статуса;
     2) первый экран получает отступ сверху = (высота хедера + небольшой
        зазор) + безопасная зона. Значение подобрано так, чтобы зазор
        между хедером и надзаголовком был ~21px на всех мобильных ширинах
        и высотах и не зависел от размера «чёлки» — без наезда и без
        лишней пустоты.
   Действует только на мобильной ширине (<=768px). Десктоп и планшет не
   затрагиваются. Подключается последним, исходные правила не переписываем.
   ===================================================================== */

@media (max-width: 768px){
  /* 1. Хедер опускается ниже строки статуса/«чёлки». */
  header .header-shell{
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(var(--hero-pad-x, 16px) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--hero-pad-x, 16px) + env(safe-area-inset-right, 0px));
  }
  header.is-compact .header-shell{
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  /* 2. Первый экран начинается сразу под хедером с ровным зазором ~21px.
        Пол 84px гарантирует, что контент очистит хедер (≈65px) даже на
        невысоких экранах, где vh-значение мало; потолок 96px не даёт
        отступу разрастаться на высоких экранах. Плюс безопасная зона. */
  .hero{
    padding-top: calc(clamp(84px, 9vh, 96px) + env(safe-area-inset-top, 0px));
  }
}

/* Низкие мобильные окна: тот же ровный зазор, компактнее. */
@media (max-width: 768px) and (max-height: 720px){
  .hero{
    padding-top: calc(clamp(82px, 8.5vh, 92px) + env(safe-area-inset-top, 0px));
  }
}