/*
 * Страница статьи блога (/blog/articles/<код>/) — доработки по ТЗ «Статья».
 * Подключается из detail.php через AddHeadString, версия — filemtime.
 * Раскладка — по примеру заказчика: сверху карточка-шапка (слева заголовок, рубрики, дата, вводный текст и кнопка
 * консультации, справа картинка), ниже две колонки: слева «Содержание», справа текст, оценка и автор.
 * Края шапки, колонок и блока «Похожие работы» совпадают.
 * Цвета и кнопки — из действующих компонентов сайта: фон шапки — градиент прежнего H1 статьи, кнопка — светлая .btn,
 * как в CTA-баннере листинга, чипы — пилюли листинга, карточка автора — как «Похожие работы», иконки — из подвала.
 */

/* --- Шапка статьи: заголовок (п.2), рубрики (п.3), дата (п.4), вводный текст и кнопка (п.6), картинка --- */
/* слева строки с текстом, справа картинка на всю высоту; пустые строки сверху и снизу держат текст по центру
   картинки, когда она выше текста */
.blog-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    grid-template-rows: 1fr auto auto auto auto auto 1fr;
    grid-template-areas:
        ".       media"
        "title   media"
        "rubrics media"
        "date    media"
        "intro   media"
        "cta     media"
        ".       media";
    column-gap: 48px;
    margin: 30px 0 40px;
    padding: 40px 48px;
    border-radius: 25px;
    background: linear-gradient(88deg, var(--color-att-yellow) -107.66%, #fee2ab 31.14%, #feecc2 150.09%);
}

/* без картинки — текст на всю ширину карточки */
.blog-article-hero--text {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "title" "rubrics" "date" "intro" "cta";
}

.blog-article-hero__title {
    grid-area: title;
    margin: 0 0 16px;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.2;
    text-align: left;
}

/* рубрики — чипы, ведут на листинг блога по рубрике; вид — как кнопки рубрик в листинге: белая пилюля, «#» перед названием */
.blog-article-rubrics {
    grid-area: rubrics;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.blog-article-rubrics li {
    margin: 0;
    padding: 0;
}

.blog-article-rubrics li::before {
    content: none;
}

.blog-article-rubrics__chip {
    display: inline-block;
    padding: 9px 18px;
    background: #fff;
    border: 2px solid #e0d6d3;
    border-radius: 25px;
    font-size: 15px;
    line-height: 1.2;
    color: #8a675f;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.blog-article-rubrics__chip::before {
    content: "#";
    margin-right: 3px;
    color: #b1a19d;
}

.blog-article-rubrics__chip:hover {
    border-color: #8a675f;
    color: #8a675f;
}

.blog-article-rubrics__chip:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
}

/* нажатие — цвета активного чипа листинга */
.blog-article-rubrics__chip:active {
    background: #8a675f;
    border-color: #8a675f;
    color: #fff;
}

.blog-article-rubrics__chip:active::before {
    color: #fff;
}

/* дата — «Дата публикации: 23 июня 2026»; на жёлтой карточке — цветом сайта вместо серого */
.blog-article-date {
    grid-area: date;
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.3;
    color: #8a675f;
}

/* вводный текст статьи (поле «Особенности») */
.blog-article-hero__intro {
    grid-area: intro;
    font-size: 17px;
    line-height: 1.5;
    color: #545454;
}

.blog-article-hero__intro p {
    margin: 0 0 10px;
}

.blog-article-hero__intro > :last-child {
    margin-bottom: 0;
}

/* кнопка консультации: светлая .btn сайта высотой 56px; текст до 40 символов переносится, а не обрезается */
.blog-article-hero__cta {
    grid-area: cta;
    margin-top: 24px;
}

.blog-article-hero__cta .btn {
    height: auto;
    min-height: 56px;
    padding: 12px 32px;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
}

/* в reset.css у кнопок outline: none — фокус с клавиатуры показываем сами */
.blog-article-hero__cta .btn:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
}

/* картинка — прежняя галерея статьи (увеличение по клику), со скруглением карточки */
.blog-article-hero__media {
    grid-area: media;
    align-self: center;
}

.blog-article-hero__media .gallery-main__slider {
    max-width: none;
    margin: 0;
    border-radius: 20px;
    box-shadow: none;
}

.blog-article-hero__media .gallery-main__image {
    border-radius: 20px;
    box-shadow: none;
}

.blog-article-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* --- Тело: слева «Содержание» (п.8), справа текст, оценка с «Поделиться» (п.7) и автор (п.5) --- */
.blog-article-body {
    margin-bottom: 30px;
}

.blog-article-main {
    min-width: 0;
}

/* без «Содержания» текст — колонкой читаемой ширины по центру */
.blog-article-body:not(.has-toc) .blog-article-main {
    max-width: 860px;
    margin: 0 auto;
}

/* переход по пункту содержания: заголовок не уходит под закреплённую мобильную шапку (105px) */
.blog-article-body__text h2[id],
.blog-article-body__text h3[id] {
    scroll-margin-top: 120px;
}

/* «Содержание» — карточка на светлом фоне со скруглением, как у шапки; пункты пронумерованы */
.blog-article-toc {
    margin: 0 0 24px;
}

.blog-article-toc__box {
    border-radius: 25px;
    background: #f9f6f5;
}

.blog-article-toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px 28px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    color: #8a675f;
    cursor: pointer;
    list-style: none;
}

.blog-article-toc__title::-webkit-details-marker {
    display: none;
}

/* стрелка аккордеона: вниз — свёрнут, вверх — раскрыт */
.blog-article-toc__title::after {
    content: "";
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    margin-top: -4px;
    border-right: 2px solid #8a675f;
    border-bottom: 2px solid #8a675f;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.blog-article-toc__box[open] .blog-article-toc__title {
    padding-bottom: 12px;
}

.blog-article-toc__box[open] .blog-article-toc__title::after {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.blog-article-toc__title:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: -2px;
    border-radius: 25px;
}

.blog-article-toc__list {
    margin: 0;
    padding: 0 28px 24px;
    list-style: none;
    counter-reset: toc;
}

.blog-article-toc__list li {
    margin: 0;
    padding: 0;
    counter-increment: toc;
}

/* в style.css у пунктов ol с десятого — номер «10.» через ::before; здесь номера свои, у ссылки */
.blog-article-toc .blog-article-toc__list li::before {
    content: none;
    display: none;
}

/* длинные названия переносятся целиком, без троеточия */
.blog-article-toc__link {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    font-size: 15px;
    line-height: 1.35;
    color: #545454;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.blog-article-toc__link::before {
    content: counter(toc) ".";
    flex-shrink: 0;
    min-width: 22px;
    color: #8a675f;
}

.blog-article-toc__link:hover {
    color: #8a675f;
}

.blog-article-toc__link:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
    border-radius: 2px;
}

/* текущий раздел */
.blog-article-toc__link.is-active {
    color: #8a675f;
    font-weight: 500;
}

/* --- П.9. Текст статьи: подписи к картинкам, плашка «Важно», ссылки --- */
/* подпись — из поля «Заголовок» картинки в редакторе: курсивом и мельче текста, по центру под картинкой */
.blog-figure {
    margin: 0;
}

.blog-figure--inline {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    text-align: center;
}

.blog-figure__caption {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.4;
    font-style: italic;
    color: #756b6b;
    text-align: center;
}

/* плашка «Важно» — стиль визуального редактора (класс blog-important): фон в тон шапки статьи, полоса и значок «!»
   цветом сайта — отличается и от обычного абзаца, и от цитаты */
.blog-important {
    position: relative;
    margin: 24px 0;
    padding: 18px 22px 18px 62px;
    border-left: 4px solid #8a675f;
    border-radius: 0 16px 16px 0;
    background: #fff4d6;
    font-size: clamp(15px, 2.5vw, 18px);
    line-height: 1.5;
    color: #545454;
    text-align: left;
}

.blog-important::before {
    content: "!";
    position: absolute;
    top: 16px;
    left: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #8a675f;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 28px;
    text-align: center;
}

/* ссылки в тексте — цветом сайта с подчёркиванием (в старых статьях часть ссылок была без подчёркивания) */
.blog-article-body__text a {
    color: #8a675f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-article-body__text a:hover {
    text-decoration: none;
}

.blog-article-body__text a:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- П.10. Мнение эксперта: [эксперт код]…[/эксперт] в тексте, данные — справочник «Блог: эксперты» --- */
/* карточка — как «Содержание» (светлый фон, радиус 25px), кавычка в углу; сверху эксперт, под линией — его мнение.
   Без фото — инициалы в кружке, как у карточки автора; высота не фиксирована */
.blog-expert {
    position: relative;
    margin: 28px 0;
    padding: 24px 28px;
    border-radius: 25px;
    background: #f9f6f5;
}

.blog-expert::before {
    content: "\201C";
    position: absolute;
    top: 10px;
    right: 26px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 80px;
    line-height: 1;
    color: #e0d6d3;
    pointer-events: none;
}

.blog-expert__person {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0 60px 16px 0;
    border-bottom: 1px solid #e0d6d3;
}

.blog-expert__photo {
    flex: 0 0 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border: 2px solid #e0d6d3;
    border-radius: 50%;
    background: #fff;
}

.blog-expert__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-expert__photo--initials {
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: #8a675f;
}

.blog-expert__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.blog-expert__label {
    font-size: 13px;
    line-height: 1.3;
    color: #999;
}

.blog-expert__name,
.blog-article-body__text a.blog-expert__name {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
    color: #8a675f;
    text-decoration: none;
}

.blog-article-body__text a.blog-expert__name:hover {
    text-decoration: underline;
}

.blog-expert__position {
    font-size: 14px;
    line-height: 1.35;
    color: #756b6b;
}

.blog-expert__text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(15px, 2.5vw, 18px);
    line-height: 1.55;
    color: #545454;
    text-align: left;
}

.blog-expert__text p {
    margin: 0 0 10px;
}

.blog-expert__text > :last-child {
    margin-bottom: 0;
}

/* --- П.11. Вопросы и ответы: раздел «Вопросы…» из текста статьи — аккордеоном на <details> --- */
/* вид — как у «Содержания» (второй аккордеон на странице): светлые карточки со скруглением и та же стрелка;
   ответ — кеглем и цветом текста статьи (.tex сайта), вопрос — того же кегля, плотнее и темнее.
   Ответы свёрнуты только визуально — их текст остаётся в HTML страницы */
.blog-faq {
    margin: 40px 0;
}

.blog-faq__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-faq__item {
    border-radius: 25px;
    background: #f9f6f5;
}

.blog-faq__question {
    position: relative;
    display: block;
    padding: 20px 64px 20px 28px;
    border-radius: 25px;
    font-size: clamp(16px, 2.5vw, 20px);
    line-height: 1.4;
    font-weight: 500;
    color: #545454;
    text-align: left;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s ease;
}

.blog-faq__question::-webkit-details-marker {
    display: none;
}

/* стрелка: вниз — ответ свёрнут, вверх — раскрыт */
.blog-faq__question::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    right: 30px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #8a675f;
    border-bottom: 2px solid #8a675f;
    transform: rotate(45deg);
    transition: transform 0.2s ease, top 0.2s ease;
}

.blog-faq__question:hover,
.blog-faq__item[open] > .blog-faq__question {
    color: #8a675f;
}

.blog-faq__item[open] > .blog-faq__question::after {
    top: calc(50% - 2px);
    transform: rotate(-135deg);
}

.blog-faq__question:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: -2px;
}

.blog-faq__answer {
    padding: 0 28px 22px;
    font-size: clamp(14px, 2.5vw, 20px);
    line-height: 1.55;
    color: #756b6b;
    text-align: left;
}

.blog-faq__answer p {
    margin: 0 0 10px;
}

.blog-faq__answer > :last-child {
    margin-bottom: 0;
}

/* --- П.7. «Оцените статью» и «Поделиться»: одна строка под текстом, рейтинг слева, иконки справа --- */
/* по ширине колонки текста, как карточка автора под ней; сверху и снизу — линия цвета рамки чипов */
.blog-article-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 32px;
    margin: 30px 0;
    padding: 18px 0;
    border-top: 1px solid #e0d6d3;
    border-bottom: 1px solid #e0d6d3;
}

/* оценка — строка «заголовок, звёзды, средняя», под ней ответ на голос; ответ не растягивает блок на всю ширину */
.blog-article-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.blog-article-rating__main,
.blog-article-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
}

.blog-article-rating__title,
.blog-article-share__title {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 500;
    color: #8a675f;
}

/* звёзды — цвета сайта: заливка жёлтая с коричневым контуром (как значок «Отзывы» в шапке), пустые — цвета чипа */
.blog-article-rating__stars {
    display: inline-flex;
    gap: 2px;
}

.blog-article-rating__star {
    width: 34px;
    height: 34px;
    padding: 3px;
    border: 0;
    border-radius: 6px;
    background: none;
}

.blog-article-rating__star svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #f0f0f0;
    stroke: #e0d6d3;
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.blog-article-rating__star.is-filled svg {
    fill: var(--color-att-yellow, #ffde00);
    stroke: #8a675f;
}

/* наведение — какую оценку поставит клик: звёзды до курсора подсвечены, остальные пустые */
.blog-article-rating.is-hovering .blog-article-rating__star svg {
    fill: #f0f0f0;
    stroke: #e0d6d3;
}

.blog-article-rating.is-hovering .blog-article-rating__star.is-hover svg {
    fill: var(--clr-att-hover, #ffe21d);
    stroke: #8a675f;
}

.blog-article-rating__star:active svg {
    transform: scale(0.9);
}

.blog-article-rating__star:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 1px;
}

.blog-article-rating__star:disabled {
    cursor: default;
}

.blog-article-rating__summary {
    font-size: 16px;
    color: #999;
}

.blog-article-rating__summary:empty,
.blog-article-rating__note:empty {
    display: none;
}

/* ответ на голос — цвета успеха и ошибки форм сайта */
.blog-article-rating__note {
    font-size: 14px;
    line-height: 1.35;
    color: #70958c;
}

.blog-article-rating__note[data-state="error"] {
    color: #c35c74;
}

.blog-article-share {
    position: relative;
}

.blog-article-share__list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-article-share__list li {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}

.blog-article-share__list li::before {
    content: none;
}

/* иконки — те же, что в подвале сайта; «Копировать ссылку» — в цветах чипа рубрики */
.blog-article-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-article-share__btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-share__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(34, 60, 80, 0.18);
}

.blog-article-share__btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.blog-article-share__btn:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
}

.blog-article-share__btn--copy {
    border: 2px solid #e0d6d3;
    background: #f0f0f0;
    color: #8a675f;
}

.blog-article-share__btn--copy:hover {
    border-color: #8a675f;
}

.blog-article-share__btn--copy svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* «Ссылка скопирована» — короткая плашка под иконками */
.blog-article-share__status {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 2;
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 14px;
    background: #8a675f;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.blog-article-share__status.is-visible {
    opacity: 1;
}

/* --- П.5. Автор статьи: карточка под оценкой, в правой колонке --- */
/* вид — как у блока «Похожие работы» (белый фон, радиус 25px, та же тень); аватар без фото — инициалы в цветах чипа */
.blog-article-author {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 24px 30px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 8px 9px 21px -2px rgba(34, 60, 80, 0.18);
}

.blog-article-author__photo {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid #e0d6d3;
    border-radius: 50%;
    background: #f0f0f0;
    font-size: 26px;
    font-weight: 500;
    line-height: 1;
    color: #8a675f;
}

.blog-article-author__photo picture,
.blog-article-author__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-article-author__info {
    min-width: 0;
}

.blog-article-author__label {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.3;
    color: #999;
}

.blog-article-author__name {
    margin: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 500;
    color: #8a675f;
}

.blog-article-author__position {
    margin: 4px 0 0;
    font-size: 16px;
    line-height: 1.35;
    color: #756b6b;
}

@media (min-width: 1024px) {
    .blog-article-body__text h2[id],
    .blog-article-body__text h3[id] {
        scroll-margin-top: 24px;
    }
}

/* десктоп: две колонки — «Содержание» слева (липкое, длинный список прокручивается внутри), справа текст */
@media (min-width: 1200px) {
    .blog-article-body.has-toc {
        display: grid;
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 48px;
        align-items: start;
    }

    .blog-article-aside {
        position: sticky;
        top: 24px;
    }

    .blog-article-aside .blog-article-toc {
        margin: 0;
    }

    .blog-article-aside .blog-article-toc__title {
        cursor: default;
    }

    .blog-article-aside .blog-article-toc__title::after {
        display: none;
    }

    .blog-article-aside .blog-article-toc__list {
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #e0d6d3 transparent;
    }
}

/* планшет и телефон: шапка в столбик — заголовок, рубрики, дата, картинка, вводный текст, кнопка */
@media (max-width: 899px) {
    .blog-article-hero,
    .blog-article-hero--text {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas: "title" "rubrics" "date" "media" "intro" "cta";
        margin: 16px 0 24px;
        padding: 28px 24px;
    }

    .blog-article-hero__media {
        margin: 4px 0 18px;
    }
}

@media (max-width: 767px) {
    .blog-article-hero,
    .blog-article-hero--text {
        padding: 24px 20px;
    }

    .blog-article-hero__title {
        font-size: clamp(24px, 6.4vw, 30px);
    }

    .blog-article-rubrics {
        gap: 8px;
    }

    .blog-article-rubrics__chip {
        padding: 6px 14px;
        font-size: 14px;
    }

    .blog-article-date {
        font-size: 15px;
    }

    .blog-article-hero__intro {
        font-size: 16px;
    }

    .blog-article-hero__cta .btn {
        width: 100%;
    }

    .blog-article-toc__title {
        padding: 18px 20px;
        font-size: 20px;
    }

    .blog-article-toc__list {
        padding: 0 20px 20px;
    }

    .blog-important {
        padding: 16px 16px 16px 54px;
    }

    .blog-important::before {
        top: 14px;
        left: 14px;
    }

    .blog-figure__caption {
        font-size: 13px;
    }

    .blog-expert {
        padding: 20px;
        border-radius: 20px;
    }

    /* на узком экране кавычка отнимала место у имени и должности — убираем, строка эксперта на всю ширину */
    .blog-expert::before {
        display: none;
    }

    .blog-expert__person {
        padding-right: 0;
    }

    .blog-expert__photo {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
    }

    .blog-expert__photo--initials {
        font-size: 18px;
    }

    .blog-expert__name,
    .blog-article-body__text a.blog-expert__name {
        font-size: 17px;
    }

    .blog-faq {
        margin: 32px 0;
    }

    .blog-faq__list {
        gap: 10px;
    }

    .blog-faq__item,
    .blog-faq__question {
        border-radius: 20px;
    }

    .blog-faq__question {
        padding: 16px 52px 16px 20px;
    }

    .blog-faq__question::after {
        right: 24px;
    }

    .blog-faq__answer {
        padding: 0 20px 18px;
    }

    /* строка оценки и «Поделиться» — блоки друг под другом; иконки, если не влезут, прокручиваются внутри ленты */
    .blog-article-feedback {
        gap: 14px;
        margin: 24px 0;
    }

    .blog-article-share {
        max-width: 100%;
    }

    .blog-article-share__list {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 4px 2px;
    }

    .blog-article-share__list::-webkit-scrollbar {
        display: none;
    }

    .blog-article-share__status {
        right: auto;
        left: 0;
    }

    .blog-article-author {
        gap: 14px;
        padding: 18px 20px;
        border-radius: 20px;
    }

    .blog-article-author__photo {
        flex-basis: 64px;
        width: 64px;
        height: 64px;
        font-size: 21px;
    }

    .blog-article-author__name {
        font-size: 17px;
    }

    .blog-article-author__position {
        font-size: 14px;
    }
}