/*
 * Раздел «Дуа на каждый день» (`/prayers/`) - приведён к оформлению сайта
 * 24.08.2026.
 *
 * Список раньше жил на инлайновом `<style>` в шаблоне и браузерном цвете
 * ссылок (`.prayers-list li a { color: #272727; }` - это чуть темнее
 * обычного текста, а не ссылка вовсе). Заголовки записей - целые фразы
 * («Слова обращения к Аллаху при выходе из мечети»), а не короткие слова, как
 * у терминов или имён, - сетка в несколько колонок здесь ломала бы строки
 * через два слова, поэтому записи идут в один столбец.
 *
 * ⚠️ 24.09.2026 столбец со строками-разделителями заменён на карточки по
 * образцу раздела «Имена Аллаха» (просьба Заказчика: «хочется оформить так,
 * как имена Аллаха в разделе, визуально приятнее»): рамка, номер в песочной
 * плашке, название. Правила ниже повторяют `allah-names.css` - своего вида у
 * записи нет, а сводить два справочника в один класс не стали: у имён в
 * карточке ещё арабское написание и значение, и общий класс оброс бы
 * исключениями.
 */

.it-dua-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    margin: var(--sp-20) 0 0;
    padding: 0;
    list-style: none;
}

.it-dua-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--sp-16);
    margin: 0;
    padding: var(--sp-16);
    border: 1px solid var(--c-line);
    border-radius: var(--r-6);
    list-style: none;
}

.it-dua-list__item:hover {
    border-color: var(--c-accent);
}

.it-dua-list__num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 var(--sp-4);
    background: var(--c-sand-bg);
    border-radius: var(--r-6);
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
}

.it-dua-list__title {
    margin: 0;
    min-width: 0;
    font-family: var(--font-main);
    font-size: var(--fs-16);
    font-weight: var(--fw-regular);
    line-height: 1.4;
}

.it-dua-list__link {
    color: var(--c-text);
    text-decoration: none;
}

.it-dua-list__item:hover .it-dua-list__link {
    color: var(--c-accent);
}

/* ---------- Отдельная страница дуа ---------- */

.it-dua-page__lead {
    color: var(--c-text-muted);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    margin: 0 0 var(--sp-12);
}

/*
 * Арабский текст и транскрипция приходят внутри `flatContent` готовым HTML
 * (три абзаца: перевод, арабская строка, транскрипция). Своей разметки у них
 * нет, поэтому стиль ставим по выравниванию: арабский абзац - единственный с
 * `text-align: right` в этом блоке. Шрифт - тот же `--font-arabic`
 * (Kazan Basma Mushaf), что уже используется для арабского текста в других
 * местах сайта (страница «Имя по-арабски», просмотрщик Куръана).
 */
.it-dua-page__text p[style*="text-align: right"] {
    margin: var(--sp-8) 0;
    font-family: var(--font-arabic);
    font-size: var(--fs-20);
    line-height: 1.8;
    direction: rtl;
}

.it-dua-page__more {
    margin-top: var(--sp-25);
    padding-top: var(--sp-20);
    border-top: 1px solid var(--c-line);
}

.it-dua-page__more-title {
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-feed-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}