/* ==========================================================================
   САИКТ — ТЗ «Правки мобильной версии» (главная, направления, стоимость)
   Файл общий для Новосибирска (/) и Омска (/omsk/).
   ВАЖНО: все правила живут внутри @media (max-width: 767.98px).
   Десктоп и планшет (>= 768px) не затрагиваются.
   ========================================================================== */

/* --- Элементы, добавляемые скриптом, существуют только в мобильной версии.
       За пределами мобильного брейкпоинта они полностью скрыты. ----------- */
.saikt-more-toggle,
.saikt-mswipe-hint,
.saikt-courses-actions,
.saikt-menu-contacts,
.saikt-menu-extra {
    display: none !important;
}

@media screen and (max-width: 767.98px) {

/* --- Высота компактной шапки (уточняется из saikt-mobile-tz.js) --------- */
:root {
    --saikt-mh: 104px;
}

/* ==========================================================================
   1. ШАПКА (общая для главной, направлений и страницы «Стоимость»)
   Оставляем: верхнюю плашку + логотип + город + бургер.
   Убираем: строку второстепенных ссылок и телефонный блок с кнопкой.
   ========================================================================== */

html body header#header.header {
    min-height: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* верхняя плашка про сентябрьский набор — оставляем */
html body .header .subheader {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 7px 46px 7px 10px !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

html body .header .subheader i {
    margin-top: 1px !important;
}

/* вторая строка шапки: логотип + город + бургер */
html body header#header.header.h2 {
    gap: 10px !important;
    padding: 44px 56px 10px 12px !important;
}

/* второстепенные элементы уезжают в меню */
html body .header .bottomheader {
    display: none !important;
}

html body .header .header-block-city-select .phone.mobile_sector_header {
    display: none !important;
}

/* дублирующая кнопка записи перед первым экраном */
html body .header .phone .bottom.mobile {
    display: none !important;
}

html body .header .back_to_top-image {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    height: auto !important;
    margin: 0 !important;
}

html body .header .header-block-logo {
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* до 576 px базовые стили показывают мобильный логотип, с 576 px — полный.
   Следим, чтобы одновременно был виден ровно один (см. блок 576–767 внизу файла). */
html body .header .header-block-logo__mobile {
    display: block !important;
    width: auto !important;
    height: 46px !important;
    margin-left: 0 !important;
}

html body .header .header-block-logo__light {
    width: auto !important;
    height: 46px !important;
    margin-left: 0 !important;
}

html body .header .header-block-city-select {
    flex: 0 1 auto;
    width: auto !important;
    margin: 0 !important;
}

html body .header .header-block-city-select .custom-select {
    justify-content: flex-start !important;
    width: auto !important;
    padding: 0 !important;
}

/* бургер зафиксирован и остаётся поверх страницы при скролле —
   без подложки он налезал на заголовки блоков */
html body .header .burger-menu {
    top: 46px !important;
    right: 12px !important;
    z-index: 1000 !important;
    padding: 11px 9px 7px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 2px 10px rgba(0, 71, 137, .16) !important;
}

/* выпадающее меню: сюда переносим телефон и второстепенные ссылки */
html body .header .burger-list {
    top: var(--saikt-mh) !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
    padding: 14px 18px 30px !important;
    background: hsla(0, 0%, 100%, .98) !important;
}

html body .header .burger-list li {
    width: 100%;
    text-align: center;
}

html body .header .burger-list .burger-list__link {
    display: block;
    line-height: 52px !important;
}

/* блок телефона и мессенджеров внутри меню */
html body .saikt-menu-contacts {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    margin: 4px 0 10px;
    padding: 12px 0;
    border-top: 1px solid #e4eef7;
    border-bottom: 1px solid #e4eef7;
}

html body .saikt-menu-contacts__phone {
    color: #28282b;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
}

html body .saikt-menu-contacts .footer-icons__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #008bd2;
    font-size: 22px;
}

html body .saikt-menu-contacts .footer-icons__icon img {
    width: 20px;
}

html body .saikt-menu-extra {
    display: block !important;
}

html body .saikt-menu-extra .burger-list__link {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 34px !important;
}

/* компенсируем убранную высоту шапки */
html body .home {
    margin-top: 0 !important;
}

html body .banner {
    margin-top: var(--saikt-mh) !important;
}

/* ==========================================================================
   2. ГЛАВНАЯ — СТАТИСТИКА: сетка по 2 в строке
   ========================================================================== */

html body .stata {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: calc(100% - 32px) !important;
    padding: 22px 0 10px !important;
}

html body .stata .element {
    grid-column: auto !important;
    min-height: 0 !important;
    padding: 14px 14px 13px !important;
}

html body .stata .bold,
html body .stata .element:first-child .bold {
    margin-bottom: 8px !important;
    /* в узкой колонке длинные слова («IT-компания») не должны вылезать */
    overflow-wrap: anywhere !important;
}

html body .stata .element > div:not(.bold),
html body .stata .element:first-child > div:not(.bold) {
    max-width: 100% !important;
}

/* на узких экранах (320–360 px) длинные слова не должны вылезать
   из карточек, ставших вдвое уже; размер шрифта при этом не меняем */
html body .stata .element > div,
html body .student-achievements__total span,
html body .student-achievement-card__value,
html body .student-achievement-card__text,
html body #aboutUs .why-card h3,
html body main.direction-page .direction-brief__item > *,
html body main.direction-page #aboutUs .direction-stat > * {
    overflow-wrap: break-word !important;
    hyphens: auto;
}

/* ==========================================================================
   3. ГОРИЗОНТАЛЬНЫЙ СВАЙП — общий механизм
   Одна почти полноразмерная карточка + 10–15 % следующей справа.
   ========================================================================== */

html body .saikt-mswipe {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* контейнер с прокруткой по X обрезает всё за пределами padding-box,
       поэтому резервируем место под box-shadow карточек и компенсируем
       отрицательными полями, чтобы карточки остались на прежней линии */
    margin-left: -12px !important;
    margin-right: -12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 26px !important;
    scroll-padding-left: 12px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html body .saikt-mswipe::-webkit-scrollbar {
    display: none;
}

/* на страницах направлений глобально стоит * { transition: all 150ms } —
   без сброса перестроение сеток/каруселей анимируется при загрузке */
html body .saikt-mswipe {
    transition: none !important;
}

html body .saikt-mswipe > * {
    /* на телефонах (<= 423 px) это ровно 85 % по ТЗ, на широких экранах
       карточка перестаёт разрастаться до полутысячи пикселей */
    flex: 0 0 min(85%, 360px) !important;
    width: min(85%, 360px) !important;
    min-width: 0 !important;
    max-width: min(85%, 360px) !important;
    margin: 0 !important;
    scroll-snap-align: start;
    /* у .course глобально стоит transition: all — без сброса ширина карточки
       анимируется при первой раскладке карусели */
    transition: none !important;
}

/* подсказка «листайте вбок» */
html body .saikt-mswipe-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
    color: #7d8fa6;
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

html body .saikt-mswipe-hint i {
    font-size: 16px;
}

/* ==========================================================================
   4. ГЛАВНАЯ — НАПРАВЛЕНИЯ: свайп вместо вертикального списка
   ========================================================================== */

html body #courses {
    padding-top: 14px !important;
}

html body #courses .our-courses {
    display: block !important;
}

html body #courses .saikt-course-filters {
    margin-top: 14px !important;
}

html body #courses .saikt-course-filters select {
    width: 100% !important;
    max-width: none !important;
}

/* у #ccourse в базовых стилях есть justify-content: center !important и
   margin-top: 120px !important — перебиваем более специфичным селектором.
   .course-icon-frame — position:absolute; top:-76px, иллюстрация карточки
   намеренно выступает вверх. Контейнер со scroll по X получает overflow-y:
   hidden и срезал бы её, поэтому резервируем место padding-ом сверху. */
html body #courses #ccourse.saikt-mswipe {
    justify-content: flex-start !important;
    /* в базовых стилях у #ccourse задана width: 100%, из-за неё
       отрицательные поля сдвигали бы блок вместо расширения */
    width: auto !important;
    margin-top: 14px !important;
    padding-top: 84px !important;
}

html body #courses #ccourse.saikt-mswipe > .course {
    height: auto !important;
}

/* у .mor жёстко задана ширина 100px, а «Подробнее» в неё не помещается */
html body #courses #ccourse.saikt-mswipe .mor {
    width: auto !important;
}

/* кнопки «Показать все курсы» / «Показать больше» выносим под карусель */
html body .saikt-courses-actions {
    display: flex !important;
    justify-content: center;
    margin-top: 14px;
}

html body .saikt-courses-actions #resetConfig,
html body .saikt-courses-actions #cmore {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    margin: 0 !important;
}

/* ==========================================================================
   5. ГЛАВНАЯ — ПОЧЕМУ РОДИТЕЛИ ВЫБИРАЮТ САИКТ: первые 4 + «Показать ещё»
   ========================================================================== */

html body #root #aboutUs .why-we-are__top,
html body #root #aboutUs .why-we-are__grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}

html body #root #aboutUs .why-we-are__top {
    margin-bottom: 12px !important;
}

html body #root #aboutUs .why-we-are__grid.saikt-collapsed > .why-card:nth-child(n+3) {
    display: none !important;
}

html body .saikt-more-toggle {
    display: block !important;
    width: 100%;
    margin: 14px 0 0;
    padding: 13px 18px;
    border: 2px solid #8ab8ff;
    border-radius: 999px;
    background: #fff;
    color: #2d7ff0;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 20px;
    cursor: pointer;
}

html body #aboutUs .why-we-are__note {
    margin-top: 14px !important;
}

/* ==========================================================================
   6. ГЛАВНАЯ — ЖИЗНЬ САИКТ: свайп
   ========================================================================== */

html body .saikt-life-wrapper {
    margin-top: 22px !important;
    padding-top: 14px !important;
}

html body .saikt-life__grid.saikt-mswipe > .saikt-life-card {
    height: auto !important;
}

/* ==========================================================================
   7. ГЛАВНАЯ — ДОСТИЖЕНИЯ: сетка по 2 в строке
   ========================================================================== */

html body .student-achievements-wrapper {
    margin-top: 24px !important;
    padding: 24px 14px 22px !important;
}

html body .student-achievements__intro {
    margin-bottom: 14px !important;
}

html body .student-achievements__total {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 4px 10px !important;
    margin-bottom: 16px !important;
}

html body .student-achievements__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body .student-achievement-card {
    padding: 14px 12px !important;
}

html body .student-achievement-card__value {
    margin: 12px 0 6px !important;
}

html body .student-achievements__button {
    margin-top: 16px !important;
}

/* ==========================================================================
   8. ГЛАВНАЯ — ОТЗЫВЫ: 3 отзыва + ссылка на 2ГИС
   ========================================================================== */

html body #reviews {
    margin-top: 30px !important;
}

html body #reviews .saikt-review-grid > .saikt-review-card:nth-child(n+4) {
    display: none !important;
}

html body .saikt-reviews-more {
    margin-top: 14px !important;
}

/* ==========================================================================
   9. ГЛАВНАЯ — ЖУРНАЛ: 2 материала + кнопка «Все материалы»
   ========================================================================== */

html body #BLOG {
    margin-top: 24px !important;
}

html body #BLOG .journal-list > .journal-card:nth-child(n+2) {
    display: none !important;
}

html body #BLOG .journal-actions {
    margin-top: 16px !important;
}

/* ==========================================================================
   10. ОБЩЕЕ ПО ГЛАВНОЙ — избыточные вертикальные отступы
   ========================================================================== */

html body .course-help {
    margin-top: 22px !important;
    padding-top: 22px !important;
}

html body .saikt-pricing-strip {
    margin-top: 26px !important;
}

html body #aboutUs.why-we-are-wrapper {
    margin-top: 24px !important;
}

html body .master-block {
    margin-top: 26px !important;
}

/* ==========================================================================
   11. СТРАНИЦЫ НАПРАВЛЕНИЙ
   ========================================================================== */

html body main.direction-page {
    padding-top: calc(var(--saikt-mh) + 16px) !important;
}

html body main.direction-page .direction-section {
    margin-top: 30px !important;
}

html body main.direction-page .direction-brief,
html body main.direction-page .direction-brief__item,
html body main.direction-page #aboutUs .direction-stats,
html body main.direction-page #aboutUs .direction-stat,
html body main.direction-page .dir-create,
html body main.direction-page .dir-create__card,
html body main.direction-page .direction-track,
html body main.direction-page .direction-track__item {
    transition: none !important;
}

/* «Кратко о направлении» — сетка 2 × 3 */
html body main.direction-page .direction-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body main.direction-page .direction-brief__item {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 12px !important;
}

/* иконка и текст жёстко расставлены по колонкам грида —
   в узкой карточке (2 в строке) складываем их в одну колонку */
html body main.direction-page .direction-brief__item > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: start !important;
}

html body main.direction-page .direction-brief__item .direction-brief__icon {
    margin-bottom: 6px !important;
}

/* «Почему родители выбирают САИКТ» — по 2 в строке */
html body main.direction-page #aboutUs .direction-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

html body main.direction-page #aboutUs .direction-stat:nth-child(n) {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 14px 12px !important;
}

html body main.direction-page #aboutUs .direction-stat::before {
    display: none !important;
}

html body main.direction-page #aboutUs .direction-stat b,
html body main.direction-page #aboutUs .direction-stat:nth-child(5) b,
html body main.direction-page #aboutUs .direction-stat:nth-child(6) b {
    max-width: 100% !important;
}

html body main.direction-page #aboutUs .direction-stat > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    justify-self: start !important;
}

html body main.direction-page #aboutUs .direction-stat .direction-stat__icon,
html body main.direction-page #aboutUs .direction-stat .material-icons {
    margin-bottom: 6px !important;
}

/* «Что создаёт ребёнок» и «Траектория развития» — свайп */
html body main.direction-page .dir-create.saikt-mswipe,
html body main.direction-page .direction-track.saikt-mswipe {
    grid-template-columns: none !important;
}

html body main.direction-page .direction-track.saikt-mswipe > .direction-track__item {
    min-height: 0 !important;
}

/* ==========================================================================
   12. СТРАНИЦА «СТОИМОСТЬ»
   ========================================================================== */

/* .pricing-hero — тег <header>, попадал под глобальное header { position: absolute }
   и наезжал на тарифные карточки. Возвращаем нормальный поток. */
html body main.pricing-page .pricing-hero {
    position: relative !important;
    margin-bottom: 24px !important;
    padding-top: 8px !important;
}

html body main.pricing-page {
    padding-top: calc(var(--saikt-mh) + 12px) !important;
    padding-bottom: 40px !important;
}

/* обе тарифные карточки видимы целиком, без свайпа */
html body main.pricing-page .pricing-plans {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

html body main.pricing-page .pricing-plan {
    min-height: 0 !important;
    padding: 20px 18px !important;
}

html body main.pricing-page .pricing-plan__head {
    margin-bottom: 12px !important;
}

/* «Что входит в стоимость» — свайп */
html body main.pricing-page .pricing-included.saikt-mswipe {
    border-top: 0 !important;
    border-bottom: 0 !important;
    grid-template-columns: none !important;
}

html body main.pricing-page .pricing-included.saikt-mswipe > .pricing-included__item {
    padding: 20px 16px !important;
    border: 1px solid var(--line, #e2ecf5) !important;
    border-radius: 8px !important;
}

html body main.pricing-page .pricing-section {
    margin-top: 30px !important;
}

}

/* ==========================================================================
   13. 576–767 px: базовые стили включают полный логотип с текстом.
   Оставляем его (в уменьшенном виде), а мобильный значок прячем,
   иначе в шапке видно сразу два логотипа.
   ========================================================================== */

@media screen and (min-width: 576px) and (max-width: 767.98px) {

html body .header .header-block-logo__mobile {
    display: none !important;
}

html body .header .header-block-logo__light {
    display: block !important;
    width: auto !important;
    height: 46px !important;
}

}