/* ===== WEBEGE UNIFIED INNER H1 START ===== */

:root {
    --webege-inner-h1-top: 132px;
    --webege-inner-h1-size: clamp(48px, 5vw, 62px);
}

/* ----------------------------------------------------------
   ЕГЭ / ОГЭ
   ---------------------------------------------------------- */

body.shop-body .shop-page-section {
    padding-top: var(--webege-inner-h1-top) !important;
}

body.shop-body .shop-page-hero-title h1 {
    margin: 0 0 14px !important;
}

/* ----------------------------------------------------------
   Отзывы

   Убираем отступ у main и задаём его самой верхней hero-секции,
   чтобы не складывались два разных padding-top.
   ---------------------------------------------------------- */

body.reviews-body .reviews-clean-page {
    padding-top: 0 !important;
}

body.reviews-body .reviews-clean-hero {
    padding:
        var(--webege-inner-h1-top)
        0
        8px
        !important;
}

/* ----------------------------------------------------------
   Бесплатные материалы

   Раньше hero вертикально центрировался по высоте экрана,
   поэтому положение H1 зависело от высоты окна и содержимого.
   Теперь верх заголовка фиксирован так же, как у магазина.
   ---------------------------------------------------------- */

body.free-body .free-page {
    padding-top: 0 !important;
}

body.free-body .free-hero {
    display: flex !important;
    align-items: flex-start !important;

    min-height: calc(100svh - 70px) !important;
    padding:
        var(--webege-inner-h1-top)
        0
        64px
        !important;

    box-sizing: border-box !important;
}

body.free-body .free-hero > .free-container {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* ----------------------------------------------------------
   Одинаковый размер и метрика всех трёх типов H1
   ---------------------------------------------------------- */

body.shop-body .shop-page-hero-title h1,
body.free-body .free-hero h1,
body.free-body .free-main-title,
body.reviews-body .reviews-clean-hero h1 {
    margin-top: 0 !important;

    font-size: var(--webege-inner-h1-size) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
}

/* ----------------------------------------------------------
   Мобильные
   ---------------------------------------------------------- */

@media (max-width: 640px) {
    :root {
        --webege-inner-h1-top: 112px;
        --webege-inner-h1-size: 40px;
    }

    body.shop-body .shop-page-hero-title h1,
    body.free-body .free-hero h1,
    body.free-body .free-main-title,
    body.reviews-body .reviews-clean-hero h1 {
        margin-top: 0 !important;
        font-size: var(--webege-inner-h1-size) !important;
        line-height: 1 !important;
    }

    body.free-body .free-hero {
        min-height: calc(100svh - 70px) !important;
        padding-bottom: 48px !important;
    }
}

@supports not (height: 100svh) {
    body.free-body .free-hero {
        min-height: calc(100vh - 70px) !important;
    }
}

/* ===== WEBEGE UNIFIED INNER H1 END ===== */

/* ===== WEBEGE MOBILE INNER H1 FINAL START ===== */

@media (max-width: 768px) {
    /*
       На мобильном хедер занимает больше места,
       поэтому 112px визуально почти не давали промежутка.
    */
    :root {
        --webege-inner-h1-top: 160px;
    }

    /*
       Центрируем только заголовок магазина.
       Остальной текст и каталог не меняются.
    */
    body.shop-body .shop-page-hero-title h1 {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    /*
       Двоеточие остаётся на ПК,
       но скрывается на мобильных ЕГЭ и ОГЭ.
    */
    body.shop-body .shop-h1-colon {
        display: none !important;
    }
}

/* ===== WEBEGE MOBILE INNER H1 FINAL END ===== */