/**
 * Прочие улучшения главной (Фаза 2): компактная лента «Последние обновления»
 * (задача 7c/d) и разгрузка правого сайдбара на мобильном (задача 10).
 *
 * Подключается только на главной (site/index.php). Стиль — Bootstrap 2.1.0.
 * Тёмная тема — в css/dark-theme.css. Брейкпоинты: 775/767/500/360.
 */

/* ===== Компактная лента «Последние обновления» (7c) ===== */
#f-hot ul.imged.lenta-compact li {
    min-height: 0;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.12s ease;
    /* Контейнер строки создаёт BFC: float-обложка (.bimg) полностью
       помещается внутрь <li>, поэтому разделитель border-bottom рисуется ниже
       обложки и она не вылезает за границы строки даже в коротких строках. */
    overflow: hidden;
}

#f-hot ul.imged.lenta-compact li:hover {
    background-color: #fafafa;
}

#f-hot ul.imged.lenta-compact li .bimg {
    width: 56px !important;
    height: 84px !important;
    margin-right: 14px !important;
}

#f-hot ul.imged.lenta-compact li p {
    margin-left: 70px;
}

#f-hot ul.imged.lenta-compact li button {
    margin-left: 70px;
}

#f-hot ul.imged.lenta-compact li p.title {
    margin-bottom: 4px;
}

#f-hot ul.imged.lenta-compact li p.info {
    margin-bottom: 4px;
    color: #999;
}

/* Убираем текстовый ярлык типа книги («перевод» / «авторский») в строках ленты.
   В разметке это голый текстовый узел внутри <p class="info"> (без своего класса),
   рядом со <span class="r"> (дата). Отдельного селектора у слова нет, поэтому
   схлопываем его через font-size:0 на flex-контейнере и возвращаем размер дате.
   Скоуп — только лента «Последние обновления» (#f-hot .lenta-compact), слово
   «перевод» в других разделах сайта не затрагивается. Дырки не остаётся: строку
   по-прежнему держит дата, а space-between прижимает её к правому краю. */
#f-hot ul.imged.lenta-compact li p.info {
    font-size: 0;
}

#f-hot ul.imged.lenta-compact li p.info .r {
    font-size: 11px;
}

/* Убираем «зебру» — подложку под каждой нечётной главой в строке ленты.
   Базовое правило face.css «#f-hot ul.imged li p.title span span:nth-child(odd)»
   красит фон главы в var(--bg-primary) (#fafafa). На коротких строках (1 глава)
   эта серая полоса встаёт по центру строки рядом с обложкой и читается как
   разделитель, пересекающий контент. В ленте делаем главы чистыми строками —
   единственный разделитель остаётся border-bottom самого <li> (строго между
   строками, на всю ширину, под контентом). Скоуп — только лента .lenta-compact. */
#f-hot ul.imged.lenta-compact li p.title span span:nth-child(odd) {
    background-color: transparent;
}

/* Бейдж «новое» в строке ленты */
.lenta-badge-new {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #4f9d3a;
    color: #fff;
    font-family: "Exo 2", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ===== Кнопка «Показать ещё» в ленте (7d) =====
   Фирменная «пилюля» в стиле кнопок действий книги («Нравится», «Поддержать»,
   «В коллекцию»): мягкий светло-серый фон, крупное скругление, без рамки и
   градиента, центрированный текст веса 600. Переопределяем дефолтный
   Bootstrap-класс .btn (фон/рамка/тень/тень-текста). */
.lenta-load-more {
    display: none; /* по умолчанию (десктоп) скрыта — там обычный пагинатор */
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0 4px;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    background: #f2f2f3;
    background-image: none;
    box-shadow: none;
    color: #2b2b2b;
    text-align: center;
    text-shadow: none;
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.lenta-load-more:hover,
.lenta-load-more:focus {
    background: #e8e8ea;
    background-image: none;
    box-shadow: none;
    color: #1a1a1a;
    outline: none;
    text-decoration: none;
}

.lenta-load-more:active {
    background: #dedee0;
    background-image: none;
    box-shadow: none;
    color: #1a1a1a;
}

.lenta-load-more[disabled],
.lenta-load-more[disabled]:hover,
.lenta-load-more[disabled]:active {
    opacity: 0.6;
    background: #f2f2f3;
    color: #2b2b2b;
    cursor: default;
}

/* Тёмная тема: тёмная пилюля, светлый текст (см. body.dark-theme в v3.php). */
body.dark-theme .lenta-load-more {
    background: #2a2d31;
    color: #e6e6e6;
}

body.dark-theme .lenta-load-more:hover,
body.dark-theme .lenta-load-more:focus {
    background: #34383d;
    color: #fff;
}

body.dark-theme .lenta-load-more:active {
    background: #3c4046;
    color: #fff;
}

body.dark-theme .lenta-load-more[disabled],
body.dark-theme .lenta-load-more[disabled]:hover,
body.dark-theme .lenta-load-more[disabled]:active {
    background: #2a2d31;
    color: #e6e6e6;
}

/* На мобильных: показываем кнопку, прячем длинный пагинатор */
@media (max-width: 767px) {
    .lenta-load-more {
        display: block;
    }

    .lenta-pager-desktop {
        display: none;
    }
}

/* ===== Разгрузка правого сайдбара на мобильном (10) ===== */
/* На десктопе/планшете ничего не меняем — сворачивание включает только JS,
   добавляя класс .home-sidebar-collapsible на <=767. */
.home-sidebar-collapsible {
    position: relative;
    overflow: hidden;
    max-height: 460px;
    transition: max-height 0.3s ease;
}

.home-sidebar-collapsible.expanded {
    max-height: none;
}

/* Градиент-затухание у нижнего края свёрнутого сайдбара */
.home-sidebar-collapsible:not(.expanded)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

/* Фирменная «пилюля» 1:1 как .lenta-load-more / sidebar-showmore — без рамки,
   градиента и тени; нейтральный серый фон, текст по центру. Светлая тема. */
.home-sidebar-toggle {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 8px 0 16px;
    padding: 13px 18px;
    border: none;
    border-radius: 14px;
    background: #f2f2f3;
    background-color: #f2f2f3;
    background-image: none;
    box-shadow: none;
    color: #2b2b2b;
    text-align: center;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.home-sidebar-toggle:hover,
.home-sidebar-toggle:focus {
    background: #e8e8ea;
    background-color: #e8e8ea;
    background-image: none;
    border: none;
    box-shadow: none;
    color: #1a1a1a;
    outline: none;
    text-decoration: none;
}

.home-sidebar-toggle:active {
    background: #dedee0;
    background-color: #dedee0;
    background-image: none;
    box-shadow: none;
    color: #1a1a1a;
}

/* Тёмная тема (body.dark-theme, см. v3.php). Держим правила в этом же файле,
   css/dark-theme.css не трогаем. Старые тёмные правила .home-sidebar-toggle в
   dark-theme.css идут с !important и грузятся ПОЗЖЕ, поэтому здесь поднимаем
   специфичность смежным комбинатором (кнопка всегда стоит сразу за свёрнутым
   сайдбаром — см. js/home-sidebar.js) и тоже ставим !important. */
body.dark-theme .home-sidebar-collapsible + .home-sidebar-toggle {
    background: #2a2d31 !important;
    background-color: #2a2d31 !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #e6e6e6 !important;
}

body.dark-theme .home-sidebar-collapsible + .home-sidebar-toggle:hover,
body.dark-theme .home-sidebar-collapsible + .home-sidebar-toggle:focus {
    background: #34383d !important;
    background-color: #34383d !important;
    color: #fff !important;
}

body.dark-theme .home-sidebar-collapsible + .home-sidebar-toggle:active {
    background: #3c4046 !important;
    background-color: #3c4046 !important;
    color: #fff !important;
}