/**
 * Единый визуальный язык карточек слайдеров на главной (Фаза 2, задачи 8 и 12).
 *
 * Подключается ТОЛЬКО на главной (site/index.php), поэтому селекторы скоупятся
 * самим фактом подключения. Эталон разметки — swiper_books.php + books-covers.css.
 * Стиль выдержан в духе Bootstrap 2.1.0 (border-radius: 4px, мягкие тени,
 * привычная палитра). Тёмная тема — в css/dark-theme.css.
 *
 * Данные для бейджей берутся из уже загруженных полей модели (short_view:
 * discount, sale_date_end, rating, n_votes) — без доп. запросов на hot-path.
 */

/* ===== Бейджи поверх обложки ===== */
.book-rows-swiper .row-book .image-container {
    position: relative;
}

.card-badges {
    position: absolute;
    left: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}

.card-badges-top {
    top: 6px;
}

.card-badges-bottom {
    bottom: 6px;
}

.card-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Exo 2", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.card-badge-discount {
    background: #da4453;
}

.card-badge-rating {
    background: rgba(0, 0, 0, 0.7);
}

.card-badge-rating svg {
    color: #ffd24a;
    flex-shrink: 0;
}

/* Текстовый бейдж статуса (если когда-то появится в разметке карточки) */
.card-badge-status-done {
    background: #4f9d3a;
}

.card-badge-status-ongoing {
    background: #2f8fbf;
}

/* Бейдж «+N глав» (используется в шаблонах, где счётчик глав уже загружен) */
.card-badge-chapters {
    background: rgba(0, 0, 0, 0.7);
}

/* ===== Hover-подъём + press-state ===== */
.book-rows-swiper .row-book .image-container {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Подъём/тень только на устройствах с настоящим ховером (десктоп),
   чтобы на тач-экранах не залипало после тапа. */
@media (hover: hover) {
    .book-rows-swiper .row-book a:hover .image-container {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    }
}

/* Press-state: лёгкое «вдавливание» при тапе/клике */
.book-rows-swiper .row-book a:active .image-container {
    transform: scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.08s ease;
}

/* Полоска прогресса блока «Продолжить чтение» переехала в редизайн карточек
 * (protected/components/widgets/swiper/assets/last_read_swiper_widget.css). */

/* =========================================================================
 * Блоки главной: «Обсуждается в блоге» (#f-blog) и «Пишут пользователи»
 * (#f-user-blog). Чистая компактная типографика в духе страницы книги:
 * синие акценты #0088cc, серые сниппеты в одну строку с ellipsis,
 * лёгкие разделители, ровный вертикальный ритм, hover-подсветка строки.
 * Все селекторы скоупятся под #f-blog / #f-user-blog. Тёмная тема — ниже.
 * ========================================================================= */

#f-blog,
#f-user-blog {
    margin-bottom: 24px;
}

/* ----- Заголовки блоков ----- */
#f-blog > h2,
#f-user-blog > h2 {
    position: relative;
    margin: 0 0 12px;
    padding: 0 0 8px;
    font-family: "Exo 2", sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    border-bottom: 1px solid #ececec;
}

/* Ссылка в шапке блока («весь блог») — аккуратно, мелко, справа по базовой линии */
#f-blog > h2 .links,
#f-user-blog > h2 .links {
    float: right;
    font-size: 13px;
    font-weight: 400;
    line-height: inherit;
    color: #999;
}

#f-blog > h2 .links a,
#f-user-blog > h2 .links a,
#f-blog > p.links a,
#f-user-blog > p.links a {
    color: #0088cc;
    text-decoration: none;
}

#f-blog > h2 .links a:hover,
#f-user-blog > h2 .links a:hover,
#f-blog > p.links a:hover,
#f-user-blog > p.links a:hover {
    color: #006699;
    text-decoration: underline;
}

/* ----- Список записей ----- */
#f-blog > ul,
#f-user-blog > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#f-blog > ul > li,
#f-user-blog > ul > li {
    position: relative;
    margin: 0;
    padding: 9px 52px 9px 0;
    border-bottom: 1px solid #f2f2f2;
    line-height: 1.35;
    overflow: hidden;
}

#f-blog > ul > li:last-child,
#f-user-blog > ul > li:last-child {
    border-bottom: 0;
}

#f-blog > ul > li:hover,
#f-user-blog > ul > li:hover {
    background: #f7fbfd;
}

/* Заголовок-ссылка записи */
#f-blog > ul > li > a,
#f-user-blog > ul > li > a {
    color: #0088cc;
    text-decoration: none;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#f-blog > ul > li > a:hover,
#f-user-blog > ul > li > a:hover {
    color: #006699;
    text-decoration: underline;
}

/* Автор в «Пишут пользователи» (ahref перед двоеточием) */
#f-user-blog > ul > li > a:first-child {
    font-weight: 600;
}

/* Сниппет — серым, в одну строку с ellipsis, без разъезжания */
#f-blog > ul > li > p,
#f-user-blog > ul > li > p {
    margin: 3px 0 0;
    color: #999;
    font-size: 13px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

/* Счётчик комментариев — справа, выровнен по верхней строке */
#f-blog > ul > li .c,
#f-user-blog > ul > li .c {
    position: absolute;
    top: 9px;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    color: #999;
    white-space: nowrap;
}

#f-blog > ul > li .c .cmt-svg,
#f-user-blog > ul > li .c .cmt-svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Нижняя ссылка блока («остальные посты/обсуждения») */
#f-blog > p.links,
#f-user-blog > p.links {
    margin: 10px 0 0;
    font-size: 13px;
    color: #999;
    text-align: right;
}

/* =========================================================================
 * Тёмная тема для блоков #f-blog / #f-user-blog
 * ========================================================================= */
body.dark-theme #f-blog > h2,
body.dark-theme #f-user-blog > h2 {
    color: #e6e6e6;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme #f-blog > h2 .links,
body.dark-theme #f-user-blog > h2 .links,
body.dark-theme #f-blog > p.links,
body.dark-theme #f-user-blog > p.links {
    color: #888;
}

body.dark-theme #f-blog > ul > li,
body.dark-theme #f-user-blog > ul > li {
    border-bottom-color: rgba(255, 255, 255, 0.07);
}

body.dark-theme #f-blog > ul > li:hover,
body.dark-theme #f-user-blog > ul > li:hover {
    background: rgba(255, 255, 255, 0.04);
}

body.dark-theme #f-blog > ul > li > a,
body.dark-theme #f-user-blog > ul > li > a,
body.dark-theme #f-blog > h2 .links a,
body.dark-theme #f-user-blog > h2 .links a,
body.dark-theme #f-blog > p.links a,
body.dark-theme #f-user-blog > p.links a {
    color: #4ab3e0;
}

body.dark-theme #f-blog > ul > li > a:hover,
body.dark-theme #f-user-blog > ul > li > a:hover,
body.dark-theme #f-blog > h2 .links a:hover,
body.dark-theme #f-user-blog > h2 .links a:hover,
body.dark-theme #f-blog > p.links a:hover,
body.dark-theme #f-user-blog > p.links a:hover {
    color: #7cc8ec;
}

body.dark-theme #f-blog > ul > li > p,
body.dark-theme #f-user-blog > ul > li > p,
body.dark-theme #f-blog > ul > li .c,
body.dark-theme #f-user-blog > ul > li .c {
    color: #888;
}

/* =========================================================================
 * Адаптив: блоки span5 стекаются на мобайле — гарантируем читаемость
 * строк без horizontal overflow, счётчик не налезает на заголовок.
 * ========================================================================= */
@media (max-width: 767px) {
    #f-blog,
    #f-user-blog {
        margin-bottom: 18px;
    }

    #f-blog > h2,
    #f-user-blog > h2 {
        font-size: 19px;
    }

    #f-blog > ul > li,
    #f-user-blog > ul > li {
        padding: 8px 46px 8px 0;
    }
}

@media (max-width: 360px) {
    #f-blog > ul > li,
    #f-user-blog > ul > li {
        padding-right: 42px;
    }

    #f-blog > ul > li .c,
    #f-user-blog > ul > li .c {
        font-size: 11px;
    }
}

/* =========================================================================
 * Пагинация ленты «Последние обновления» (только десктоп) — .lenta-pager-desktop.
 * Эталон — скрин 3: скруглённые квадратные кнопки страниц с лёгкой границей,
 * активная страница — тёмный круг, стрелки ««« « » »»» в той же форме.
 * Скоуп строго под .lenta-pager-desktop .pagination, чтобы не задеть остальные
 * пагинаторы сайта. Тёмная тема: цвета .pagination централизованы в
 * css/dark-theme.css (грузится позже, !important) — там тёмные кнопки и синяя
 * активная; здесь задаём только форму/размеры/светлую палитру (их dark-theme
 * не трогает, поэтому они наследуются и в тёмной теме).
 * ========================================================================= */
.lenta-pager-desktop {
    margin: 20px 0 4px;
    text-align: center;
}

.lenta-pager-desktop .pagination {
    display: flex;
    /* nowrap + горизонтальная прокрутка: ряд всегда в ОДНУ строку, при большом
       числе страниц прокручивается внутри пагинатора, не перенося на 2-ю строку
       и не вызывая overflow всей страницы. width:fit-content + margin:auto →
       при малом числе страниц ряд центрируется; при переполнении занимает 100%
       и скроллится с начала (без клиппинга левых кнопок, как было бы у center). */
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 2px 0;
    list-style: none;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Тонкий скроллбар пагинатора (webkit) — ненавязчивый */
.lenta-pager-desktop .pagination::-webkit-scrollbar {
    height: 6px;
}

.lenta-pager-desktop .pagination::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}

/* На случай UL-варианта внутри .pagination (CLinkPager ставит .pagination прямо
   на <ul>, но Bootstrap-обёртка .pagination > ul тоже сбрасывается) */
.lenta-pager-desktop .pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
    box-shadow: none;
}

.lenta-pager-desktop .pagination li {
    display: inline-flex;
    flex: 0 0 auto;
    margin: 0;
}

/* Кнопка страницы / стрелки — скруглённый квадрат с лёгкой границей */
.lenta-pager-desktop .pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 32px;
    height: 34px;
    padding: 0 7px;
    float: none;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    background: #fff;
    color: #44525e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lenta-pager-desktop .pagination li a:hover {
    background: #eaf4fb;
    border-color: #0088cc;
    color: #0088cc;
}

/* Активная страница — тёмный круг (эталон: «23») */
.lenta-pager-desktop .pagination li.active a,
.lenta-pager-desktop .pagination li.active a:hover {
    background: #2b3038;
    border-color: #2b3038;
    border-radius: 50%;
    color: #fff;
    cursor: default;
}

/* Стрелки навигации ««« « » »»» — нейтральные, как обычные кнопки страниц
   (тот же фон/рамка/типографика). Переопределяем явно, чтобы не «протёк»
   глобальный синий цвет ссылок (.pagination a из v3/bootstrap). */
.lenta-pager-desktop .pagination li.first a,
.lenta-pager-desktop .pagination li.previous a,
.lenta-pager-desktop .pagination li.next a,
.lenta-pager-desktop .pagination li.last a {
    color: #44525e;
    font-weight: 600;
}

/* Hover у стрелок — как у цифр (синяя подсветка появляется только на наведении) */
.lenta-pager-desktop .pagination li.first a:hover,
.lenta-pager-desktop .pagination li.previous a:hover,
.lenta-pager-desktop .pagination li.next a:hover,
.lenta-pager-desktop .pagination li.last a:hover {
    background: #eaf4fb;
    border-color: #0088cc;
    color: #0088cc;
}

/* Отключённые крайние стрелки Yii помечает классом .hidden — прячем их */
.lenta-pager-desktop .pagination li.hidden {
    display: none;
}

/* =========================================================================
 * Выравнивание по высоте (только десктоп ≥980px): левая колонка «Новости книг»
 * (#f-announces) и правая колонка (#f-blog над #f-user-blog). Реализовано через
 * CSS Grid на строке-обёртке (.row, содержащей #f-announces): левый блок
 * занимает обе строки сетки и растягивается на высоту правой колонки, нижние
 * края совпадают. Нижние ссылки прижаты к низу (margin-top:auto).
 * На планшете/мобайле (<980px) грид выключен — колонки стекаются штатной
 * сеткой Bootstrap. :has() не поддержан старым браузером → правило игнорируется,
 * остаётся обычная float-раскладка (graceful degradation, ничего не ломается).
 * ========================================================================= */
@media (min-width: 980px) {
    .row:has(> #f-announces) {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-rows: auto auto;
        column-gap: 20px;
        margin-left: 0;
        align-items: stretch;
    }

    /* clearfix-псевдоэлементы .row в гриде стали бы ячейками — гасим */
    .row:has(> #f-announces)::before,
    .row:has(> #f-announces)::after {
        display: none;
    }

    .row:has(> #f-announces) > #f-announces {
        grid-column: 1;
        grid-row: 1 / 3;
        width: auto;
        margin-left: 0;
        float: none;
        display: flex;
        flex-direction: column;
    }

    .row:has(> #f-announces) > #f-blog {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin-left: 0;
        float: none;
        display: flex;
        flex-direction: column;
    }

    .row:has(> #f-announces) > #f-user-blog {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        margin-left: 0;
        float: none;
        display: flex;
        flex-direction: column;
    }

    /* Нижние ссылки прижаты к низу блока, чтобы нижние края колонок совпали */
    .row:has(> #f-announces) > #f-announces > p.links,
    .row:has(> #f-announces) > #f-blog > p.links,
    .row:has(> #f-announces) > #f-user-blog > p.links {
        margin-top: auto;
    }
}