/*
 * Страница материала (статья, новость, блог, «О нас», конференция) - приведена
 * к оформлению сайта 21.08.2026. Макета страницы материала в Figma нет, поэтому
 * вид собран по дизайн-системе: те же шрифт, кегли и цвета, что на остальных
 * переверстанных страницах.
 *
 * Было: заголовок 45px «Manrope Bold» с интерлиньяжем 54, текст 18px
 * «Manrope Light» БЕЗ интерлиньяжа и выключкой по формату - на узкой колонке
 * это давало рваные пробелы между словами.
 *
 * 🛑 `.article__text` носят и описания разделов, но у них есть модификатор
 * `--small` со своими правилами (`service-pages.css`). Здесь он исключён,
 * чтобы два блока не спорили за одни и те же свойства.
 */

/* ---------- Шапка материала ---------- */

.article__header h1 {
    margin: 0 0 var(--sp-12);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-article-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* Дата, время чтения, просмотры - одной строкой служебным серым. */
.article__indicators {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-16);
    margin: 0 0 var(--sp-16);
    color: var(--c-text-meta);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    line-height: 1.4;
}

.article__indicators .article__date,
.article__indicators .article_indicator_time,
.article__indicators .article_indicator_views {
    color: var(--c-text-meta);
    font-family: var(--font-main);
    font-size: var(--fs-12);
}

/* ---------- Текст материала ---------- */

.article__text:not(.article__text--small) {
    color: var(--c-text);
    font-family: var(--font-main);
    /* 16px, а не 14 как в лентах: это сплошной текст на чтение. */
    font-size: var(--fs-16);
    line-height: 1.6;
    /* 🛑 Выключку по формату снимаем: в колонке 700px она растягивала пробелы
       до дыр в половину слова. */
    text-align: left;
}

/*
 * ---------- Таблицы внутри текста материала (22.08.2026) ----------
 *
 * 🛑 Таблицы в теле материалов шире колонки телефона, и страница едет вбок.
 * Замер по базе: `<table` встречается в 4186 материалах - то есть это не
 * частный случай страницы радио, где нашлось (таблица 680px при экране 375), а
 * общая беда всех статей с расписаниями и сравнениями.
 *
 * Разметку материалов не трогаем (обернуть таблицу в прокручиваемый div в
 * четырёх тысячах записей нельзя), поэтому прокрутку берёт на себя сама
 * таблица: `display: block` делает её обычным блоком с горизонтальной
 * прокруткой, ячейки внутри продолжают вести себя таблично.
 *
 * `min-width: 0` у самого текста обязателен: колонка сетки по умолчанию
 * `min-width: auto`, то есть растягивается под содержимое, и `overflow-x`
 * внутри неё не срабатывает вовсе - та же грабля, что была на странице намаза.
 */
.article__text {
    min-width: 0;
}

.article__text table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/*
 * 🛑 Длинная строка без пробелов растягивает страницу так же, как таблица, и
 * поймать её труднее: элемента шире экрана в разметке НЕТ, разъезжается сам
 * абзац (замер: `scrollWidth` 511 при колонке 335). Так ведут себя формулы
 * («2+60+40+1+30+...=786.»), адреса ссылок текстом и длинные слова.
 * `break-word` переносит только то, что иначе не помещается, - обычный текст
 * он не трогает. Найдено 23.08.2026 на материале про нумерологию абджад.
 */
.article__text {
    overflow-wrap: break-word;
}

.article__text:not(.article__text--small) p {
    margin: 0 0 var(--sp-16);
}

.article__text:not(.article__text--small) p:last-child {
    margin-bottom: 0;
}

.article__text:not(.article__text--small) h2,
.article__text:not(.article__text--small) h3 {
    margin: var(--sp-25) 0 var(--sp-8);
    color: var(--c-text);
    font-family: var(--font-main);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.article__text:not(.article__text--small) h2 {
    font-size: var(--fs-feed-title-big);
}

.article__text:not(.article__text--small) h3 {
    font-size: var(--fs-feed-title);
}

.article__text:not(.article__text--small) a {
    color: var(--c-accent);
}

.article__text:not(.article__text--small) blockquote {
    margin: var(--sp-20) 0;
    padding: var(--sp-12) var(--sp-16);
    border-left: 2px solid var(--c-sand);
    background: var(--c-surface);
    font-size: var(--fs-14);
}

.article__text:not(.article__text--small) img {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-6);
}

.article__text:not(.article__text--small) ul,
.article__text:not(.article__text--small) ol {
    margin: 0 0 var(--sp-16);
    padding-left: var(--sp-20);
}

.article__text:not(.article__text--small) li {
    margin-bottom: var(--sp-5);
}

/*
 * ---------- Низ материала: подсказка, баннер, соцсети ----------
 *
 * Шаг между блоками один - 20px (просьба Дмитрия 21.08.2026, до этого было
 * вперемешку 15, 5 и отступы браузера). Свои `style="margin-top: 15px"` у
 * подсказки убраны из шести шаблонов, инлайновый `<style>` блока соцсетей -
 * из `Common/socialShare.html.twig`.
 *
 * 🛑 Подсказка про Ctrl+Enter лежала в `div.article__tags__items` - в том же
 * классе, что список тегов, хотя это обычная строка текста. Ей дан свой класс
 * `article__note`, иначе она получала раскладку пилюль (flex).
 */
.article__note {
    margin: var(--sp-20) 0 0;
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    line-height: 1.4;
}

.article .baner {
    margin: var(--sp-20) 0 0;
}

.article .baner img {
    max-width: 100%;
    height: auto;
}

/* 🛑 Класс `.social` носит и блок в подвале, а его стили лежат инлайновым
   `<style>` В ТЕЛЕ страницы - то есть ниже наших по документу. При равной
   специфичности выигрывали они (`.social { margin: 0 }` съедал отбивку,
   `.social img { height: 90px }` - размер). Поэтому селекторы здесь двойные:
   `.social.social--share`. */
.social.social--share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: var(--sp-20) 0 0;
    padding: 0;
    list-style: none;
}

.social.social--share a {
    display: block;
    line-height: 0;
}

/* Было 40×40, потом 32 - остановились на 25 (просьба Дмитрия 21.08.2026). */
.social.social--share img {
    width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
}

.social.social--share .small-icon {
    width: auto;
    height: 25px;
}

/* Блок «Читайте также» отбиваем тем же шагом, что и остальные. */
.b-related_articles {
    margin-top: var(--sp-30);
}

/* ---------- Теги под материалом ---------- */

.article__tags__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: var(--sp-20) 0 0;
    padding: 0;
    list-style: none;
}

.article__tags__items li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.article__tags__items li::before {
    content: none;
}

.article__tags__items a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 30px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1;
    text-decoration: none;
}

.article__tags__items a:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}