/* AI Cortex Academy — ПЕРВЫЙ ЭКРАН ВЛЕЗАЕТ. Волна 3.
 *
 * Замеры до правки (headless Chrome, живой сайт):
 *   тёмная главная  1366×768 — hero 768 ✅
 *                    980×534 — hero 656, не влезает на 122px, кнопка действия за экраном
 *                    390×844 — hero 1404, не влезает на 560px
 *   лендинг ai-basics 980×534 — не влезает на 179px
 *   лендинг chatgpt-pro 390×844 — не влезает на 480px
 *
 * 980×534 — это рабочий размер экрана Олега при его зуме 150%. То есть на его
 * собственном мониторе кнопка «Выбрать курс» была НИЖЕ линии сгиба.
 *
 * Правило здесь одно: чем ниже экран, тем плотнее первый экран. Ничего не
 * выбрасываем — ужимаем отступы, кегль и сферу. На телефоне дополнительно
 * поднимаем кнопку действия ВЫШЕ картинки: пусть лучше человек увидит кнопку,
 * чем красивую сферу.
 */

/* ---------- НЕВЫСОКИЙ ДЕСКТОП: ноутбук с зумом, 980×534 и подобные ---------- */
@media (min-width: 901px) and (max-height: 780px) {
  .hero { padding: 58px 0 20px !important; min-height: 100vh !important; }
  .hero-grid { gap: 26px !important; }
  .hero h1 { font-size: clamp(21px, 2.5vw, 31px) !important; margin-bottom: 8px !important; }
  .hero-sub { font-size: 14px !important; margin-bottom: 10px !important; }
  .hero-copy .promises { gap: 6px !important; margin-bottom: 10px !important; }
  .hero-copy .promise { padding: 7px 11px !important; font-size: 12.5px !important; }
  .hero-vis { max-width: 300px !important; }
  .hero-grid > .hero-cta { margin-top: -14px !important; }
  .float-tag { font-size: 11px !important; padding: 5px 10px !important; }
  /* светлая версия */
  .hero .hero-badge, .hero .hchip { margin-bottom: 8px !important; }
}

@media (min-width: 901px) and (max-height: 640px) {
  .hero { padding: 44px 0 12px !important; }
  .hero-grid { gap: 18px !important; }
  .hero h1 { font-size: clamp(19px, 2.1vw, 26px) !important; }
  .hero-sub { font-size: 13px !important; margin-bottom: 8px !important; }
  .hero-vis { max-width: 224px !important; }
  .hero-copy .promise { padding: 6px 9px !important; font-size: 12px !important; }
  /* декоративные чипы на сфере при такой высоте только мешают и вылезают за край */
  .float-tag { display: none !important; }
}

/* ---------- ТЕЛЕФОН: кнопка действия должна быть видна БЕЗ скролла ---------- */
@media (max-width: 900px) {
  .hero { padding: 76px 0 24px !important; }
  .hero-grid { gap: 16px !important; }

  /* было: сфера шла ПЕРВОЙ (order:-1), из-за неё кнопка уезжала за экран.
     Теперь порядок такой: заголовок → подзаголовок → КНОПКА → сфера. */
  .hero-copy { order: 1 !important; }
  .hero-grid > .hero-cta { order: 2 !important; margin-top: 6px !important; }
  .hero-right { order: 3 !important; gap: 10px !important; }

  .hero-sub { margin-bottom: 12px !important; }
  .hero-copy .promises { gap: 6px !important; margin-bottom: 12px !important; }
  .hero-vis { max-width: 240px !important; }
  .float-tag { font-size: 11px !important; padding: 5px 9px !important; }

  /* шапка: кнопка налезала на слово ACADEMY и выходила на 6px за правый край */
  header .wrap, .hdr .wrap { gap: 10px !important; }
  .brand { font-size: 13px !important; min-width: 0 !important; overflow: hidden !important;
           text-overflow: ellipsis !important; white-space: nowrap !important; }
  .nav-cta { padding: 9px 14px !important; font-size: 13px !important;
             white-space: nowrap !important; flex: 0 0 auto !important; }
}

@media (max-width: 560px) {
  .hero { padding: 68px 0 18px !important; }
  .hero h1 { font-size: 22px !important; margin-bottom: 8px !important; }
  .hero-sub { font-size: 14px !important; margin-bottom: 10px !important; }
  .hero-vis { max-width: 200px !important; }
  .hero-copy .promises { margin-bottom: 10px !important; }
  .hero-copy .promise { padding: 7px 10px !important; font-size: 12px !important; }
  .brand { font-size: 12px !important; }
  .brand .mk { width: 26px !important; height: 26px !important; }
  .nav-cta { padding: 8px 12px !important; font-size: 12.5px !important; }
}

/* ---------- НИЧЕГО НЕ ВЫЛЕЗАЕТ ЗА ПРАВЫЙ КРАЙ ---------- */
/* «Начать» выходила на 6px, чип «Практика/Claude» — на 29px при 980×534 */
html, body { overflow-x: hidden; }
@media (max-width: 900px) {
  .float-tag { max-width: calc(100% - 12px) !important; }
}
@media (min-width: 901px) and (max-height: 780px) {
  .float-tag.ft2 { right: 4px !important; }
}

/* ---------- СВЕТЛАЯ ВЕРСИЯ: у неё свои имена классов ---------- */
/* .hero-visual вместо .hero-right, .hero-promises вместо .promises,
   .neuro3d-wrap вместо .hero-vis, .hero-cta лежит ВНУТРИ левой колонки. */

@media (min-width: 901px) and (max-height: 780px) {
  .hero-promises { gap: 5px !important; margin-bottom: 8px !important; }
  .hero-promises .hp-s { display: none !important; }   /* подпись второй строкой — самая жирная по высоте */
  .hero-chips { margin-bottom: 9px !important; gap: 6px !important; }
  .hero-chips .hchip { padding: 6px 11px !important; font-size: 12px !important; }
  .neuro3d-wrap, #brain3d { max-height: 300px !important; }
  .hero-visual .anthem-btn { margin-bottom: 4px !important; padding: 6px 11px !important; font-size: 12px !important; }
  .attention { padding: 14px 0 !important; }
}

@media (min-width: 901px) and (max-height: 640px) {
  .hero-promises { display: none !important; }
  .neuro3d-wrap, #brain3d { max-height: 210px !important; }
  .hero-chips .hchip:nth-child(n+3) { display: none !important; }
}

@media (max-width: 900px) {
  /* было: сфера/мозг и кнопка гимна выталкивали кнопки действия за экран */
  .hero-grid > div:first-child { order: 1 !important; }
  .hero-visual { order: 2 !important; }
  .hero-promises { gap: 6px !important; margin-bottom: 10px !important; }
  .hero-promises .hp-s { display: none !important; }
  .hero-chips { margin-bottom: 10px !important; }
  .hero-cta { justify-content: flex-start !important; gap: 10px !important; flex-wrap: wrap !important; }
  .neuro3d-wrap, #brain3d { max-height: 230px !important; }
  .hero-visual .anthem-btn { align-self: center !important; }
}

@media (max-width: 560px) {
  .hero-promises { display: none !important; }
  .hero-chips .hchip:nth-child(n+3) { display: none !important; }
  .neuro3d-wrap, #brain3d { max-height: 180px !important; }
  .hero-cta .btn { flex: 1 1 auto !important; text-align: center !important; }
}

/* ---------- ВИДЖЕТЫ НЕ ЗАКРЫВАЮТ КНОПКУ ПОКУПКИ ---------- */
/* Адверсарий поймал на 980×534 (рабочий вьюпорт Олега при зуме 150%):
   document.elementFromPoint в центре кнопки «Выбрать курс →» возвращал
   BUTTON.kv-btn — пилюлю консультанта Кости, а не саму кнопку. На скриншоте
   «💬 Чат с консультантом» лежит поверх кнопки, из-под неё торчат обрезанные
   буквы. Виджеты нужны, но стоять на пути к покупке они не имеют права.
   Реальные классы виджета: .kv-btn (чат, left 20 / bottom 86),
   .kvv-btn (голос, left 20 / bottom 20), .kv-wrap и .kvv-card — раскрытые окна,
   z-index 2147483000 — перебить его слоем нельзя, поэтому убираем их с дороги. */

@media (max-height: 700px) {
  /* пилюли сжимаются до иконки и уезжают в самый угол */
  .kv-btn  { left: 10px !important; bottom: 62px !important;
             padding: 8px 10px !important; font-size: 0 !important; gap: 0 !important; }
  .kvv-btn { left: 10px !important; bottom: 10px !important;
             padding: 8px 10px !important; font-size: 0 !important; gap: 0 !important; }
  .kv-btn > *, .kvv-btn > * { font-size: 15px !important; }
  .kv-btn .kv-lbl-full, .kv-btn .kv-lbl-short,
  .kvv-btn .kv-lbl-full, .kvv-btn .kv-lbl-short { display: none !important; }
  .kv-wrap, .kvv-card { left: 10px !important; bottom: 10px !important; }
  /* маскот Макс справа: реплика на низком экране накрывает кнопки */
  .guide { bottom: 8px !important; right: 8px !important;
           transform: scale(.8) !important; transform-origin: bottom right !important; }
  .guide .guide-b { display: none !important; }
  .call-fab { bottom: 10px !important; right: 10px !important; transform: scale(.85) !important; }
}

@media (max-width: 900px) {
  .kv-btn  { left: 10px !important; bottom: 58px !important; font-size: 0 !important; padding: 9px 11px !important; }
  .kvv-btn { left: 10px !important; bottom: 10px !important; font-size: 0 !important; padding: 9px 11px !important; }
  .kv-btn > *, .kvv-btn > * { font-size: 16px !important; }
  .kv-btn .kv-lbl-full, .kv-btn .kv-lbl-short,
  .kvv-btn .kv-lbl-full, .kvv-btn .kv-lbl-short { display: none !important; }
  .guide { bottom: 10px !important; right: 10px !important; }
  .guide .guide-b { display: none !important; }
}