/* ==========================================================================
   МЕГА-МЕНЮ — отдельный элемент, только на главной.
   Figma W5Ia6hWt76d6KgUf5g6AQ2: 2089:55759 (1920), 55423 (1440),
   55541 (768), 55640 (365 L1), 55674 (365 L2).

   Живёт ВНУТРИ sticky .header (z-50): ряд навигации и панель позиционируются
   абсолютно относительно .header. Бургер — в ряду кнопок шапки (in-flow).

   ⚠️ УРОКИ ФРИЗА (не нарушать): полноширинную панель показываем/скрываем ТОЛЬКО
   через visibility — БЕЗ opacity/transform/filter/transition (любой триггер
   compositing-слоя на панели во всю ширину вешает GPU реального Chrome на 2K/
   ultrawide). Группы — grid с явным размещением, НЕ CSS columns. Стрелки —
   фиксированного размера, не анимируем width/height.
   ========================================================================== */

.mmenu { position: static; }

/* --------------------------------------------------------------------------
   Бургер — в .header__actions-group--b (планшет/мобилка). На десктопе скрыт.
   -------------------------------------------------------------------------- */
.mmenu__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-8);
  background: var(--c-btn-gray);
  color: #fff;
  cursor: pointer;
}
.mmenu__burger-ico { display: block; }
.mmenu__burger-ico--close { display: none; }
.mmenu__burger[aria-expanded="true"] .mmenu__burger-ico--open { display: none; }
.mmenu__burger[aria-expanded="true"] .mmenu__burger-ico--close { display: block; }

/* --------------------------------------------------------------------------
   Ряд навигации (десктоп ≥1024). 2-я строка правой зоны шапки, прижат вправо.
   Позиционируется как .header__inner: центр, max 1920, гуттер 24.
   -------------------------------------------------------------------------- */
.mmenu__nav {
  position: absolute;
  /* top:56 (сразу под рядом кнопок) — ряд занимает всю нижнюю часть шапки до её
     низа (y108 = верх панели). Пункты padding-block:16 → зона наведения БЕЗ
     разрыва до панели: ведёшь мышь вниз с текста — не выходишь из зоны, меню не
     закрывается. Гуттеры уменьшены на 10 (link padding-inline 10) — текст на x529. */
  top: 56px;
  left: 0;
  right: 0;
  z-index: 3;
  max-width: 1920px;
  margin-inline: auto;
  padding: 0 14px 0 519px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start; /* ряд прижат ВЛЕВО — сразу за логотипами */
  gap: 48px;
}
.mmenu__nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-4, 4px);
  padding: 16px 10px;      /* увеличенная зона клика/наведения (текст остаётся y72–92) */
  color: #fff;
  opacity: 0.7;
}
.mmenu__nav-link:hover,
.mmenu__nav-link.is-current { opacity: 1; }
/* Точка-маркер текущей страницы отключена (по требованию): текущий пункт
   выделяется только полной непрозрачностью .is-current. */
.mmenu__nav-dot { display: none; }
.mmenu__nav-text {
  font: 400 14px/20px var(--font-text);   /* Figma 2089:55449 — Inter Tight Regular 14 */
  white-space: nowrap;
}
.mmenu__nav-chev { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Панель. База — десктоп-дропдаун во всю ширину под шапкой.
   -------------------------------------------------------------------------- */
.mmenu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--c-dark);
  color: #fff;
  border-top: 1px solid #2b3a3d;
  /* Полноширинную панель — БЕЗ opacity/transform (иначе фриз GPU на 2K/ultrawide).
     Только visibility, но с ЗАДЕРЖКОЙ на закрытие, чтобы контент успел затухнуть. */
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}
.mmenu.is-open .mmenu__panel {
  visibility: visible;
  transition-delay: 0s;
}

.mmenu__wrap {
  max-width: 1920px;
  margin-inline: auto;
  padding: 50px 40px;
  display: grid;
  grid-template-columns: 418px minmax(0, 1fr) 402px;
  gap: 60px;
  align-items: start;
  /* Плавное мягкое появление/скрытие — анимируем ВНУТРЕННИЙ контейнер (≤1920,
     центрирован), а не полноширинную панель → GPU-слой ограничен, не виснет. */
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mmenu.is-open .mmenu__wrap {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .mmenu__wrap { transition: none; }
}

/* ---- Рельс разделов (десктоп) ---- */
.mmenu__rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 43px;
  border-right: 1px solid var(--border-on-dark, #ffffff33);
}
.mmenu__buklet { display: none; }   /* буклет в рельсе — только планшет/мобилка */

.mmenu__sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 48px;
  padding: 9px 19px 9px 25px;
  border: 1px solid transparent;
  border-radius: var(--r-8);
  color: #fff;
  transition: background-color 0.18s ease;
}
.mmenu__sec-text {
  font: 400 16px/1.6 var(--font-text);
  white-space: nowrap;
}
.mmenu__sec-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--color-white-40, #ffffff66);
  /* только цвет/фон — не анимируем размеры (layout-трэшинг на ховере) */
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mmenu__sec-arrow svg { width: 20px; height: 20px; }
.mmenu__sec:hover { background: rgba(255, 255, 255, 0.06); }
.mmenu__sec.is-active {
  background: #ffffff29;
  border-color: #ffffff29;
}
.mmenu__sec.is-active .mmenu__sec-arrow {
  background: #a82f16;
  color: #fff;
}

/* ---- Контент: группы подменю ---- */
.mmenu__content { min-width: 0; }
.mmenu__back { display: none; }
.mmenu__lang { display: none; }

.mmenu__groups {
  display: grid;
  /* Колонки фиксированной ширины (как в Figma ~188–200): длинные ссылки
     ПЕРЕНОСЯТСЯ внутри колонки, а не растягивают её (иначе панель требует
     ~1468px и на 1440–1467 переполняется → overflow-x:clip ломает раскладку).
     Гуттер-колонки 69/80 под неравномерный питч Figma 1920: col1→col2=269,
     col2→col3=280 → col1 x518, col2 x787, col3 x1067. */
  grid-template-columns: 200px 69px 200px 80px 200px;
  column-gap: 0;
  row-gap: 30px;
  align-items: start;
}
/* Участие + Доступ делят колонку 1 (2 строки). Полезная (col2) и Сервисы (col3) —
   каждый в своей колонке, РАСТЯНУТ на обе строки (grid-row 1/3), чтобы их высота
   (у Сервисов 9 ссылок) НЕ раздувала общий трек строки-1 и не сталкивала «Доступ»
   вниз. align-items:start держит их прижатыми к верху. */
.mmenu__group:nth-child(1) { grid-column: 1; grid-row: 1; }
.mmenu__group:nth-child(2) { grid-column: 1; grid-row: 2; }
.mmenu__group:nth-child(3) { grid-column: 3; grid-row: 1 / 3; }
.mmenu__group:nth-child(4) { grid-column: 5; grid-row: 1 / 3; }

.mmenu__label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.mmenu__dash {
  display: inline-flex;
  flex: none;
  width: 60px;
  color: var(--c-accent);
}
.mmenu__dash svg { width: 60px; height: 12px; display: block; }
.mmenu__label-text {
  /* Заголовки групп меню — display-шрифт Cochin LT [Rus by me] (по просьбе; в
     Figma тут Inter Tight, но заголовки ведём единым display-шрифтом). */
  font: 400 12px/20px var(--font-text);
  color: #abaea7;
  white-space: nowrap;
}
/* Заголовок группы-ссылка (когда у раздела заполнено поле URL). */
a.mmenu__label-link { text-decoration: none; transition: color .15s; }
a.mmenu__label-link:hover { color: var(--c-accent); }
.mmenu__links {
  display: flex;
  flex-direction: column;
  gap: 4px;                /* было 14; паддинг ссылок добирает шаг до прежнего */
  margin-left: -8px;       /* компенсируем горизонтальный паддинг — текст на месте */
}
.mmenu__links a {
  display: block;          /* кликабельна вся строка-«кнопка», не только текст */
  padding: 5px 8px;
  border-radius: 6px;
  font: 400 12px/20px var(--font-text);
  color: #fff;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.mmenu__links a:hover {
  color: rgba(255, 255, 255, 0.6);          /* приглушённый белый 60% */
  background: rgba(255, 255, 255, 0.05);    /* подсветка площади кнопки */
}

/* --------------------------------------------------------------------------
   .is-soon — раздел/страница ещё не готовы (нет реальной страницы): серым и
   некликабельно (pointer-events:none снимает и ховер, и клик, и drill/навигацию).
   Активными/белыми остаются только пункты с готовой страницей. Превью-состояние
   для fok-layout; в Bitrix у Афифе видимость/ссылки идут из инфоблока.
   -------------------------------------------------------------------------- */
.mmenu__nav-link.is-soon,
.mmenu__sec.is-soon,
.mmenu__links a.is-soon {
  pointer-events: none;
  cursor: default;
}
.mmenu__nav-link.is-soon { opacity: 0.3; }
.mmenu__sec.is-soon { color: rgba(255, 255, 255, 0.32); }
.mmenu__sec.is-soon:hover { background: transparent; }
.mmenu__sec.is-soon .mmenu__sec-arrow { color: rgba(255, 255, 255, 0.16); }
.mmenu__links a.is-soon,
.mmenu__links a.is-soon:hover { color: rgba(255, 255, 255, 0.3); background: transparent; }

/* ---- Промо «Нужна помощь?» (десктоп) ---- */
.mmenu__promo { min-width: 0; }
.mmenu__promo-media {
  aspect-ratio: 402 / 220;
  border-radius: var(--r-16);
  overflow: hidden;
  margin-bottom: 24px;
}
.mmenu__promo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mmenu__promo-title {
  margin: 0 0 8px;
  /* ЕДИНСТВЕННЫЙ Cochin в меню — промо-заголовок (Figma 2089:55462, H Font). */
  font: 500 24px/32px var(--font-display);
  text-transform: uppercase;
  color: #fff;
}
.mmenu__promo-text {
  margin: 0 0 24px;
  /* Figma 2089:55463 — Inter Tight Medium 14/20, цвет #bfb099 (Malta) */
  font: 500 14px/20px var(--font-text);
  color: #bfb099;
}
.mmenu__promo-btns { display: flex; gap: 8px; }
.mmenu__pbtn {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  height: 56px;
  /* Figma 2089:55768: фон white/20%, бордер 1px белый, radius 8 */
  border: 1px solid var(--color-white-solid, #fff);
  border-radius: var(--r-8);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.mmenu__pbtn:hover { background: var(--c-accent); border-color: var(--c-accent); }
/* Плашка-тултип с контактом (телефон/почта), выезжает под кнопкой на 8px
   (Figma 2080:29534): белая, radius 8, padding 10, текст 14/20 тёмный.
   Маленький элемент — opacity/visibility безопасны (не полноширинная панель). */
.mmenu__pbtn-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 4;
  padding: 10px;
  border-radius: var(--r-8);
  background: #fff;
  color: var(--c-btn-gray);   /* #415358 — текст плашки (Figma 2080:29535) */
  font: 400 14px/20px var(--font-text);
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(9, 30, 37, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
.mmenu__pbtn:hover .mmenu__pbtn-tip { opacity: 1; visibility: visible; }

/* ==========================================================================
   Десктоп ≥1024 — раскладка шапки под мега-меню
   ========================================================================== */
@media (min-width: 1440px) {
  /* верхний ряд кнопок прижат к верху шапки, освобождая 2-ю строку для навигации */
  .has-mega .header__bar {
    align-self: flex-start;
    margin-top: 16px;
  }
}

/* ==========================================================================
   ≤1919 — десктоп 1440: группы 2×2, промо уже
   ========================================================================== */
@media (max-width: 1919px) {
  /* Явные гуттер-колонки 60/39 (Figma 1440): рельс 418 | 60 | контент (зона 468
     на 1440) | 39 | промо 375. Контент с x518, промо с x1025 — по макету, без
     переполнения (сумма ровно 1440 при vw=1440). */
  .mmenu__wrap {
    grid-template-columns: 418px 60px minmax(0, 1fr) 39px 375px;
    gap: 0;
  }
  .mmenu__rail { grid-column: 1; }
  .mmenu__content { grid-column: 3; }
  .mmenu__promo { grid-column: 5; }
  /* 1440: ряд навигации распределён по всей правой зоне [x529..правый край] —
     первый пункт прижат к x529 (как в Figma), не заходит под логотипы. */
  .mmenu__nav { justify-content: space-between; }
  /* 2 колонки: col1=[Участие,Доступ], col2=[Полезная,Сервисы]. Питч 268 ≈ Figma 269. */
  .mmenu__groups { grid-template-columns: repeat(2, 200px); column-gap: 68px; }
  .mmenu__group:nth-child(3) { grid-column: 2; grid-row: 1; }
  .mmenu__group:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   ≤1023 — планшет: бургер-оверлей, 2 колонки [рельс | группы], без промо.
   ========================================================================== */
@media (max-width: 1439.98px) {
  .mmenu__nav { display: none; }
  .mmenu__burger { display: inline-flex; }

  .mmenu__panel {
    /* Мобилка/планшет: скрываем панель через display:none (а НЕ visibility).
       На реальных iOS/Android fixed-оверлей, спрятанный через visibility внутри
       sticky-шапки со скролл-локом, может остаться «в DOM, но не отрисован» —
       браузер реагирует на клик, но пользователь меню не видит. display:none/block
       железно: закрыто = элемента нет, открыто = полноценный reflow. */
    display: none;
    position: fixed;
    top: var(--mmt, 96px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 0;
    /* без анимации opacity/transform — она ломает рендер fixed-оверлея на мобильных */
    transition: none;
  }
  .mmenu.is-open .mmenu__panel { display: block; }

  .mmenu__wrap {
    max-width: none;
    grid-template-columns: minmax(300px, 331px) minmax(0, 1fr);
    gap: 60px;
    padding: 50px 40px;
    align-items: start;
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* сброс десктопных гуттер-колонок: контент — во 2-ю колонку планшетной сетки */
  .mmenu__content { grid-column: 2; }

  .mmenu__promo { display: none; }

  /* Рельс: буклет + разделы. Вертикальный разделитель справа (Figma 2089:55635,
     x≈370) + padding-right 31 → ширина айтемов 300 (Figma 2089:55625/55627). */
  .mmenu__rail {
    padding-right: 31px;
    border-right: 1px solid var(--border-on-dark, #ffffff33);
    gap: 4px;
  }
  .mmenu__buklet {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    margin-bottom: 10px;
    border-radius: var(--r-8);
    background: var(--c-accent);
    color: #fff;
    font: 500 16px/1 var(--font-text);
  }
  .mmenu__buklet svg { flex: none; }

  /* Группы в одну колонку, порядок по DOM (Участие → Доступ → Полезная → Сервисы) */
  .mmenu__groups {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
  .mmenu__group:nth-child(1), .mmenu__group:nth-child(2),
  .mmenu__group:nth-child(3), .mmenu__group:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }

  /* Ru/En внизу рельса (Figma 2089:55637). На планшете Figma убирает язык из
     шапки и показывает его в панели — прячем дублирующий переключатель шапки. */
  .has-mega .lang-toggle { display: none; }
  .mmenu__lang {
    display: inline-flex;
    align-self: flex-start;   /* не растягиваться на всю ширину рельса — хаг 86px (Figma) */
    margin-top: 40px;
    margin-left: 25px;        /* под текст разделов (Figma 2089:55637 x65 = рельс 40 + 25) */
    padding: 4px;
    gap: 2px;
    border-radius: var(--r-8);
    background: rgba(255, 255, 255, 0.06);
  }
  .mmenu__lang-btn {
    min-width: 38px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--r-4);
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font: 500 14px/1 var(--font-text);
    cursor: pointer;
  }
  .mmenu__lang-btn.is-active { background: #ffffff29; color: #fff; }

  html.is-menu-open, body.is-menu-open { overflow: hidden; }
}

/* ==========================================================================
   1024–1439 — планшет-ландшафт / малый ноутбук: в правом блоке места хватает
   на 2 колонки, поэтому возвращаем раскладку 2×2 (как на десктопе ≤1919):
   col1 = [Участие, Полезная], col2 = [Доступ, Сервисы]. Ниже 1024 — 1 колонка.
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .mmenu__groups {
    grid-template-columns: repeat(2, minmax(0, 200px));
    column-gap: 68px;
    row-gap: 30px;
  }
  .mmenu__group:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mmenu__group:nth-child(2) { grid-column: 1; grid-row: 2; }
  .mmenu__group:nth-child(3) { grid-column: 2; grid-row: 1; }
  .mmenu__group:nth-child(4) { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   ≤767 — мобилка: drill-down. L1 = рельс (разделы), L2 = группы + «назад».
   ========================================================================== */
@media (max-width: 767px) {
  .mmenu__wrap {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 16px 40px;
  }
  /* Мобилка: рельс — плоский список во всю ширину, БЕЗ планшетного разделителя/инсета. */
  .mmenu__rail { gap: 4px; border-right: 0; padding-right: 0; }
  .mmenu__buklet { margin-bottom: 12px; }

  /* На мобилке язык — в шапке (Figma 2089:55655): возвращаем шапочный
     переключатель и прячем панельный (в отличие от планшета). */
  .has-mega .lang-toggle { display: inline-flex; }
  .mmenu__lang { display: none; }

  /* Разделы — плоские строки (без капсулы), стрелка вправо. Высота 48 (Figma 2089:55666). */
  .mmenu__sec {
    height: 48px;
    padding: 8px 4px;
    border: 0;
    border-radius: 0;
  }
  .mmenu__sec.is-active { background: transparent; }
  .mmenu__sec.is-active .mmenu__sec-arrow { background: transparent; color: var(--color-white-40, #ffffff66); }
  .mmenu__sec:hover { background: transparent; }

  /* По умолчанию — уровень 1 (рельс). Контент скрыт до drill-in.
     grid-column:1 — сброс планшетной 2-й колонки в одноколоночной мобильной сетке. */
  .mmenu__content { display: none; grid-column: 1; }
  .mmenu.is-drill .mmenu__rail { display: none; }
  .mmenu.is-drill .mmenu__content { display: block; }

  /* «Назад» — верхняя строка-капсула уровня 2 */
  .mmenu__back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    margin-bottom: 24px;
    /* Figma 2089:55698 — иконка отбита на 29px от левого края капсулы */
    padding: 0 16px 0 29px;
    border-radius: var(--r-8);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
  }
  .mmenu__back svg { flex: none; }
  /* Figma 2089:55700 — Inter Tight Medium 14/20 */
  .mmenu__back-text { font: 500 14px/20px var(--font-text); }

  /* Группы уровня 2 отбиты на 25px (Figma 2089:55701 x41 vs капсула x16) */
  .mmenu__groups { row-gap: 32px; padding-left: 25px; }
}