/*
 * Листинг блога (/blog/, /blog/news/, /blog/articles/) — доработки по ТЗ «Блог».
 * Подключается из news.php через AddHeadString, версия — filemtime.
 * Цвета, радиусы и поведение кнопок взяты из действующих компонентов сайта:
 * поиск — как в шапке (header-search.css), кнопки-пилюли — .section-btn листинга.
 */

/* --- П.4. Описание блога под H1 (текст из ИБ «Блог: настройки страниц») --- */
/* по левому краю во всю ширину контента, как и заголовок над ним (просьба заказчика 07.10.2026);
   шрифт и цвета — как у текстовых блоков сайта (.text-content1, тело статьи) */
.blog-intro {
    margin: 14px 0 0;
    font-family: "DIN Next CYR", sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: #756b6b;
    text-align: left;
}

.blog-intro p {
    margin: 0;
}

.blog-intro p + p {
    margin-top: 8px;
}

.blog-intro a {
    color: #8a675f;
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

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

/* --- П.6. Рубрики в ряду «Все / Новости / Статьи» --- */
/* группы разделены тонкой линией цвета рамки чипа; чипы разной высоты — по центру строки */
#blogFilter {
    position: relative;
    align-items: center;
}

.blog-filter__sep {
    align-self: stretch;
    width: 1px;
    margin: 6px 2px;
    background: #e0d6d3;
}

/* рубрики — той же формы, что разделы, но отличимы с первого взгляда (просьба заказчика): белые и компактнее,
   «#» перед названием — как у тегов в «Похожих работах» статьи, счётчик на сером; выбранная рубрика —
   бледно-жёлтая (цвет шапки статьи), а не коричневая, как выбранный раздел */
#blogFilter .section-btn.blog-filter__rubric {
    padding: 9px 18px;
    background: #fff;
    font-size: 15px;
}

#blogFilter .section-btn.blog-filter__rubric::before {
    content: "#";
    margin-right: 3px;
    color: #b1a19d;
}

#blogFilter .section-btn.blog-filter__rubric:hover {
    background: #fff;
    border-color: #8a675f;
}

#blogFilter .section-btn.blog-filter__rubric .section-count {
    background: #f0f0f0;
    color: #8a675f;
}

/* выбранная тема — жёлтый сайта #ffde00 (просьба заказчика 08.10.2026) */
#blogFilter .section-btn.blog-filter__rubric.active {
    background: #ffde00;
    border-color: #8a675f;
    color: #8a675f;
}

#blogFilter .section-btn.blog-filter__rubric.active::before {
    color: #8a675f;
}

#blogFilter .section-btn.blog-filter__rubric.active .section-count {
    background: rgba(255, 255, 255, 0.7);
}

/* --- П.7. Карточка статьи и пагинация --- */
/* чипы рубрик — прежняя метка .iblock-badge, теперь ссылка на листинг рубрики */
.blog-card__chips {
    position: relative;
    z-index: 2; /* над растянутой ссылкой карточки */
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

#blogGrid .blog-card__chip {
    margin: 0;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

#blogGrid .blog-card__chip:hover {
    background: #8a675f;
    color: #fff;
}

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

/* заголовок: как прежний .work-title, до трёх строк.
   position: static обязателен — на сайте у всех h2 position: relative, и тогда растянутая
   ссылка накрывала бы только заголовок, а клик по картинке и тексту никуда не вёл */
.blog-card__title {
    position: static;
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
    color: #8a675f;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: break-word;
}

.blog-card__link {
    color: inherit;
    text-decoration: none;
}

/* вся карточка — одна ссылка на статью */
.blog-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog-card__link:focus-visible {
    outline: none;
}

#blogGrid .work-item:focus-within {
    outline: 2px solid #8a675f;
    outline-offset: 4px;
    border-radius: 8px;
}

/* краткий анонс: между названием и датой, цвет текстовых блоков сайта */
.blog-card__announce {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: #756b6b;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

/* дата и просмотры прижаты к низу карточки — в ряду строки на одной высоте */
.blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    line-height: 1.4;
    color: #999;
}

.blog-card__views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    white-space: nowrap;
}

.blog-card__views svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.blog-card__byline {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #b1a19d;
}

.blog-card__byline > span + span::before {
    content: "·";
    margin: 0 6px;
}

/* пагинация: вид и состояния — из .pagenav-box (style.css), здесь только отступ */
.blog-pager-wrap:empty {
    display: none;
}

.blog-pager {
    margin: 10px 0 30px;
}

/* в каталоге номера прижаты влево (рядом кнопка «Показать ещё»), в блоге — по центру под сеткой */
.pagenav-box.blog-pager .pages-inner-wrap {
    justify-content: center;
}

.blog-pager__gap {
    pointer-events: none;
}

#blogFilter {
    scroll-margin-top: 20px; /* к ряду фильтра прокручиваем после перехода по страницам */
}

/* --- П.3. Поиск по блогу --- */
/* под рядом разделов и рубрик, над карточками (просьба заказчика 07.10.2026); сверху отступ даёт ряд кнопок
   (margin 30px), снизу — свой. На десктопе поле по центру уже сетки; на планшете и телефоне — по краям карточек */
.blog-search {
    position: relative;
    max-width: 760px;
    margin: 0 auto 30px;
    padding: 0 20px;
}

.blog-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.blog-search__input {
    width: 100%;
    height: 48px;
    padding: 0 96px 0 18px;
    border: 1px solid #8a675f;
    border-radius: 14px;
    background: #fafafc;
    color: #333;
    font-family: "DIN Next CYR", sans-serif;
    font-size: 16px;
    line-height: 48px;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow 0.2s ease;
}

/* пустое поле: кнопки «очистить» нет, место справа нужно только под лупу */
.blog-search__input:placeholder-shown {
    padding-right: 56px;
}

.blog-search__input::-webkit-search-cancel-button,
.blog-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.blog-search__input:focus {
    box-shadow: 0 0 0 1px #8a675f;
}

.blog-search__submit,
.blog-search__clear {
    position: absolute;
    top: 4px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #8a675f;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.blog-search__submit {
    right: 27px;
}

.blog-search__clear {
    right: 69px;
}

.blog-search__clear[hidden] {
    display: none;
}

.blog-search__submit:hover,
.blog-search__submit:active,
.blog-search__clear:hover,
.blog-search__clear:active {
    background: var(--color-att-yellow, #ffde00);
}

.blog-search__submit:focus-visible,
.blog-search__clear:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 1px;
}

.blog-search__submit svg,
.blog-search__clear svg {
    width: 20px;
    height: 20px;
    display: block;
}

.blog-search-status {
    margin: 0 20px 24px;
    text-align: center;
    color: #8a675f;
    font-size: 16px;
    line-height: 1.4;
}

.blog-search-status:empty {
    display: none;
}

#blogGrid[aria-busy="true"] {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.blog-search-empty {
    width: 100%;
    max-width: 560px;
    padding: 40px 20px;
    text-align: center;
    color: #b1a19f;
    font-size: 17px;
    line-height: 1.45;
}

.blog-search-empty__title {
    margin: 0 0 10px;
    color: #8a675f;
    font-size: 22px;
    font-weight: 500;
}

.blog-search-empty__text {
    margin: 0 0 22px;
}

@media (max-width: 1023px) {
    /* на телефоне текст описания целиком, без обрезки и «читать ещё» */
    .blog-intro {
        margin-top: 10px;
        font-size: 15px;
    }

    #blogFilter {
        scroll-margin-top: 117px; /* мобильная шапка фиксированная: 105px + зазор */
    }

    /* на планшете и телефоне поле во всю ширину контента — края совпадают с сеткой карточек */
    .blog-search {
        max-width: none;
        margin: 0 0 20px;
        padding: 0;
    }

    .blog-search__submit {
        right: 7px;
    }

    .blog-search__clear {
        right: 49px;
    }

    .blog-search-empty {
        padding: 24px 0;
        font-size: 15px;
    }

    .blog-search-empty__title {
        font-size: 19px;
    }
}

/* SEO-текст раздела — последний блок перед подвалом (под подпиской) */
.tile-title1 {
    margin-bottom: 60px;
}

@media (max-width: 1023px) {
    .tile-title1 {
        margin-bottom: 40px;
    }
}

/* --- Шапка листинга по макету заказчика (08.10.2026): заголовок и описание; ниже строка — разделы вкладками слева,
   поиск справа (на уровне вкладок), под ней темы («Все темы» + рубрики). Цвета, шрифты и метки — прежние, сайта --- */
.blog-head {
    margin-top: 20px;
}

/* nav#blogFilter (его HTML обновляет AJAX) раскладывается прямо в сетку строки: вкладки | поиск, ниже темы */
.blog-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
    grid-template-areas: "tabs search" "topics topics";
    column-gap: 32px;
    align-items: end;
    margin: 28px 0 24px;
    scroll-margin-top: 20px;
}

#blogFilter {
    display: contents;
}

/* общая линия под вкладками и поиском — на всю ширину строки (просьба заказчика 08.10.2026) */
.blog-bar::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: end;
    height: 1px;
    background: #e0d6d3;
}

.blog-bar .blog-search {
    grid-area: search;
    max-width: none;
    margin: 0 0 8px;
    padding: 0;
}

.blog-bar .blog-search__submit {
    right: 7px;
}

.blog-bar .blog-search__clear {
    right: 49px;
}

/* разделы — вкладки на общей линии, текущая подчёркнута */
.blog-tabs {
    grid-area: tabs;
    position: relative;
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scrollbar-width: none;
}

.blog-tabs::-webkit-scrollbar {
    display: none;
}

#blogFilter .blog-tabs .section-btn {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: 0;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: #756b6b;
    font-size: 18px;
    white-space: nowrap;
}

#blogFilter .blog-tabs .section-btn:hover {
    background: none;
    color: #8a675f;
    border-bottom-color: #e0d6d3;
}

#blogFilter .blog-tabs .section-btn.active {
    color: #8a675f;
    font-weight: 500;
    border-bottom-color: #8a675f;
}

#blogFilter .blog-tabs .section-btn:focus-visible {
    outline: 2px solid #8a675f;
    outline-offset: 2px;
}

#blogFilter .blog-tabs .section-count {
    background: #f0f0f0;
    color: #8a675f;
}

/* темы — метки-пилюли рубрик, переносятся строками; «Все темы» без «#» */
.blog-topics {
    grid-area: topics;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

#blogFilter .section-btn.blog-filter__all::before {
    content: none;
}

#blogFilter .blog-topics .section-btn.blog-filter__rubric {
    padding: 6px 14px;
    font-size: 14px;
}

#blogFilter .blog-topics .section-count {
    margin-left: 6px;
    padding: 1px 7px;
}

@media (max-width: 1023px) {
    .blog-bar {
        grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
        column-gap: 20px;
        margin: 20px 0;
        scroll-margin-top: 117px; /* мобильная шапка фиксированная: 105px + зазор */
    }

    .blog-tabs {
        gap: 22px;
    }

    #blogFilter .blog-tabs .section-btn {
        font-size: 16px;
    }

    #blogFilter .blog-topics .section-btn.blog-filter__rubric {
        padding: 5px 12px;
        font-size: 13px;
    }
}

/* телефон: поиск над вкладками во всю ширину */
@media (max-width: 767px) {
    .blog-bar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "search" "tabs" "topics";
    }

    .blog-bar .blog-search {
        margin: 0 0 18px;
    }

    /* на телефоне поиск над вкладками — линия только под вкладками */
    .blog-bar::before {
        display: none;
    }

    .blog-tabs {
        border-bottom: 1px solid #e0d6d3;
    }
}