/*
    Шапка сайта на лендинге Советника.

    Лендинг приходит из внешнего конструктора со своим сбросом (`* { margin:0; padding:0 }`)
    и своей типографикой, а общий CSS сайта грузится рядом. Здесь только то, что нужно,
    чтобы настоящий partials.nav встал поверх этой страницы и не подрался с ней:
    контейнер шапки светлый и липкий, внутренности меню не трогаем — они приезжают
    из main.css вместе с остальным сайтом.
*/

.adv-site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    box-shadow: 0 1px 14px rgba(20, 10, 40, .06);
}

/* Лендинг задаёт body { display:flex; align-items:center } для экрана загрузки —
   после монтирования это центрирует и прижимает шапку. Возвращаем обычный поток. */
body:has(.adv-site-header) {
    display: block;
    align-items: initial;
    justify-content: initial;
    min-height: 0;
}

/* Сброс лендинга обнуляет отступы у всего подряд, включая элементы меню. */
.adv-site-header .main-nav,
.adv-site-header .site-banner {
    box-sizing: border-box;
}

/* Тёмный фон первого экрана начинается сразу под шапкой — на светлой полосе
   логотип и пункты меню читаются, а вот нижнюю границу видно не всегда. */
.adv-site-header::after {
    content: '';
    display: block;
    height: 1px;
    background: #E9E4F2;
}

/*
    Общий CSS сайта задаёт правила по тегам (footer, blockquote и другие), и на этой
    странице они протекают внутрь лендинга: подпись под цитатой Менегетти получала
    тёмную плашку и центрирование от сайтового `footer { background: var(--c-ink) }`.
    Сам лендинг лежит соседом шапки, поэтому глушим протечки точечно именно там.
*/
.adv-site-header ~ div footer {
    background: none;
    color: inherit;
    padding: 0;
    text-align: inherit;
}
.adv-site-header ~ div blockquote {
    quotes: none;
}

/*
    Меню сайта липкое само по себе (position:sticky в main.css) и на этой странице
    прилипало к верху окна поверх промо-баннера — баннер уезжал под него и обрезался.
    Внутри нашей шапки липнет только контейнер, а меню стоит обычным блоком.
*/
.adv-site-header .main-nav {
    position: static;
    top: auto;
}

/*
    Заголовок баннера — это <h1>, а лендинг задаёт своим h1 огромный clamp-размер.
    На обычных страницах баннер около 106 пикселей, здесь разъезжался до 913.
    Возвращаем ему собственную типографику; строчные размеры взяты из main.css.
*/
.adv-site-header .top-banner-title {
    font-size: .95rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 0;
    letter-spacing: normal;
}
.adv-site-header .top-banner-event-title {
    font-size: 1rem;
    line-height: 1.3;
}
.adv-site-header .top-banner-event-badge,
.adv-site-header .top-banner-event-cta {
    font-size: .8rem;
    line-height: 1.2;
}

/*
    Лендинг растягивает svg внутри своих плиток на всю ширину контейнера, и это
    правило доставало иконку календаря в баннере: она раздувала блок события
    до 910 пикселей. Внутри шапки размеры иконок задаёт компонент, не лендинг.
*/
.adv-site-header svg {
    width: auto;
    height: auto;
    max-width: 100%;
}
.adv-site-header .ha-icon {
    flex-shrink: 0;
}
.adv-site-header .ha-icon svg {
    width: 100%;
    height: 100%;
}


/* Пока открыта модалка «Подробнее», фон под ней не должен ехать.
   Класс навешивает advisor-modal.js только вместе с реальным слоем и снимает
   сторожем, как только слой пропал. */
.adv-modal-lock {
    overflow: hidden !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Мобильная верстка лендинга Советника.

   Медиазапросов у страницы не было ни одного: двухколоночные слайды на телефоне
   сжимались в две узкие полосы по полтора слова в строке, а вертикальные отступы
   по 104 пикселя растягивали её вдвое.

   Раскладка лежит в инлайновых стилях бандла, целиться в них селекторами по
   атрибуту style бесполезно — рантайм печатает стили в своём нормализованном
   виде. Классы ниже навешивает advisor-mobile.js, читая CSSOM. Инлайн сильнее
   внешнего правила, отсюда !important: другого способа его перебить нет.
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {

    /* Текст и картинка рядом — в столбик. */
    .adv-m-2col {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Вертикальный ритм: сотня пикселей на отступ — это полтора экрана телефона. */
    .adv-m-section {
        padding-top: 54px !important;
        padding-bottom: 54px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .adv-m-gap { gap: 28px !important; }

    /* Внутренние карточки: 26 пикселей по кругу на узком экране съедают строку. */
    .adv-m-card { padding: 18px !important; }

    /* Декоративные свечения выходят за край контейнера (left:-6%), и на телефоне
       это даёт горизонтальный сдвиг всей страницы. Подрезаем именно clip, а не
       hidden: hidden сделал бы блок контейнером прокрутки и сломал бы липкую
       шапку и отрисовку иконок по доскроллу. */
    .adv-m-section,
    .adv-m-wrap { overflow-x: clip; }

    /* Ничто не должно вылезать за край: у части картинок размеры заданы
       атрибутами width и height. Высоту не сбрасываем и видео не трогаем —
       фон первого экрана растянут через position:absolute и inset. */
    body img:not([style*="position"]) { max-width: 100% !important; }
}

/* Совсем узкие экраны. Заголовки в бандле заданы через clamp и сжимаются сами,
   а разряженные надзаголовки начинают переноситься по слогам. */
@media (max-width: 420px) {
    .adv-m-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .adv-m-card { padding: 15px !important; }
    [style*="letter-spacing"] { letter-spacing: .12em !important; }
}