/* CILT programme pages: existing mobile navigation extended through tablet sizes.
   Based on the navigation section of css/mobile.css; unrelated page rules omitted. */
/* ═══════════════════════════════════════════════════════════
   CILT Central Asia — мобильный слой (премиальная версия телефона)
   Подключается ПОСЛЕДНИМ <link> в <head> каждой публичной страницы,
   поэтому при равной специфичности перекрывает инлайн-стили страниц.
   ВСЁ содержимое — внутри @media (max-width: …): десктоп (≥768px)
   этим файлом не затрагивается.
   Палитра: #361163 purple · #C0A582 gold · #505050 steel · #ebebeb pale.
═══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   1. ШАПКА И МЕНЮ
══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  :root { --header-h: 74px; }

  /* Верхняя полоса на телефоне не нужна: «Вступить», MOODLE и поиск
     переехали в низ меню (js/mobile-menu.js), «Главная»/«О нас» — в список. */
  #top-bar { display: none !important; }

  .burger-btn { width: 44px; height: 44px; }

  /* Прокрутка страницы под открытым меню блокируется, а шапка не уезжает
     (иначе fixed-меню, лежащее внутри шапки, уехало бы вместе с ней). */
  html.mm-lock, html.mm-lock body { overflow: hidden; }
  html.mm-lock #site-header { transform: none !important; }
  /* Чат-виджет не должен лежать поверх закреплённого нижнего блока меню */
  html.mm-lock #cilt-chat-widget { display: none !important; }

  /* Панель меню: на всю высоту под шапкой, внутри — прокручиваемый список
     и закреплённый нижний блок. */
  #site-header #mobile-menu {
    position: fixed;
    top: var(--mm-top, 74px);
    left: 0; right: 0; bottom: 0;
    max-height: none;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #ffffff;
    border-top: 1px solid #ebebeb;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
    z-index: 60;
  }
  #site-header #mobile-menu.open {
    max-height: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s;
  }

  #mobile-menu .mm-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  #mobile-menu .mm-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 0 12px;
  }

  /* Строки верхнего уровня и заголовки групп */
  #mobile-menu .mm-row,
  #mobile-menu .mm-group-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 0 20px;
    margin: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: #505050;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-menu .mm-row.is-current { color: #361163; box-shadow: inset 3px 0 0 #C0A582; }
  #mobile-menu .mm-group-btn svg {
    flex: 0 0 auto;
    color: #C0A582;
    transition: transform 0.25s ease;
  }
  #mobile-menu .mm-group.is-open > .mm-group-btn { color: #361163; }
  #mobile-menu .mm-group.is-open > .mm-group-btn svg { transform: rotate(180deg); }

  /* Раскрытие без измерения высоты: grid-template-rows 0fr → 1fr */
  #mobile-menu .mm-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
    background: #ffffff;
  }
  #mobile-menu .mm-group.is-open > .mm-panel { grid-template-rows: 1fr; }
  #mobile-menu .mm-panel-inner {
    overflow: hidden;
    min-height: 0;
    margin: 0 0 0 20px;
    border-left: 2px solid #C0A582;
  }
  #mobile-menu .mm-group.is-open > .mm-panel .mm-panel-inner { padding: 4px 0 8px; }
  #mobile-menu .mm-sub {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 20px 0 18px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    color: #505050;
    border: 0;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-menu .mm-sub.is-current { color: #361163; font-weight: 700; }

  /* Закреплённый нижний блок */
  #mobile-menu .mm-foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #ebebeb;
    box-shadow: 0 -6px 16px rgba(54, 17, 99, 0.06);
  }
  #mobile-menu .mm-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 0 20px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-menu .mm-cta--gold { background: #C0A582; color: #130526; border: 1px solid #C0A582; }
  #mobile-menu .mm-cta--outline { background: transparent; color: #361163; border: 1.5px solid #361163; }
  #mobile-menu .mm-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #505050;
    cursor: pointer;
  }
  #mobile-menu .mm-search svg { color: #C0A582; }
}

@media (max-width: 479px) {
  :root { --header-h: 72px; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 1199px) {
  #site-header #mobile-menu,
  #mobile-menu .mm-panel,
  #mobile-menu .mm-group-btn svg { transition: none; }
}


@media (max-width: 1199px) {
  .education-landing .nav-links { display:none; }
  .education-landing .burger-btn { display:flex; }
}