/* =====================================
   SOHOLMS
   ЗДОРОВЫЙ РЕБЁНОК ONLINE
   ПОЛНЫЙ CSS
===================================== */


/* =====================================
   БАЗОВЫЕ НАСТРОЙКИ
===================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}


/* =====================================
   ОБЩИЕ КОНТЕЙНЕРЫ
===================================== */

@media (min-width: 768px) {

    /* каждая секция — колонка по центру
       с широкими полями по бокам */
    main.main > section {
        width: 100% !important;
        max-width: 1280px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(32px, 7vw, 120px) !important;
        padding-right: clamp(32px, 7vw, 120px) !important;
    }

    /* внутренние контейнеры не добавляют
       своих полей поверх */
    main.main > section ._cnt {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

}

@media (max-width: 767px) {

    ._cnt {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    p,
    h1,
    h2,
    h3 {
        max-width: 100%;
        overflow-wrap: break-word;
    }

}


/* =====================================
   ЛОГОТИП
===================================== */

img[src*="logo_zr"],
img[alt="логотип"],
img[src*="logotip"] {
    height: auto !important;
}

@media (max-width: 767px) {

    img[src*="logo_zr"],
    img[alt="логотип"],
    img[src*="logotip"] {
        width: 200px !important;
        max-width: 70% !important;
    }

}


/* =====================================
   КУРСЫ — МОБИЛЬНАЯ КАРУСЕЛЬ
   Только сетки с карточками курсов.
   Не трогаем: шапку с заголовком
   и логотипом, пустые сетки,
   специалистов и форму.
===================================== */

@media (max-width: 767px) {

    div[style*="grid-template-columns"]:not(#experts *):not(:has(h1)):not(:has(soho-form)):has(> div > *) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 12px !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch;
    }

    div[style*="grid-template-columns"]:not(#experts *):not(:has(h1)):not(:has(soho-form)):has(> div > *)::-webkit-scrollbar {
        display: none !important;
    }

    div[style*="grid-template-columns"]:not(#experts *):not(:has(h1)):not(:has(soho-form)):has(> div > *) > * {
        flex: 0 0 85% !important;
        width: 85% !important;
        max-width: 85% !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;
    }

}


/* =====================================
   ЗАПИШИТЕСЬ НА КОНСУЛЬТАЦИЮ
   (блок с формой внутри #courses —
   оформление задано в самом блоке,
   здесь только мобильная подгонка)
===================================== */

@media (max-width: 767px) {

    #courses .courses__items > section {
        margin: 16px 0 !important;
        padding: 36px 18px !important;
        border-radius: 20px !important;
    }

    #courses .courses__items > section h2 {
        font-size: 26px !important;
    }

    #courses .courses__items > section p {
        font-size: 16px !important;
        margin-bottom: 24px !important;
    }

}


/* =====================================
   СПЕЦИАЛИСТЫ — ЗАГОЛОВОК
   Пустые шаблонные карточки платформы
   (.experts__items) скрываем,
   заголовок оставляем.
===================================== */

#experts .experts__title {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#experts .experts__items {
    display: none !important;
}


/* =====================================
   СПЕЦИАЛИСТЫ — КАРУСЕЛЬ (ПК)
===================================== */

section#experts > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    justify-content: safe center !important;
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px 40px 30px !important;
    gap: 32px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c9d3dc transparent;
}

section#experts > div[style*="grid-template-columns"]::-webkit-scrollbar {
    height: 6px;
}

section#experts > div[style*="grid-template-columns"]::-webkit-scrollbar-thumb {
    background: #c9d3dc;
    border-radius: 3px;
}

section#experts > div[style*="grid-template-columns"]::-webkit-scrollbar-track {
    background: transparent;
}


/* КАРТОЧКИ */

section#experts > div[style*="grid-template-columns"] > div {
    flex: 0 0 260px !important;
    width: 260px !important;
    min-width: 0 !important;
    max-width: 260px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
    text-align: center !important;
}

/* незаполненные карточки-заготовки
   (фото ещё не вставлено) не показываем */
section#experts > div[style*="grid-template-columns"] > div:has(> img[src^="ССЫЛКА"]) {
    display: none !important;
}


/* ФОТО — ОДИНАКОВЫЕ КРУГИ */

section#experts > div[style*="grid-template-columns"] > div > img {
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 50% !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
}


/* ТЕКСТ */

section#experts > div[style*="grid-template-columns"] [role="text-block-widget"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

section#experts > div[style*="grid-template-columns"] p,
section#experts > div[style*="grid-template-columns"] span {
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #333333 !important;
    text-align: center !important;
    overflow-wrap: break-word !important;
}

section#experts > div[style*="grid-template-columns"] p {
    margin: 0 auto 6px !important;
    padding: 0 !important;
}

section#experts > div[style*="grid-template-columns"] p:empty {
    display: none !important;
}


/* =====================================
   СПЕЦИАЛИСТЫ — МОБИЛЬНАЯ ВЕРСИЯ
===================================== */

@media (max-width: 767px) {

    section#experts > div[style*="grid-template-columns"] {
        justify-content: flex-start !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px 24px !important;
        gap: 16px !important;
        scroll-padding-left: 16px;
        scrollbar-width: none;
    }

    section#experts > div[style*="grid-template-columns"]::-webkit-scrollbar {
        display: none;
    }

    section#experts > div[style*="grid-template-columns"] > div {
        flex: 0 0 72% !important;
        width: 72% !important;
        max-width: 72% !important;
    }

    section#experts > div[style*="grid-template-columns"] > div > img {
        width: 170px !important;
        height: 170px !important;
        margin-bottom: 14px !important;
    }

}

/* =====================================
   ЛИШНИЙ ЗАГОЛОВОК «СПЕЦИАЛИСТЫ» НАД ФОРМОЙ
   (блок-сетка с одним h2 внутри
   .courses__items, перед формой)
===================================== */

#courses .courses__items > div:has(> [role="text-block-widget"] > h2) {
    display: none !important;
}


/* =====================================
   ДУБЛИКАТ СПЕЦИАЛИСТОВ ВНИЗУ СТРАНИЦЫ
   (Мананкова + Калашникова — блок вне
   основной страницы .wrapper)
===================================== */

div[style*="repeat(2, 6fr)"]:not(.wrapper *):has(img[src*="manankova_"]),
div[style*="repeat(2, 6fr)"]:not(.wrapper *):has(img[src*="kalashnikova"]) {
    display: none !important;
}


/* =====================================
   ПЕРВЫЙ ЭКРАН — МОБИЛЬНАЯ ВЕРСИЯ
   «Здоровый ребёнок онлайн» и логотип
   друг под другом, без карусели.
   Курсы ниже остаются каруселью.
===================================== */

@media (max-width: 767px) {

    section.promo div[style*="grid-template-columns"]:has(h1) {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 16px !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
        scroll-snap-type: none !important;
    }

    section.promo div[style*="grid-template-columns"]:has(h1) > * {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    section.promo div[style*="grid-template-columns"]:has(h1) img {
        display: block !important;
        width: 200px !important;
        max-width: 70% !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    /* пустая сетка над заголовком не занимает место */
    section.promo div[style*="grid-template-columns"]:not(:has(> div > *)) {
        display: none !important;
    }

}


/* =====================================
   БЕЛЫЙ ФОН: ФОРМА И КАРТОЧКИ КУРСОВ
===================================== */

/* форма «Запишитесь на консультацию» */
#courses .courses__items > section {
    background: #ffffff !important;
    border: 1px solid #e3e8ee !important;
}

/* карточки курсов: светло-голубой фон
   (#F1F5F9) меняем на белый */
main [style*="241, 245, 249"],
main [style*="F1F5F9" i],
main [style*="f1f5f9"] {
    background: #ffffff !important;
    background-color: #ffffff !important;
}


/* =====================================
   КУРСЫ НА ПК — ПО ЦЕНТРУ
   Карточки выстраиваются по центру
   (1, 2, 3 или 4 в ряд), заголовки
   разделов тоже по центру, между
   разделами — воздух.
===================================== */

@media (min-width: 768px) {

    div[style*="grid-template-columns"]:not(#experts *):not(:has(h1)):not(:has(soho-form)):not(:has(img)):has(> div > *) {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 32px !important;
        width: 100% !important;
        margin: 0 auto 24px !important;
    }

    div[style*="grid-template-columns"]:not(#experts *):not(:has(h1)):not(:has(soho-form)):not(:has(img)):has(> div > *) > * {
        flex: 0 1 320px !important;
        width: 320px !important;
        max-width: 340px !important;
        min-width: 0 !important;
    }

    section.promo h2,
    section.about h2 {
        text-align: center !important;
        margin: 72px auto 32px !important;
    }

}