/* Ролевая шкала типографики и вертикальный ритм.
   Подключается последним: перекрывает Bootstrap с CDN и точечные размеры
   в lanunion.css за счёт порядка, без !important.
   Заголовки ниже h2 до этого файла задавал bootstrap.min.css формулами
   calc(rem + vw) — отсюда брались дробные размеры вроде 23.14px. */

:root {
    /* Размеры: текучие между 390px и 1440px, дальше упираются в потолок */
    --fs-display: clamp(32px, 1.4rem + 3.1vw, 56px);
    --fs-h1: clamp(28px, 1.2rem + 1.6vw, 40px);
    --fs-h1-compact: clamp(24px, 1.1rem + 1.1vw, 32px);
    --fs-h2: clamp(23px, 1.05rem + 1vw, 30px);
    --fs-h3: clamp(19px, 0.95rem + 0.6vw, 24px);
    --fs-h4: clamp(17px, 0.95rem + 0.35vw, 20px);
    --fs-body: clamp(16px, 0.95rem + 0.15vw, 17px);
    --fs-small: 14px;
    --fs-label: 13px;

    --lh-display: 1.08;
    --lh-h1: 1.15;
    --lh-h2: 1.2;
    --lh-h3: 1.28;
    --lh-h4: 1.35;
    --lh-body: 1.65;
    --lh-small: 1.5;

    /* Шаг ритма — 8px */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* Отбивка между крупными блоками страницы */
    --sp-section: clamp(45px, 2.4rem + 2.6vw, 90px);

    /* Колонка чтения: около 72 знаков на Manrope в размере текста */
    --measure: 72ch;
}

/* ── Роли ──────────────────────────────────────────────────────────── */

h1,
.card h1,
.catalog-main h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    font-weight: 700;
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-5);
    text-wrap: balance;
}

h2,
.company-info h2,
.publications h2,
.purchase h2,
.products h2,
.schedule-info h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 700;
    margin-top: var(--sp-7);
    margin-bottom: var(--sp-5);
    text-wrap: balance;
}

/* Заголовок карточки в списке публикаций и новостей. Размер раздела ему
   не подходит: карточки стоят в четыре колонки, и заголовок в 30px
   растягивал плитку вдвое по высоте */
.blog-items .blog-item .page-header h2 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--sp-3);
    text-wrap: balance;
}

h3,
.folder-info h3,
.subscription h3,
.card-main h3,
.card-related h3,
.article-schedule h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    font-weight: 700;
    margin-top: var(--sp-6);
    margin-bottom: var(--sp-4);
    text-wrap: balance;
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    font-weight: 700;
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-3);
    text-wrap: balance;
}

h5,
h6 {
    font-size: var(--fs-body);
    line-height: var(--lh-h4);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: var(--sp-5);
    margin-bottom: var(--sp-2);
}

/* Первый заголовок в блоке не отбивается сверху: отступ даёт сам блок.
   h1 сюда не входит: ему отбивка нужна и первым — он идёт под крошками
   или под слайдером, у которых своего нижнего отступа нет */
h2:first-child,
h3:first-child,
h4:first-child {
    margin-top: 0;
}

/* Заголовок блока отзывов — по смыслу раздел, идёт по роли h2 */
.event-reviews__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    font-weight: 700;
}

/* Крупные подписи и ярлыки: до этого стояли на 22px — значении, которого
   в шкале нет. Сводим на ступень h4, чтобы сиротских размеров не осталось */
.tabs-nav__item,
.dropdown-tabs__button,
.folder-form span,
.company-guarantee__info span,
.purchase-info span,
.publications-item .publications-item__status + span,
.product_card .offer__price {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

/* ── Заголовок слайдера: единственная display-роль ─────────────────── */

.hero-info h2 {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 800;
    margin-top: 0;
    margin-bottom: var(--sp-5);
}

/* ── Название товара ───────────────────────────────────────────────── */

/* Своя ступень: каталожные названия длинные, в размере h1 они занимают
   три строки и сталкивают карточку вниз. Против h3 разница сохраняется */
.product_card h1#h1 {
    font-size: var(--fs-h1-compact);
    line-height: var(--lh-h1);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: var(--sp-5);
    text-wrap: balance;
}

/* ── Основной текст ────────────────────────────────────────────────── */

.item-page,
.com-content-article__body,
.blog-item,
.product-description {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.item-page p,
.com-content-article__body p,
.product-description p {
    margin-top: 0;
    margin-bottom: var(--sp-4);
    text-wrap: pretty;
}

/* Текстовые блоки шаблона: до этого держались на 18/17/16/15/14px
   и на мобильной падали до 15px. Одна роль на всех */
.company-info p,
.company-info ul li,
.company-guarantee__info p,
.card-info p,
.card-description p,
.folder-form p,
.purchase-info__group p,
.contacts-item--address p,
.event-review__text {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Подзаголовок слайдера: ступень под display, но выше текста */
.hero-info p,
.hero-info span {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
}

/* Мера в широких одиночных колонках */
.company-info p,
.company-info ul li,
.card-description p {
    max-width: var(--measure);
}

.item-page ul,
.item-page ol,
.com-content-article__body ul,
.com-content-article__body ol {
    margin-top: 0;
    margin-bottom: var(--sp-4);
    padding-left: var(--sp-5);
}

.item-page li,
.com-content-article__body li {
    margin-bottom: var(--sp-2);
    text-wrap: pretty;
}

/* Полужирный внутри текста часто служит подзаголовком: даём ему отбивку,
   размер остаётся текстовым, уровень читается пробелом и весом */
.item-page p > strong:only-child,
.com-content-article__body p > strong:only-child {
    display: inline-block;
    margin-top: var(--sp-4);
}

/* Колонка чтения здесь не задаётся. Ограничение ширины `.item-page`
   пробовалось (820px по центру) и снято: в телах материалов картинки и
   видео стоят с `float: right` и рассчитаны на широкий контейнер — текст
   схлопывался в колонку в несколько слов, а по краям вставала пустота.
   Мера строки остаётся длинной; решать её нужно вместе с раскладкой
   материалов, одной типографикой она не берётся. */

/* ── Вторичный текст и метки ───────────────────────────────────────── */

.item-page .article-info,
.item-page .published,
.article-info__item {
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: #5e5e5e;
}

/* ── Ритм секций ───────────────────────────────────────────────────── */

.products,
.folder,
.company {
    padding-top: var(--sp-section);
    padding-bottom: var(--sp-section);
}

.item-page {
    padding-bottom: var(--sp-section);
}

/* ── Мобильная ─────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
    h2,
    .blog-items .blog-item .page-header h2,
    .company-info h2,
    .publications h2,
    .purchase h2,
    .products h2,
    .schedule-info h2 {
        margin-top: var(--sp-6);
    }
}