/*
 * Раздел «Дуа на каждый день» (`/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), что уже используется для арабского текста в других
 * местах сайта (страница «Имя по-арабски», просмотрщик Куръана).
 *
 * 09.10.2026, просьба Дмитрия - арабский текст в рамку, транскрипцию жирным,
 * перевод курсивом. Своих классов у трёх абзацев нет, поэтому перевод и
 * транскрипция достаются СОСЕДНИМИ селекторами от арабского (порядок тройки
 * фиксирован - см. комментарий выше): транскрипция - абзац СРАЗУ ПОСЛЕ
 * арабского (`+ p`), перевод - абзац СРАЗУ ПЕРЕД ним (`:has(+ ...)`, других
 * способов взять предыдущий соседний элемент в CSS нет). Подряд идущие
 * инструкции редакции («Следует сказать:») этим не задеваются - у них после
 * себя не арабский абзац, а обычный текст.
 */
.it-dua-page__text p[style*="text-align: right"] {
    margin: var(--sp-16) 0;
    padding: var(--sp-16);
    border: 1px solid var(--c-line);
    border-radius: var(--r-6);
    background: var(--c-sand-light);
    font-family: var(--font-arabic);
    font-size: var(--fs-20);
    line-height: 1.8;
    direction: rtl;
}

.it-dua-page__text p[style*="text-align: right"] + p {
    font-weight: var(--fw-medium);
}

.it-dua-page__text p:has(+ p[style*="text-align: right"]) {
    font-style: italic;
}

.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;
}

/*
 * Ссылки «Читайте также» (09.10.2026, просьба Дмитрия - сейчас читаются
 * обычным текстом, непонятно, что кликабельно). Список верстается тем же
 * `.it-dua-list`, что и главная страница раздела (`prayers.html.twig`), но
 * БЕЗ `.it-dua-list__item` - карточки с номером здесь не нужны, только
 * список ссылок. Из-за этого общее правило `.it-dua-list__item:hover
 * .it-dua-list__link` до этих ссылок не доставало: цвет совпадал с обычным
 * текстом, hover не менял ничего. Правки - только в рамках `.it-dua-page__more`,
 * список раздела `prayers.html.twig` не затронут.
 *
 * Значок - шеврон, перекрашен в акцент через `mask` (тот же приём, что у
 * печатного слоя мусхафа в mushaf.css: однотонная SVG-маска + background-color).
 */
.it-dua-page__more .it-dua-list__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    color: var(--c-accent);
}

.it-dua-page__more .it-dua-list__link:hover {
    text-decoration: underline;
}

.it-dua-page__more .it-dua-list__link::before {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iOSA2IDE1IDEyIDkgMTgiPjwvcG9seWxpbmU+PC9zdmc+") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHBvaW50cz0iOSA2IDE1IDEyIDkgMTgiPjwvcG9seWxpbmU+PC9zdmc+") center / contain no-repeat;
}