/*
 * Обвязка лент: заголовок секции, ссылка-действие, кнопка «показать все»,
 * пилюли рубрик.
 *
 * Снято с макета Figma (Fhm9rBfdGGsbSq9FIakt2v) 18.08.2026:
 *   0:2800  заголовок «Рубрики» - Golos DemiBold 20px
 *   0:2824  заголовок «Фото дня» - тот же DemiBold, 18px
 *   0:2827  ссылка «Все фотоматериалы» - 12px, фирменный оранжевый
 *   0:2699  кнопка «Все новости» - ПУНКТИРНАЯ рамка #ecd4c4, r=4, высота 36,
 *           текст 14px по центру, на всю ширину колонки
 *   0:2801  пилюля активная - заливка #ffe3b0 без рамки
 *   0:2804  пилюля обычная - белая, рамка #e1e1e1, r=4, высота 36, текст 14px
 *
 * 🛑 Локальный сброс обязателен: блок живёт на страницах старой вёрстки, где
 * общий base.css не подключён.
 */

.it-feed,
.it-feed * {
    box-sizing: border-box;
}

.it-feed {
    font-family: var(--font-main);
}

/* «Новости» (25.09.2026) - светлый фон отделяет свежие материалы от соседних
   блоков без подложки («Самое читаемое» ниже, лента рубрик выше на десктопе):
   разница видна сразу, не только по заголовку. Тот же нейтральный тон, что у
   мобильной шапки (`--c-sand-light`) - не спорит с ярким «Благородным
   Куръаном» (`--c-sand-bg`), с которым иначе рядом стоял бы на странице. */
.it-news {
    background: var(--c-sand-light);
    border-radius: 8px;
    padding: var(--sp-16);
}

/* 🛑 Только ДЕСКТОП. Отступ до статьи дня даёт `.it-lead::after` (margin
   20px), а после «Новости» до «Самое читаемое» - ничем не задан: левая
   колонка вне грида, её дети идут обычным потоком, и `row-gap` сетки
   `.content` тут не участвует (тот gap - между КОЛОНКАМИ, а не внутри одной).
   Без правила отступ после блока был 0px при 20px перед ним - замечено
   Дмитрием визуально. На мобильной ничего не добавляем: там расстояние между
   всеми блоками колонки уже задаёт `gap: var(--gap-mobile)` в
   legacy-bridge.css, свой margin сложился бы с ним и дал двойной отступ. */
@media (min-width: 1000px) {
    .it-news {
        margin-bottom: var(--sp-20);
    }
}

/* ---------- Шапка секции: заголовок слева, действие справа ---------- */

/* Действие справа стоит по ВЕРХНЕМУ краю заголовка, а не по его базовой
   линии: кегли разные (18 и 12), по базовой ссылка съезжала вниз. */
.it-feed__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-12);
    margin: 0 0 var(--sp-7);
}

.it-feed__title {
    margin: 0;
    color: var(--c-text-black);
    font-size: var(--fs-feed-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

.it-feed__title--big {
    font-size: var(--fs-feed-title-big);
}

/* «Все фотоматериалы», «Все вопросы» - действие рядом с заголовком */
.it-feed__action {
    flex-shrink: 0;
    color: var(--c-accent);
    font-size: var(--fs-feed-action);
    text-decoration: none;
}

.it-feed__action:hover {
    text-decoration: underline;
}

/* ---------- Кнопка «показать все» под лентой ---------- */

/* 🛑 `box-sizing` задаём прямо здесь, а не полагаемся на сброс `.it-feed *`:
   под лентой рубрик кнопка лежит в `.it-rubrics`, вне `.it-feed`, и там
   доставался `content-box` из старого `main.css` - к 100% ширины прибавлялись
   поля, кнопка вылезала из колонки на 34px и была выше на 18. */
.it-more {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    margin-top: var(--sp-20);
    padding: var(--sp-8) var(--sp-16);
    border: 1px dashed var(--c-sand);
    border-radius: var(--r-4);
    background: transparent;
    color: var(--c-text-black);
    /* не inherit: кнопка может стоять и вне блока с заданным шрифтом */
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.it-more:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

/*
 * ---------- Пилюли рубрик ----------
 * В макете это фильтр над центральной лентой. Верстаются как элемент
 * дизайн-системы: на живой главной такого фильтра сейчас нет ни в данных,
 * ни в поведении - подключать его отдельным решением.
 */

.it-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-10);
    /* До первой карточки ленты - в макете между нижним рядом пилюль и
       карточкой 31px */
    margin: 0 0 var(--sp-30);
    padding: 0;
    list-style: none;
}

.it-chips > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-chips > li::before {
    content: none;
}

.it-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--sp-20);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    color: var(--c-text-black);
    /* не inherit: на странице старой вёрстки это дало бы Manrope */
    font-family: var(--font-main);
    font-size: var(--fs-chip);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.it-chip:not(.it-chip--active):hover {
    border-color: var(--c-brown);
}

/* Активная - заливка песочным #ffe3b0, рамки нет. Цвет снят пипеткой с узла
   макета 4030:134: заливка ровно #ffe3b0, по краю пилюли рамки не видно. */
.it-chip--active,
.it-chip[aria-current] {
    border-color: transparent;
    background: var(--c-sand-bg);
}

/* Пока идёт запрос за лентой выбранной рубрики, блок приглушается: htmx на
   время запроса вешает класс htmx-request на элемент из hx-indicator (у нас
   это сам блок). Без такой отметки нажатие выглядит как «ничего не
   произошло» - лента подменяется молча и не сразу. */
.it-rubrics {
    transition: opacity 120ms ease;
}

/* Отбивка заголовка - только у «Рубрик»: общая для лент 7px, здесь 15px
   (решение Дмитрия 19.08.2026). Остальные секции не задеваем. */
.it-rubrics .it-feed__head {
    margin-bottom: var(--sp-15);
}

.it-rubrics.htmx-request {
    opacity: .5;
}

/* Пустая рубрика - на случай, если все её материалы сняли с публикации */
.it-feed__empty {
    margin: 0;
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-16);
}

/* 🛑 Десктопного блока здесь больше нет. В нём лежало ровно одно правило -
   тот же кегль 20px для --big, что и в базовом правиле выше, то есть оно
   ничего не меняло. Кегль обычного заголовка теперь плавный (--fs-feed-title),
   ступеньки на пороге десктопа не осталось. */