/* Первый экран лендингов курсов — компактная раскладка для низких и узких экранов.
 *
 * Замер показал: на телефоне 390×844 hero занимал 910–1007px, то есть не влезал
 * у всех 70 курсов, а у двадцати за экран уходила и кнопка покупки. При зуме
 * 150% (вьюпорт 980×534) не влезали 16 курсов.
 *
 * Все лендинги собраны на одних и тех же классах, поэтому правим одним файлом.
 * Десктоп 1440×900 и 1366×768 не трогаем — там всё и так помещается.
 */

/* --- низкие экраны: зум 150%, короткие окна на ноутбуке --- */
@media (max-height: 640px) and (min-width: 901px) {
  body .hero { padding: 30px 0 10px !important; }
  body .chip { margin-bottom: 12px !important; padding: 5px 14px !important; font-size: 12.5px !important; }
  body .hero h1 { margin-bottom: 12px !important; }
  body .hero-sub { margin-bottom: 14px !important; }
  body .promises { gap: 7px !important; margin-bottom: 14px !important; }
  body .promise { padding: 9px 13px !important; }
  body .promise p { margin-top: 1px !important; }
  body .badges { margin-bottom: 12px !important; gap: 6px !important; }
  body .bdg { padding: 6px 12px !important; font-size: 11.5px !important; }
  body .hero-vis { max-width: 330px !important; }
  body .hero-right { gap: 10px !important; }
  body .float-tag { padding: 5px 11px !important; font-size: 11px !important; }
}

/* --- совсем низкие: 1280×600 и подобные --- */
@media (max-height: 560px) and (min-width: 901px) {
  body .hero { padding: 24px 0 8px !important; }
  body .badges { display: none !important; }
  body .hero-vis { max-width: 280px !important; }
}

/* --- планшет в портрете и узкий десктоп --- */
@media (max-width: 900px) {
  body .hero { padding: 74px 0 16px !important; }
  body .promises { gap: 8px !important; margin-bottom: 14px !important; }
  body .promise { padding: 10px 13px !important; }
  body .badges { margin-bottom: 14px !important; }
  body .hero-vis { max-width: 300px !important; }
}

/* --- телефон: здесь живёт трафик из Instagram --- */
@media (max-width: 560px) {
  body .hero { padding: 58px 0 12px !important; }
  body .chip { margin-bottom: 10px !important; padding: 5px 13px !important; font-size: 12px !important; }
  body .hero h1 { margin-bottom: 10px !important; }
  body .hero-sub { margin-bottom: 12px !important; font-size: 14.5px !important; }
  body .promises { gap: 7px !important; margin-bottom: 12px !important; }
  body .promise { padding: 9px 12px !important; }
  body .promise .i { font-size: 17px !important; }
  body .promise b { font-size: 13.5px !important; }
  body .promise p { font-size: 12px !important; margin-top: 1px !important; }
  /* бейджи повторяют то, что написано в блоке оплаты ниже, — на телефоне убираем */
  body .badges { display: none !important; }
  body .hero-vis { max-width: 200px !important; }
  body .hero-right { gap: 8px !important; }
  body .float-tag { padding: 5px 10px !important; font-size: 10.5px !important; }
  body .hero .btn { padding: 14px 28px !important; font-size: 14.5px !important; }
}

/* --- очень низкий телефон (iPhone SE и подобные) --- */
@media (max-width: 560px) and (max-height: 700px) {
  body .hero { padding: 54px 0 10px !important; }
  body .hero-vis { max-width: 150px !important; }
  body .promise p { display: none !important; }
}

/* --- телефоны с коротким экраном (iPhone SE, старые Android) ---
 * Замер: даже после всех сокращений hero занимает ~795px при экране 667.
 * Виновата правая колонка с визуалом — 251px. На таком экране она всё равно
 * читается плохо, поэтому убираем её и оставляем суть: заголовок, обещания,
 * кнопку. Начиная с 390×844 визуал возвращается.
 */
@media (max-width: 560px) and (max-height: 720px) {
  body .hero-right { display: none !important; }
  body .hero-grid { grid-template-columns: 1fr !important; }
  body .hero-sub { margin-bottom: 10px !important; }
  body .promises { margin-bottom: 10px !important; }
}

/* --- запас на самых плотных страницах (длинный заголовок + 3 обещания) --- */
@media (max-width: 560px) and (max-height: 900px) {
  body .hero { padding-top: 54px !important; }
  body .promise:nth-child(n+4) { display: none !important; }
}

/* --- добор для низких экранов ---
 * Замер после первой правки: hero влезает, но у курсов с длинным заголовком
 * (127px) и тремя обещаниями (162px) кнопка уходит за нижний край на 7–13px.
 * Ужимаем заголовок и карточки обещаний — этого хватает с запасом.
 */
@media (max-height: 640px) and (min-width: 901px) {
  body .hero h1 { font-size: clamp(23px, 2.9vw, 34px) !important; line-height: 1.1 !important; }
  body .hero-sub { margin-bottom: 10px !important; font-size: 14.5px !important; }
  body .promise { padding: 7px 12px !important; }
  body .promise b { font-size: 13.5px !important; }
  body .promise p { font-size: 12px !important; }
  body .promises { gap: 6px !important; margin-bottom: 12px !important; }
  body .hero .btn { padding: 13px 30px !important; font-size: 14.5px !important; }
}

/* --- добор для телефона: остаточные 4–24px --- */
@media (max-width: 560px) {
  body .hero { padding-top: 50px !important; }
  body .hero h1 { line-height: 1.08 !important; }
  body .promises { gap: 6px !important; }
}

/* --- финальный добор на телефоне ---
 * После правок оставался недобор 4–24px у курсов с самым длинным заголовком.
 * Забираем его из нижнего отступа и визуала — на глаз разница незаметна.
 */
@media (max-width: 560px) {
  body .hero { padding-bottom: 6px !important; }
  body .hero-vis { max-width: 178px !important; }
  body .hero-right { gap: 6px !important; }
  body .chip { margin-bottom: 8px !important; }
}

/* --- шапка на узком телефоне ---
 * У блока с логотипом overflow:hidden, а содержимое шире на 14px:
 * на 390px «AI CORTEX ACADEMY» обрезалось до «ACADEM». Ужимаем кегль и значок.
 */
@media (max-width: 420px) {
  /* «ACADEMY» прячем целиком — это лучше, чем обрезанная буква посреди слова */
  body .brand-tail { display: none !important; }
  body .brand { overflow: visible !important; flex-shrink: 0 !important; }
  body .nav-cta { padding: 8px 13px !important; font-size: 12.5px !important; flex-shrink: 1 !important; }
}

/* --- совсем узкие телефоны (iPhone SE, 360px Android) ---
 * На 375 и 360 полное название всё ещё наезжает на кнопку в шапке.
 * Уменьшаем кегль и значок ещё на ступень — название остаётся целым.
 */
@media (max-width: 385px) {
  body .brand { font-size: 13px !important; gap: 7px !important; }
  body .brand img { width: 26px !important; height: 26px !important; }
  body .nav-cta { padding: 7px 11px !important; font-size: 11.5px !important; }
}