/**
 * Чипсы популярных тегов на главной + стабилизация обложек (CLS).
 *
 * Файл подключается ТОЛЬКО на главной (site/index.php), поэтому селекторы
 * вида .book-rows-swiper здесь скоупятся самим фактом подключения и не
 * затрагивают другие страницы. Тёмная тема — в css/dark-theme.css.
 *
 * Стиль выдержан в духе Bootstrap 2.1.0 (border-radius: 4px, привычная
 * палитра, мягкие тени).
 */

/* ===== Минималистичный блок популярных тегов =====
   Без карточной обёртки (рамки/тени/фона): лёгкий заголовок «Теги» + ряд
   светло-серых пилюль на фоне страницы. */
.home-tag-card {
    margin: 0 0 16px;
}

.home-tag-card__head {
    margin-bottom: 10px;
}

.home-tag-card__title {
    font-family: "Exo 2", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #4a4f55;
}

/* Одна строка чипсов с горизонтальным скроллом на всех экранах.
   Лишние чипсы уходят за правый край; тащим мышью (drag-to-scroll, см.
   js/home-chips-drag.js) либо колесом/трекпадом, на тач — нативным свайпом. */
.home-tag-card__pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.home-tag-card__pills::-webkit-scrollbar {
    display: none;
}

/* Активное перетаскивание мышью: курсор-кулак + блокируем выделение текста. */
.home-tag-card__pills.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.home-tag-card__pill {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: #f0f1f2;
    color: #3a3f45;
    font-family: "Exo 2", sans-serif;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.home-tag-card__pill:hover,
.home-tag-card__pill:focus {
    background: #e6e8ea;
    color: #1f2327;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Мобильные: компактнее карточка; одна строка/скролл уже заданы в базовом
   правиле .home-tag-card__pills, тач-свайп работает нативно. */
@media (max-width: 767px) {
    .home-tag-card {
        margin-bottom: 12px;
        padding: 12px 14px;
    }

    .home-tag-card__pills {
        padding-bottom: 2px;
        /* На тач-устройствах drag не нужен — оставляем привычный курсор. */
        cursor: default;
    }
}

/* ===== Стабилизация обложек на главной (CLS) ===== */
/* Резервируем место под обложку до загрузки картинки, чтобы layout не прыгал. */
.book-rows-swiper > .row-books .row-book .image-container {
    aspect-ratio: 2 / 3;
}

/* Отступ блока «Продолжить чтение», когда он вынесен наверх */
.last-readed {
    margin-bottom: 8px;
}