/*
 * Раздел «Сборник хадисов» (`/sbornik-hadisov/`) - ТЗ, этап 5.
 *
 * 🛑 Не путать с `hadis.css` - там блок «1000 и один хадис» на главной
 * (карточка с подложкой и каллиграфией по макету `0:2729`). Здесь страницы
 * самого раздела: лента, тема, отдельный хадис.
 *
 * Своих цветов и кеглей файл не вводит - только токены проекта. Пилюли тем
 * переиспользуют `.tags_filter` из `service-pages.css` (тот же вид, что
 * фильтр рубрик и указатели справочников), здесь у них добавлен счётчик.
 */

/* ---------- Лента хадисов ---------- */

.it-hadith-list {
    margin: var(--sp-20) 0 0;
}

.it-hadith-item {
    padding: var(--sp-16) 0;
    border-bottom: 1px solid var(--c-line);
}

.it-hadith-item:first-child {
    border-top: 1px solid var(--c-line);
}

.it-hadith-item__number {
    display: inline-block;
    margin-bottom: var(--sp-8);
    color: var(--c-accent);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    text-decoration: none;
}

.it-hadith-item__number:hover {
    text-decoration: underline;
}

/* Запись без номера - у неё нет своей страницы, значит и ссылки. */
.it-hadith-item__number--plain {
    color: var(--c-text-meta);
}

.it-hadith-item__text {
    margin: 0;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-16);
    line-height: 1.5;
}

.it-hadith-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-12);
    margin-top: var(--sp-10);
    font-family: var(--font-main);
    font-size: var(--fs-12);
}

.it-hadith-item__narrator {
    color: var(--c-text-muted);
}

.it-hadith-item__theme,
.it-hadith-item__more {
    color: var(--c-text-secondary);
    text-decoration: none;
    border-bottom: 1px dashed var(--c-line-strong);
}

.it-hadith-item__theme:hover,
.it-hadith-item__more:hover {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

.it-hadith-item__more {
    margin-left: auto;
}

/* ---------- Указатель тем ---------- */

.it-hadith-themes {
    margin-top: var(--sp-30);
}

.it-hadith-themes__count {
    margin-left: var(--sp-5);
    color: var(--c-text-meta);
    font-size: var(--fs-10);
}

/* ---------- Отдельный хадис ---------- */

.it-hadith-page__text {
    font-size: var(--fs-18);
    line-height: 1.6;
}

.it-hadith-page__meta {
    margin-top: var(--sp-20);
    padding-top: var(--sp-16);
    border-top: 1px solid var(--c-line);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    color: var(--c-text-muted);
}

.it-hadith-page__meta p {
    margin: 0 0 var(--sp-5);
}

.it-hadith-page__meta a {
    color: var(--c-text);
    text-decoration: none;
    border-bottom: 1px dashed var(--c-line-strong);
}

.it-hadith-page__meta a:hover {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* Переходы «предыдущий - следующий» по порядку книги. */
.it-hadith-page__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-12);
    margin-top: var(--sp-24);
}

.it-hadith-page__nav-link {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    text-decoration: none;
}

.it-hadith-page__nav-link:hover {
    color: var(--c-accent);
}

.it-hadith-page__nav-link--prev::before {
    content: "← ";
}

.it-hadith-page__nav-link--next {
    margin-left: auto;
}

.it-hadith-page__nav-link--next::after {
    content: " →";
}

.it-hadith-page__more {
    margin-top: var(--sp-30);
}

.it-hadith-page__more-title {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-18);
    font-weight: 600;
}

/*
 * На узком экране «Читать целиком» уезжает под подписи (auto-поле в строке из
 * трёх элементов на 320px рвало бы строку), а текст хадиса идёт кеглем
 * поменьше - иначе страница превращается в простыню.
 */
@media (max-width: 480px) {
    .it-hadith-item__more {
        margin-left: 0;
    }

    .it-hadith-item__text {
        font-size: var(--fs-14);
    }

    .it-hadith-page__text {
        font-size: var(--fs-16);
    }
}