/*
 * Черника — блок 2.
 * Локальная изоляция от темы Newspaper по принципу первого блока.
 */

.chb2,
.chb2 *,
.chb2 *::before,
.chb2 *::after {
    all: revert;
    box-sizing: border-box;
}

.chb2 {
    --chb2-bg: #f4f3f0;
    --chb2-paper: #faf9f7;
    --chb2-wine: #741f35;
    --chb2-wine-dark: #4c1021;
    --chb2-text: #1d1d1d;
    --chb2-muted: #77736f;
    --chb2-line: #ddd9d5;
    --chb2-rank: #ad8b91;
    --chb2-serif: Georgia, "Times New Roman", serif;
    --chb2-sans: Arial, Helvetica, sans-serif;

    display: block;
    width: 100%;
    margin: 0;
    padding: 22px 0 40px;
    background: var(--chb2-bg);
    color: var(--chb2-text);
    font-family: var(--chb2-sans);
    font-size: 16px;
    line-height: 1.4;
    isolation: isolate;
}

.chb2 h2,
.chb2 h3,
.chb2 p,
.chb2 ol,
.chb2 li {
    margin: 0;
    padding: 0;
}

.chb2 a {
    color: inherit;
    text-decoration: none;
}

.chb2 a:hover {
    color: var(--chb2-wine);
    text-decoration: none;
}

.chb2 a:focus-visible,
.chb2 button:focus-visible {
    outline: 3px solid var(--chb2-wine);
    outline-offset: 4px;
}

.chb2 .chb2__container {
    width: min(1420px, calc(100% - 48px));
    margin: 0 auto;
}

.chb2 .chb2__layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(330px, 1fr);
    align-items: start;
    gap: 28px;
}

.chb2 .chb2__articles,
.chb2 .chb2__popular {
    min-width: 0;
}

/* ---------------- Заголовок левой колонки ---------------- */

.chb2 .chb2__articles-header {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 48px;
    margin: 0 0 16px;
}

.chb2 .chb2__heading {
    flex: 0 0 auto;
    margin: 0;
    color: var(--chb2-text);
    font-family: var(--chb2-serif);
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .015em;
    text-transform: uppercase;
}

.chb2 .chb2__header-line {
    display: block;
    flex: 1 1 auto;
    min-width: 12px;
    height: 1px;
    background: var(--chb2-line);
}

.chb2 .chb2__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--chb2-wine);
    font-family: var(--chb2-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.chb2 .chb2__all:hover {
    color: var(--chb2-wine-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------------- Сетка статей: 2 × 3 ---------------- */

.chb2 .chb2__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
}

.chb2 .chb2__card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.chb2 .chb2__media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 2px;
    background: #e6e2dd;
}

.chb2 .chb2__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center;
}

.chb2 .chb2__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #81776f;
    font-family: var(--chb2-serif);
    font-size: 28px;
    letter-spacing: .03em;
}

.chb2 .chb2__exclusive {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-block;
    padding: 6px 9px;
    border-radius: 2px;
    background: var(--chb2-wine);
    color: #fff;
    font-family: var(--chb2-sans);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.chb2 .chb2__card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding-top: 11px;
}

.chb2 .chb2__category {
    display: block;
    margin: 0 0 5px;
    color: var(--chb2-wine);
    font-family: var(--chb2-sans);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .065em;
    text-transform: uppercase;
}

.chb2 .chb2__card-title {
    margin: 0 0 8px;
    color: var(--chb2-text);
    font-family: var(--chb2-serif);
    font-size: clamp(20px, 1.65vw, 25px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.018em;
}

.chb2 .chb2__card-title a {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
}

.chb2 .chb2__card-title a:hover {
    color: var(--chb2-wine);
}

.chb2 .chb2__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 7px;
    color: var(--chb2-muted);
    font-family: var(--chb2-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.chb2 .chb2__card-body > .chb2__meta {
    margin-top: auto;
}

.chb2 .chb2__meta time,
.chb2 .chb2__meta span {
    color: inherit;
    font: inherit;
}

/* ---------------- Правая колонка ---------------- */

.chb2 .chb2__popular {
    display: block;
    padding: 22px 22px 8px;
    border: 1px solid var(--chb2-line);
    border-radius: 3px;
    background: var(--chb2-paper);
    box-shadow: none;
}

.chb2 .chb2__popular-heading {
    margin: 0;
    padding: 0 0 15px;
    border-bottom: 1px solid var(--chb2-line);
    color: var(--chb2-text);
    font-family: var(--chb2-serif);
    font-size: clamp(23px, 1.9vw, 29px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

/* Переключатели: минимум 46 px для удобного нажатия */

.chb2 .chb2__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 20px 0 10px;
}

.chb2 .chb2__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 10px 6px;
    border: 1px solid #e0dcd7;
    border-radius: 3px;
    appearance: none;
    background: #f0eeeb;
    color: var(--chb2-text);
    font-family: var(--chb2-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        border-color .15s ease;
}

.chb2 .chb2__tab:hover {
    border-color: var(--chb2-wine);
    color: var(--chb2-wine);
}

.chb2 .chb2__tab[aria-pressed="true"] {
    border-color: var(--chb2-wine);
    background: var(--chb2-wine);
    color: #fff;
}

.chb2 .chb2__panel {
    display: block;
    min-width: 0;
}

.chb2 .chb2__panel[aria-busy="true"] {
    cursor: progress;
}

/* ---------------- Рейтинг ---------------- */

.chb2 .chb2__ranking {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chb2 .chb2__rank-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    margin: 0;
    padding: 23px 0;
    border-bottom: 1px solid var(--chb2-line);
    list-style: none;
}

.chb2 .chb2__rank-item:last-child {
    border-bottom: 0;
}

.chb2 .chb2__rank-number {
    display: block;
    padding-top: 1px;
    color: var(--chb2-rank);
    font-family: var(--chb2-serif);
    font-size: 46px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
}

.chb2 .chb2__rank-content {
    display: block;
    min-width: 0;
}

.chb2 .chb2__rank-title {
    margin: 0 0 8px;
    color: var(--chb2-text);
    font-family: var(--chb2-serif);
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.015em;
}

.chb2 .chb2__rank-title a {
    display: block;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    word-break: normal;
    overflow-wrap: break-word;
}

.chb2 .chb2__rank-title a:hover {
    color: var(--chb2-wine);
}

.chb2 .chb2__empty {
    margin: 0;
    padding: 22px 0;
    color: var(--chb2-muted);
    font-family: var(--chb2-sans);
    font-size: 14px;
    line-height: 1.55;
}

.chb2 .chb2__note {
    margin: 0;
    padding: 10px 0 16px;
    color: var(--chb2-muted);
    font-family: var(--chb2-sans);
    font-size: 12px;
    line-height: 1.5;
}

.chb2 .chb2__retry {
    display: inline-block;
    min-height: 44px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--chb2-wine);
    border-radius: 3px;
    background: transparent;
    color: var(--chb2-wine);
    font-family: var(--chb2-sans);
    font-size: 14px;
    cursor: pointer;
}

/* ---------------- Планшеты ---------------- */

@media (max-width: 1180px) {
    .chb2 .chb2__layout {
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 22px;
    }

    .chb2 .chb2__popular {
        padding-right: 18px;
        padding-left: 18px;
    }

    .chb2 .chb2__rank-item {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
    }

    .chb2 .chb2__rank-number {
        font-size: 40px;
    }
}

@media (max-width: 1000px) {
    .chb2 .chb2__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .chb2 .chb2__popular {
        width: 100%;
        padding: 22px 24px 8px;
    }

    .chb2 .chb2__popular-heading {
        font-size: 27px;
    }

    .chb2 .chb2__rank-title {
        font-size: 22px;
    }

    .chb2 .chb2__rank-item {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 16px;
    }

    .chb2 .chb2__rank-number {
        font-size: 46px;
    }
}

/* ---------------- Смартфоны ---------------- */

@media (max-width: 600px) {
    .chb2 {
        padding: 20px 0 28px;
    }

    .chb2 .chb2__container {
        width: calc(100% - 24px);
    }

    .chb2 .chb2__articles-header {
        gap: 12px;
        margin-bottom: 14px;
    }

    .chb2 .chb2__heading {
        font-size: 31px;
    }

    .chb2 .chb2__all {
        gap: 5px;
        font-size: 14px;
    }

    .chb2 .chb2__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .chb2 .chb2__card-title {
        font-size: 23px;
        line-height: 1.18;
    }

    .chb2 .chb2__category {
        font-size: 11px;
    }

    .chb2 .chb2__meta {
        font-size: 14px;
    }

    .chb2 .chb2__popular {
        padding: 20px 16px 6px;
    }

    .chb2 .chb2__popular-heading {
        font-size: 25px;
    }

    .chb2 .chb2__tabs {
        gap: 8px;
        margin-top: 16px;
    }

    .chb2 .chb2__tab {
        min-height: 48px;
        font-size: 16px;
    }

    .chb2 .chb2__rank-item {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
        padding: 21px 0;
    }

    .chb2 .chb2__rank-number {
        font-size: 40px;
    }

    .chb2 .chb2__rank-title {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chb2 .chb2__tab {
        transition: none;
    }
}


/* ==========================================================
   БЛОК 2 — «САМОЕ ЧИТАЕМОЕ»: 10 публикаций
   Добавить ПОСЛЕ существующих правил и медиазапросов.
   Первый блок и карточки статей не изменяются.
   ========================================================== */

/* Правая колонка занимает доступную высоту строки сетки. */
.chb2 .chb2__popular {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    padding: 18px 20px 8px;
}

/* Заголовок раздела: вместо максимальных 29px — 22px. */
.chb2 .chb2__popular-heading {
    flex: 0 0 auto;
    margin: 0;
    padding-bottom: 12px;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Переключатели сохраняют удобную область нажатия. */
.chb2 .chb2__popular .chb2__tabs {
    flex: 0 0 auto;
    gap: 8px;
    margin: 14px 0 6px;
}

.chb2 .chb2__popular .chb2__tab {
    min-height: 44px;
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.2;
}

/* Панель и список заполняют свободное место под переключателями. */
.chb2 .chb2__popular .chb2__panel {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-width: 0;
}

.chb2 .chb2__popular .chb2__ranking {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Компактная строка рейтинга.
 * Свободная высота распределяется между позициями.
 * Длинный текст не обрезается и не накладывается на соседние строки.
 */
.chb2 .chb2__popular .chb2__rank-item {
    display: grid;
    flex: 1 0 auto;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--chb2-line);
}

.chb2 .chb2__popular .chb2__rank-item:last-child {
    border-bottom: 0;
}

/* Номера: вместо 46px — 34.5px, уменьшение на 25%. */
.chb2 .chb2__popular .chb2__rank-number {
    align-self: start;
    padding-top: 2px;
    font-size: 34.5px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.chb2 .chb2__popular .chb2__rank-content {
    min-width: 0;
}

/* Рубрики: компактнее, но сохраняется визуальная иерархия. */
.chb2 .chb2__popular .chb2__category {
    margin: 0 0 3px;
    font-size: 10px;
    line-height: 1.25;
    letter-spacing: 0.055em;
}

/* Заголовки публикаций: вместо максимальных 22px — 16.5px. */
.chb2 .chb2__popular .chb2__rank-title {
    margin: 0 0 5px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.chb2 .chb2__popular .chb2__rank-title a {
    display: block;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
}

.chb2 .chb2__popular .chb2__rank-title a:hover {
    color: var(--chb2-wine);
}

/* Даты: вместо 14px — 12px. */
.chb2 .chb2__popular .chb2__meta {
    gap: 3px 6px;
    font-size: 12px;
    line-height: 1.3;
}

.chb2 .chb2__popular .chb2__note {
    flex: 0 0 auto;
    padding: 8px 0 10px;
    font-size: 12px;
    line-height: 1.4;
}

/* Более узкая правая колонка на небольших ноутбуках. */
@media (min-width: 1001px) and (max-width: 1180px) {
    .chb2 .chb2__popular {
        padding-right: 16px;
        padding-left: 16px;
    }

    .chb2 .chb2__popular-heading {
        font-size: 21px;
    }

    .chb2 .chb2__popular .chb2__rank-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 8px;
        padding: 9px 0;
    }

    .chb2 .chb2__popular .chb2__rank-number {
        font-size: 32px;
    }

    .chb2 .chb2__popular .chb2__rank-title {
        font-size: 16px;
    }
}

/*
 * Когда рейтинг расположен под статьями,
 * растягивать его по высоте уже не требуется.
 */
@media (max-width: 1000px) {
    .chb2 .chb2__popular {
        align-self: start;
        padding: 18px 20px 8px;
    }

    .chb2 .chb2__popular .chb2__panel,
    .chb2 .chb2__popular .chb2__ranking,
    .chb2 .chb2__popular .chb2__rank-item {
        flex: 0 0 auto;
    }

    .chb2 .chb2__popular .chb2__rank-item {
        padding: 12px 0;
    }
}

/* Смартфоны: компактный текст, удобные переключатели. */
@media (max-width: 600px) {
    .chb2 .chb2__popular {
        padding: 16px 14px 6px;
    }

    .chb2 .chb2__popular-heading {
        font-size: 20px;
    }

    .chb2 .chb2__popular .chb2__tabs {
        gap: 7px;
        margin-top: 12px;
    }

    .chb2 .chb2__popular .chb2__tab {
        min-height: 46px;
        font-size: 14px;
    }

    .chb2 .chb2__popular .chb2__rank-item {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        padding: 11px 0;
    }

    .chb2 .chb2__popular .chb2__rank-number {
        font-size: 32px;
    }

    .chb2 .chb2__popular .chb2__rank-title {
        font-size: 16px;
        line-height: 1.25;
    }
}



/* ==========================================================
   БЛОК 2 — единая типографика заголовков разделов
   «СТАТЬИ» и «САМОЕ ЧИТАЕМОЕ»
   ========================================================== */

.chb2 .chb2__heading,
.chb2 .chb2__popular-heading {
    color: var(--chb2-text, #1d1d1d);
    font-family: var(
        --chb2-serif,
        Georgia, "Times New Roman", serif
    );
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

/* Небольшие ноутбуки */
@media (min-width: 1001px) and (max-width: 1180px) {
    .chb2 .chb2__heading,
    .chb2 .chb2__popular-heading {
        font-size: 21px;
    }
}

/* Смартфоны */
@media (max-width: 600px) {
    .chb2 .chb2__heading,
    .chb2 .chb2__popular-heading {
        font-size: 20px;
    }
}