/* Редакционная стилистика хедера /articles/ и облака направлений.
   Визуальный язык — как на странице статьи (article-editorial.css, .ed-page):
   Playfair-заголовок, mono-эйбрау с ember-точкой, тёплый paper-фон, ember-акцент.
   Токены — копия из .ed-page, локально на .news-list-page (без глобальной утечки). */
.news-list-page {
    --paper: #F6F6F3;
    --ink: #191B1F;
    --muted: #63666E;
    --faint: #8B8E95;
    --line: #E4E2DB;
    --ember: #ff6b35;
    --ember-ink: #e85520;
    --glow: rgba(255, 107, 53, .13);
    --display: 'Playfair Display', Georgia, serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    background: var(--paper);
}

/* --- Хедер-масштаб редакции: эйбрау + serif-заголовок + тонкая линия + ember-свечение --- */
.news-list-page .news-section-header {
    padding: 52px 0 22px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 26px;
    position: relative;
    overflow: hidden;
}
.news-list-page .news-section-header::before {
    content: "";
    position: absolute;
    top: -150px;
    left: 6%;
    width: 520px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 66%);
    pointer-events: none;
    z-index: 0;
}
.news-section-header__eyebrow {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ember-ink);
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
}
.news-section-header__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ember);
    flex: none;
}
.news-list-page .news-section-header__title {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(30px, 5vw, 46px);
    letter-spacing: -.01em;
    line-height: 1.1;
    color: var(--ink);
    text-transform: none;
    margin: 0;
}

/* --- Облако направлений — утончённые пилюли в духе .ed-tag --- */
.article-directions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0 0 30px;
}
.article-directions__item {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.2;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    transition: border-color .16s, color .16s, background .16s;
}
.article-directions__item:hover {
    border-color: var(--ember);
    color: var(--ember-ink);
}
.article-directions__item.is-active {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}
/* Пустое направление (видно только сотрудникам) — «скоро появятся». */
.article-directions__item--empty {
    border-style: dashed;
    color: var(--faint);
    background: transparent;
}
.article-directions__item--empty.is-active {
    color: #fff;
}
.article-directions__item:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

/* --- Интро-абзац (тег-страницы): описательный текст под H1 против «пустоты» --- */
.list-intro {
    max-width: 720px;
    margin: -12px 0 26px;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: var(--muted);
}

/* --- Облако тегов над списком — компактнее направлений, тот же язык --- */
.article-tags-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: -14px 0 30px;
}
.article-tags-cloud__label {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--faint);
    margin-right: 2px;
}
.article-tags-cloud__item {
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.2;
    color: var(--muted);
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: border-color .16s, color .16s, background .16s;
}
.article-tags-cloud__item:hover {
    border-color: var(--ember);
    color: var(--ember-ink);
}
.article-tags-cloud__item.is-active {
    background: var(--ember);
    border-color: var(--ember);
    color: #fff;
}
.article-tags-cloud__item:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 2px;
}

/* --- Нижний SEO-текст раздела --- */
.list-seo-text--bottom {
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 10px;
    color: var(--muted);
    font-family: var(--sans);
}

@media (max-width: 768px) {
    .news-list-page .news-section-header { padding: 36px 0 18px; }
    .news-list-page .news-section-header__title { font-size: clamp(26px, 8vw, 34px); }
    /* Облако тегов — одна прокручиваемая строка, а не 2 ряда (иначе карточки
       статей уходят под фолд на мобиле). */
    .article-tags-cloud {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: -8px 0 22px;
    }
    .article-tags-cloud::-webkit-scrollbar { display: none; }
    .article-tags-cloud__item { flex: 0 0 auto; }
}