/*
 * Кирпич · заголовки.
 *
 * Заголовок секции держит структуру страницы размером. Вес у него тот
 * же, что у h1: уровень между ними задаёт кегль, а не жирность, и h1
 * при этом крупнее вдвое.
 *
 * Отступ сверху втрое больше нижнего, поэтому заголовок читается как
 * начало своей части, а не как подпись к предыдущей.
 *
 * Полоска стоит внизу (0 100%), под заголовком: у списка та же линия
 * стоит вверху пункта.
 *
 * Тот же вид нужен заголовку внутри статьи, где классов нет и разметку
 * пишет конвертер. Поэтому правило одно на оба случая: разойтись двум
 * копиям при первой же правке проще, чем кажется.
 *
 * Обычный блок, а не флекс. Разница видна при выделении текста мышью:
 * во флексе голый текст становится анонимным элементом во всю ширину
 * контейнера, и протяжка заливает не строку заголовка, а всю полосу
 * колонки вместе с полями. Колонкой заголовок становится ниже, и только
 * когда под ним действительно стоит приписка.
 */
.section-title,
.article h2 {
    /*
     * Отбивка снизу, как у всех блоков: заголовок отодвигает от себя
     * то, что идёт следом. Снимается она ниже, у списка и таблицы —
     * там первая строка держит своё поле сама.
     */
    margin: 0 0 var(--step);
    padding: var(--title-space) 0 var(--title-space-under);
    background: var(--separator-line) 0 100% / 100% var(--hairline) no-repeat;
    color: var(--color-title);
    font-size: var(--title-size);
    font-weight: var(--title-weight);
    line-height: var(--line);
}

/*
 * Список сразу за заголовком отбивку снимает. У строки списка своё
 * верхнее поле и разделительная линия поверх, поэтому поле заголовка
 * прибавлялось бы к ним, и первая строка отходила бы от названия
 * дальше, чем строки отстоят друг от друга.
 *
 * Правило на заголовке, а не на списке: убирает поле тот, кто его
 * поставил.
 */
.section-title:has(+ .rows),
.article h2:has(+ .rows),
.article h2:has(+ table),
.article h2:has(+ .table-scroll) {
    margin-bottom: 0;
}

/*
 * Списки с картинками отбивку возвращают: у карточек и плитки нет ни
 * верхнего поля, ни линии над первой строкой, поэтому заголовок иначе
 * прилипает к ним вплотную.
 */
.section-title:has(+ .rows.cards),
.section-title:has(+ .rows.tiles) {
    margin-bottom: var(--step);
}

/*
 * Под заголовком может стоять приписка: адрес группы, счётчик, срок.
 * Она всегда на своей строке, а не сбоку: рядом с заголовком она сжимала
 * бы его в узкую колонку, и длина названия меняла бы раскладку от секции
 * к секции.
 *
 * Правило включается наличием приписки, поэтому заголовок без неё
 * остаётся обычным блоком и выделяется по длине строки.
 */
.section-title:has(> small),
.article h2:has(> small) {
    display: flex;
    flex-direction: column;
}

/*
 * Приписка в заголовке: мельче и приглушена, потому что заголовок она
 * дополняет, а не спорит с ним. По базовой линии не равняется — у неё
 * своя строка, и при переносе она встаёт под заголовком слева.
 *
 * Вес возвращается к обычному: заголовок жирный, и без этого приписка
 * наследовала бы его вместе с ним.
 */
.section-title > small,
.article h2 > small {
    color: var(--color-muted);
    font-size: var(--text-small);
    font-weight: 400;
    line-height: var(--line);
}

/*
 * Значок перед заголовком: группа каталога, раздел, тип услуги. Лежит в
 * теге i первым ребёнком, внутри img или готовый svg — так же, как значок
 * строки списка.
 *
 *   h2.section-title > i > svg + Инженерно-технические
 *
 * Заголовок становится гридом, а не рядным флексом: у него уже есть
 * приписка, которая обязана стоять под текстом. Во флексе она встала бы
 * третьей колонкой справа от заголовка. Здесь значок занимает левую
 * колонку во всю высоту, а текст и приписка идут в правой сверху вниз.
 *
 * Правило отдельное и включается наличием i, поэтому заголовок без значка
 * остаётся прежней колонкой и ничего не теряет.
 *
 * Текст заголовка при этом обязан лежать в теге, а не голым узлом рядом
 * со значком: в правую колонку грид ставит только элементы, а голый текст
 * раскладывает как анонимный блок и уводит его в середину строки. Поэтому
 * заголовок со значком пишется как i + span.
 *
 *   h2.section-title > i + span + small
 */
.section-title:has(> i:first-child),
.article h2:has(> i:first-child) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--title-icon-space);
}

/* Текст и приписка идут в правой колонке сверху вниз. */
.section-title:has(> i:first-child) > :not(i),
.article h2:has(> i:first-child) > :not(i) {
    grid-column: 2;
}

/*
 * Значок выровнен по строке заголовка, а не по центру блока: с припиской
 * блок выше строки, и значок уезжал бы вниз, к границе между строками.
 */
.section-title > i:first-child,
.article h2 > i:first-child {
    display: flex;
    width: var(--title-icon-size);
    height: var(--line);
    align-items: center;
    justify-content: center;
    grid-row: 1 / -1;
    align-self: start;
}

/*
 * Размер задаётся здесь, а свои размеры значка снимаются: наборы иконок
 * проставляют их атрибутами, и значок вылезал бы за отведённое место.
 *
 * Цвет наследуется от currentColor, поэтому svg из набора красится
 * акцентом сам, без правки самого значка.
 */
.section-title > i:first-child > svg,
.section-title > i:first-child > img,
.article h2 > i:first-child > svg,
.article h2 > i:first-child > img {
    display: block;
    width: var(--title-icon-size);
    height: var(--title-icon-size);
    color: var(--color-accent);
}