/* RESPONSIVE HEADINGS SYSTEM */

/*
 * Общая защита заголовков от горизонтального
 * переполнения. Действует на всех страницах,
 * включая динамические названия материалов.
 */
h1,
h2,
h3 {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal;
    word-break: normal;
}

/*
 * Основной мобильный заголовок страницы.
 * Размер плавно изменяется от 280 до 520 px.
 */
@media (max-width: 520px) {
    body:not(.admin-shell) main h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(
            1.65rem,
            9.4vw,
            3.25rem
        ) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.035em;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
    }

    /*
     * Крупные заголовки второго уровня,
     * для которых аудит обнаружил размеры
     * от 11 до 18vw.
     */
    .preview-evidence__heading h2,
    .services-direction__header h2,
    .contact-direct h2,
    .contact-brief h2 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(
            1.45rem,
            8.6vw,
            2.8rem
        ) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.03em;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
    }

    /*
     * Крупные карточные заголовки направлений.
     */
    .contact-direction h3 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(
            1.25rem,
            6.8vw,
            2.2rem
        ) !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        text-wrap: balance;
    }

    /*
     * Остальные h2 и h3 сохраняют собственный
     * размер, но не расширяют контейнер.
     */
    body:not(.admin-shell) main h2,
    body:not(.admin-shell) main h3 {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    /*
     * Административные страницы имеют отдельную
     * более компактную типографическую шкалу.
     */
    .admin-shell .admin-main h1 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(
            1.65rem,
            8.5vw,
            2.8rem
        ) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.025em;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .admin-shell .admin-main h2 {
        max-width: 100%;
        font-size: clamp(
            1.35rem,
            7vw,
            2.2rem
        ) !important;
        line-height: 1.08 !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }

    .admin-shell .admin-main h3 {
        max-width: 100%;
        font-size: clamp(
            1.1rem,
            5.8vw,
            1.7rem
        ) !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 360px) {
    body:not(.admin-shell) main h1 {
        font-size: clamp(
            1.65rem,
            9.2vw,
            2.1rem
        ) !important;
        line-height: 1.04 !important;
    }

    .preview-evidence__heading h2,
    .services-direction__header h2,
    .contact-direct h2,
    .contact-brief h2 {
        font-size: clamp(
            1.4rem,
            8.4vw,
            1.95rem
        ) !important;
    }

    .admin-shell .admin-main h1 {
        font-size: clamp(
            1.55rem,
            8.2vw,
            1.95rem
        ) !important;
    }
}