/* ============================================================
   Карточный вид блоков «Жанр / Тег / Фэндом» в правом сайдбаре главной.
   Виджет: protected/components/widgets/ranking/RankingBlockWidget.php
           view: protected/components/widgets/ranking/views/ranking_block.php

   Каждый блок .ranking-block — отдельная скруглённая панель-карточка:
   шапка (тип слева — обычный неинтерактивный заголовок, ссылка «Все …» справа),
   приглушённый подзаголовок текущего значения, компактный список книг, ниже —
   пилюля «Показать ещё» (её стиль — в css/sidebar-showmore.css, тут не дублируется).

   Всё скоуплено под .ranking-block, чтобы не задеть соседние виджеты сайдбара
   (BookTopWidget/.sidebar-top-widget, промо .sidebar-promo). Сворачиванием/
   раскрытием списка управляет ТОЛЬКО кнопка «Показать ещё» (свой JS виджета);
   шапка кликабельной НЕ является. На мобильное сворачивание всего сайдбара
   (js/home-sidebar.js) не влияет. Тёмная тема — через body.dark-theme ниже.
   ============================================================ */

/* ---------- Карточка-панель ---------- */
.ranking-block {
    box-sizing: border-box;
    margin: 0 0 16px;
    padding: 14px 16px;
    border: none;
    border-radius: 16px;
    background: #f6f7f8;
    box-shadow: none;
    overflow: hidden;
}

/* ---------- Шапка карточки (заголовок типа + «Все …») ---------- */
.ranking-block .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
}

/* Заголовок типа — обычный неинтерактивный текст (не кнопка/ссылка) */
.ranking-block .header .rank-type {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: "Exo 2", sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ссылка «Все Жанры/Теги/Фэндомы ↗» */
.ranking-block .rank-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    color: #6c757d;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.ranking-block .rank-all:hover,
.ranking-block .rank-all:focus {
    color: #0088cc;
    text-decoration: none;
}

.ranking-block .rank-all-arrow::before {
    content: "\2197"; /* ↗ */
    font-size: 13px;
    line-height: 1;
}

/* ---------- Подзаголовок (текущее значение) ---------- */
.ranking-block .rank-subtitle {
    display: block;
    margin: 4px 0 0;
    color: #9aa0a6;
    font-family: "Exo 2", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    text-decoration: none;
    word-break: break-word;
    transition: color 0.15s ease;
}

.ranking-block .rank-subtitle:hover,
.ranking-block .rank-subtitle:focus {
    color: #0088cc;
    text-decoration: none;
}

/* ---------- Список книг ---------- */
/* Внешние боковые отступы убираем — их даёт padding карточки. max-height и
   overflow для «Показать ещё» остаются из виджетного ranking_block_widget.css. */
.ranking-block .rank-body {
    padding: 12px 0 0;
    margin-bottom: 8px;
}

.ranking-block .row-rank .image-container {
    width: 48px;
    min-width: 48px;
}

.ranking-block .row-rank .title {
    margin-left: 12px;
}

.ranking-block .row-rank .title h4 {
    font-size: 0.95rem;
    line-height: 1.25;
}

/* ============================================================
   Тёмная тема (body.dark-theme — class-based dark, см. v3.php).
   Переменные --text-primary тут не переключаются, поэтому цвета задаём явно.
   ============================================================ */
body.dark-theme .ranking-block {
    background: #2a2d31;
}

body.dark-theme .ranking-block .header .rank-type {
    color: #e6e6e6;
}

body.dark-theme .ranking-block .rank-all {
    color: #9aa0a6;
}

body.dark-theme .ranking-block .rank-all:hover,
body.dark-theme .ranking-block .rank-all:focus {
    color: #4ab3ff;
}

body.dark-theme .ranking-block .rank-subtitle {
    color: #9aa0a6;
}

body.dark-theme .ranking-block .rank-subtitle:hover,
body.dark-theme .ranking-block .rank-subtitle:focus {
    color: #4ab3ff;
}

body.dark-theme .ranking-block .row-rank .title,
body.dark-theme .ranking-block .row-rank .title h4 {
    color: #e6e6e6;
}