/*
 * Блок «Благородный Куръан» - аят дня с переводом смыслов.
 *
 * Снято с макета Figma (Fhm9rBfdGGsbSq9FIakt2v, узел 0:2776) 18.08.2026:
 *   подложка 833×306, радиус 6, градиент от белого к янтарному #ffa300
 *   орнамент 68×68 слева вверху, заголовок 20px DemiBold в две строки
 *   («Благородный Куръан» и номер суры с аятом)
 *   кнопка воспроизведения 36×36
 *   арабский текст - шрифт Kazan Basma Mushaf 18px, интерлиньяж 40, справа
 *   налево, ширина 463
 *   перевод - Golos Medium 18px, пояснения в квадратных скобках обычным
 *   начертанием, ширина 529
 *   справа обложка книги 68×99, логотип «Калям Шариф» и подпись 12px
 *   кнопка «Читать полностью» 214×36 - тем же пунктиром, что и «показать все»
 *
 * 🛑 Шрифта Kazan Basma Mushaf в проекте НЕТ - файл нужен от Заказчика
 * (записано в tokens.css). Пока арабский текст показывается запасным
 * начертанием, размер строки под него уже заложен.
 *
 * 🛑 Локальный сброс обязателен: блок может стоять на страницах старой
 * вёрстки, где общий base.css не подключён.
 */

.it-koran,
.it-koran * {
    box-sizing: border-box;
}

.it-koran {
    padding: var(--sp-16);
    border-radius: var(--r-6);
    /* Градиент из макета: янтарный уходит далеко за левый верхний угол, в самом
       блоке остаётся его отсвет и белое поле (значения Дмитрия, 19.08.2026). */
    background: linear-gradient(148deg, var(--c-accent-amber) -143.45%, var(--c-white) 116.8%);
    color: var(--c-text-black);
    font-family: var(--font-main);
}

/* ---------- Шапка блока ---------- */

/* Заголовок стоит по центру орнамента по вертикали: сам он в две строки и
   ниже, чем знак, - при выравнивании по верху получался перекос. */
.it-koran__head {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    margin-bottom: var(--sp-16);
}

.it-koran__ornament {
    display: block;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.it-koran__title {
    margin: 0;
    font-size: var(--fs-koran-title);
    font-weight: var(--fw-demibold);
    line-height: 1.25;
}

/* Заголовок - настоящая ссылка в раздел: по ней блок открывают клавиатурой и
   её же видит поисковый робот. Весь блок нажимается скриптом
   (controllers/koran-block.js), но на одном скрипте выход из блока держать
   нельзя. */
.it-koran__title-link {
    color: inherit;
    text-decoration: none;
}

/* Курсор-указатель на всём блоке - единственный признак, что он нажимается:
   кнопку «Читать полностью» Заказчик просил убрать (24.09.2026). Класс ставит
   скрипт, поэтому без него вид не меняется. */
.it-koran.is-clickable {
    cursor: pointer;
}

.it-koran.is-clickable:hover .it-koran__title-link {
    color: var(--c-accent);
}

/* Аят играет - кнопка притушена, чтобы было видно, что нажатие сработало.
   Своего значка паузы в наборе нет, а рисовать новый ради одного состояния
   незачем. */
.it-koran.is-playing .it-koran__play {
    opacity: .55;
}

/* Номер суры и аята - отдельной строкой, как в макете */
.it-koran__ref {
    display: block;
}

/* ---------- Текст аята ---------- */

.it-koran__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
}

.it-koran__ayah {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
}

/* Кнопка озвучивания и подпись чтеца - колонкой, чтобы подпись не толкала
   строку с арабским текстом (та и так прижата к максимальной ширине). */
.it-koran__play-col {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-4);
    width: 64px;
}

.it-koran__play {
    display: block;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.it-koran__play img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Имя чтеца (26.09.2026) - до этого нигде на сайте не подписывалось, хотя
   всё аудио Куръана читает он один. */
.it-koran__reciter {
    color: var(--c-text-muted);
    font-size: var(--fs-10);
    line-height: 1.2;
    text-align: center;
}

/* Ширины строк из макета: арабский 463, перевод 529. Задаём потолком, а не
   жёстко - блок встаёт в колонки разной ширины. Арабский прижат вправо,
   перевод влево, как нарисовано. */
.it-koran__arabic {
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0 0 0 auto;
    font-family: var(--font-arabic);
    font-size: var(--fs-18);
    line-height: 40px;
    text-align: right;
}

.it-koran__translation {
    max-width: 640px;
    margin: 0;
    font-size: var(--fs-koran-translation);
    font-weight: var(--fw-medium);
    line-height: 1.4;
}

/* Пояснения переводчика в квадратных скобках - обычным начертанием */
.it-koran__note {
    font-weight: var(--fw-regular);
}

/* ---------- Источник: книга и кнопка ---------- */

.it-koran__source {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-12);
    margin-top: var(--sp-20);
}

.it-koran__cover {
    display: block;
    flex-shrink: 0;
    width: 68px;
    height: auto;
    border-radius: var(--r-3);
}

.it-koran__book {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.it-koran__logo {
    display: block;
    width: 97px;
    height: auto;
}

.it-koran__from {
    margin: 0;
    font-size: var(--fs-12);
    line-height: 1.4;
}

/* Кнопка «Читать полностью» - тот же пунктир, что у «показать все» */
.it-koran__more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: var(--sp-16);
    padding: var(--sp-8) var(--sp-20);
    border: 1px dashed var(--c-sand);
    border-radius: var(--r-4);
    color: var(--c-text-black);
    font-size: var(--fs-koran-more);
    text-decoration: none;
}

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

/*
 * На главной блок лежит ВНУТРИ `.main`, сразу после «Темы и разделы»
 * (topics-grid.html.twig), и занимает те же ДВЕ первые колонки - в макете он
 * шириной 833 (левая 380 + промежуток + центральная), а справа на этом
 * уровне идут мобильные приложения.
 *
 * 🛑 До 05.10.2026 ширина достигалась отдельным элементом сетки
 * (`grid-column: 1/3; grid-row: 2`) - блок начинался только там, где
 * заканчивается САМАЯ ВЫСОКАЯ из трёх колонок первой строки (обычно правая,
 * с Хузур ТВ/Фото дня/Видео дня), и под левой+центральной повисала пустая
 * полоса (до ~800px на боевых данных). Теперь блок в обычном потоке `.main` -
 * начинается сразу после топиков - а на ширину две колонки выходит тем же
 * приёмом breakout, что и сами топики (topics-grid.css): отрицательное поле
 * слева на долю ширины левой колонки от центральной, плюс промежуток.
 */
.it-koran-wide {
    margin-top: 0;
}

@media (min-width: 1000px) {
    .it-koran-wide {
        margin-left: calc(-1 * (100% * 380 / 422) - var(--gap-columns));
        width: calc(100% + (100% * 380 / 422) + var(--gap-columns));
    }
}

/*
 * Мобильная: блок во всю ширину экрана (макет 4106:155, 20.08.2026).
 *
 * Там песочная подложка идёт от края до края и без скругления - проверено по
 * самому кадру, угловые пиксели залиты цветом градиента. Тот же приём, что у
 * «Вопрос-ответ»: блок выводится за поля `.container` отрицательными полями на
 * --container-pad. Через `100vw` так не растягивать - при полосе прокрутки это
 * шире видимой области и даёт горизонтальную прокрутку.
 *
 * Поля по горизонтали 20px, как в макете (текст стоит на x=20) - заодно та же
 * линия, что у соседних блоков колонки.
 */
@media (max-width: 999px) {
    .it-koran-wide {
        margin-right: calc(-1 * var(--container-pad));
        margin-left: calc(-1 * var(--container-pad));
    }

    .it-koran {
        padding: var(--sp-16) var(--sp-20);
        border-radius: 0;
    }
}

/* ---------- Десктоп ---------- */

@media (min-width: 1000px) {
    .it-koran {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 215px;
        gap: var(--gap-koran-row) var(--gap-koran-col);
        padding: var(--sp-24) var(--sp-32);
    }

    /* Шапка занимает обе колонки */
    .it-koran__head {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    .it-koran__ornament {
        width: 68px;
        height: 68px;
    }

    /* Книга и кнопка - во второй колонке, друг под другом */
    .it-koran__source {
        flex-direction: column;
        margin-top: 0;
    }

    .it-koran__aside {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .it-koran__source {
        flex-direction: row;
    }
}