/*
 * Просмотрщик Корана на /koran-/ (22.08.2026).
 *
 * 🛑 Разметку не трогаем: её отдаёт `KoranController::getKoranPagesAction`
 * целым куском и перерисовывает при каждом выборе суры или джуза. Поэтому
 * оформление вешаем на существующие классы (`nav-koran`, `koran-book__*`).
 *
 * Что было: старые стили держали разворот на плавающих блоках и картинках
 * фиксированной ширины, и в новой раскладке страницы всё схлопывалось - у
 * блока перевода и у скана мусхафа ширина выходила НУЛЕВАЯ, то есть от
 * просмотрщика на экране оставались только подписи. Здесь раскладка собрана
 * заново: сетка «скан + перевод», на телефоне - друг под другом.
 *
 * Оформление собрано из уже утверждённого: пилюли выбора - как `tags_filter` на
 * служебных страницах, песочные подложки - как у блока «Благородный Куръан» на
 * главной, кнопки листания - круглые, как кнопка воспроизведения у Хузур ТВ.
 */

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

/* ---------- Панель выбора: перевод, тафсир, чтец ---------- */

.nav-koran {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
    margin: var(--sp-20) 0;
    padding: 0;
    list-style: none;
}

.nav-koran__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    height: 36px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    list-style: none;
}

.nav-koran__item::before {
    content: none;
}

.nav-koran__target,
.koran-book__nav__item__target {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1;
    text-decoration: none;
    border-bottom: 0;
    cursor: pointer;
}

.nav-koran__target:hover,
.koran-book__nav__item__target:hover {
    color: var(--c-accent);
}

/* Иконки в панели - спрайты старой вёрстки. Оставляем, но не даём им ломать
   строку: у спрайтов свои размеры и float. */
.nav-koran .sprite {
    flex: none;
    float: none;
}

/* ---------- Выпадающие списки ---------- */

/*
 * 🛑 Открытие вешает СВОЙ скрипт (`assets/controllers/koran.js`) через класс
 * `is-open`: разметка рассчитана на Bootstrap, а его на сайте нет вовсе -
 * списки не открывались ни разу. Бутстраповский `.open` тоже поддерживаем на
 * случай, если библиотека когда-нибудь появится.
 */
.dropdown-menu--custom {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    display: none;
    max-height: 320px;
    min-width: 180px;
    margin: var(--sp-4) 0 0;
    padding: var(--sp-8) 0;
    overflow-y: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    list-style: none;
}

.dropdown.is-open > .dropdown-menu--custom,
.dropdown.open > .dropdown-menu--custom,
.nav-koran__item.is-open .dropdown-menu--custom,
.koran-book__nav__item .dropdown.is-open .dropdown-menu--custom {
    display: block;
}

.dropdown-menu--custom li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropdown-menu--custom li::before {
    content: none;
}

.dropdown-menu--custom a {
    display: block;
    padding: var(--sp-5) var(--sp-12);
    border: 0;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.4;
    text-decoration: none;
}

.dropdown-menu--custom a:hover {
    background: var(--c-sand-light);
    color: var(--c-accent);
}

/* ---------- Книга ---------- */

.koran-book {
    position: relative;
    margin: 0 0 var(--sp-30);
    padding: var(--sp-20);
    border-radius: var(--r-4);
    background: var(--c-sand-light);
}

/* Шапка книги: выбор джуза, суры, аята. */
.koran-book__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-8) var(--sp-16);
    margin: 0 0 var(--sp-16);
    padding: 0;
    list-style: none;
}

.koran-book__nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.koran-book__nav__item::before {
    content: none;
}

.koran-book__nav__item__label {
    position: relative;
    color: var(--c-text-muted);
}

/* Выбранное значение - в белой пилюле, чтобы было видно, что по нему кликают. */
.koran-book__nav__item .dropdown > .koran-book__nav__item__target {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--sp-8);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    background: var(--c-white);
    font-weight: var(--fw-demibold);
}

/* ---------- Разворот: скан и перевод ---------- */

.koran-book__pages {
    display: block;
}

.koran-book__pages__item,
.koran-book__pages__item__inner {
    display: block;
    width: auto;
    float: none;
}

.koran-book__pages__item + .koran-book__pages__item {
    margin-top: var(--sp-20);
}

/*
 * 🛑 Скан слева, перевод справа - и обязательно `minmax(0, ...)` у обеих
 * колонок: без него колонка растягивается под содержимое, и длинный перевод
 * выдавливает скан из сетки.
 */
.koran-book__page {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--sp-20);
    align-items: start;
    padding: var(--sp-16);
    border-radius: var(--r-4);
    background: var(--c-white);
}

/*
 * 🛑 Порядок задаётся через `order`, потому что в разметке перевод идёт ПЕРЕД
 * сканом - без этого страница мусхафа попадала во вторую колонку, а перевод в
 * первую, и колонки менялись ролями: узкая доставалась тексту, широкая
 * картинке. Разметку не трогаем, её отдаёт контроллер.
 */
.koran-book__page__original {
    order: 1;
    width: auto;
    float: none;
}

.koran-book__page__translation,
.koran-book__page__translation.koran-book__translation {
    order: 2;
}

.koran-book__page__original img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-4);
}

/* Перевод: своя прокрутка не нужна - текст показывается целиком. Высота из
   старых стилей (240px с обрезкой) снята, разбор - в legacy-bridge.css. */
.koran-book__page__translation,
.koran-book__translation {
    width: auto;
    height: auto;
    max-height: none;
    float: none;
    background: transparent;
    color: var(--c-text);
}

.koran-book__translation__inner {
    padding: 0;
    font-family: var(--font-main);
    font-size: var(--fs-14);
    line-height: 1.6;
}

.koran-book__translation__inner p {
    margin: 0 0 var(--sp-12);
}

.koran-book__translation__inner p:last-child {
    margin-bottom: 0;
}

/* Плеер аудиочтения - под сканом страницы. */
.koran-book__page__player {
    order: 3;
    grid-column: 1 / -1;
    margin-top: var(--sp-8);
}

/* ---------- Листание ---------- */

.koran-book__direction {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-8);
    margin-bottom: var(--sp-12);
}

/* Круглые кнопки со стрелками - вместо спрайтов старой вёрстки, которые в новой
   раскладке уезжали за пределы блока. */
.koran-book__direction__item {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    background: var(--c-white);
    background-image: none;
    text-decoration: none;
}

.koran-book__direction__item:hover {
    border-color: var(--c-accent);
}

.koran-book__direction__item::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border: solid var(--c-text);
    border-width: 0 2px 2px 0;
}

.koran-book__direction__item--prev::after {
    transform: rotate(135deg);
    margin-left: 3px;
}

.koran-book__direction__item--next::after {
    transform: rotate(-45deg);
    margin-right: 3px;
}

.koran-book__direction__item:hover::after {
    border-color: var(--c-accent);
}

/* ---------- Планшет и телефон ---------- */

@media (max-width: 860px) {
    .koran-book {
        padding: var(--sp-12);
    }

    /* Скан и перевод друг под другом: рядом на узком экране не помещается ни
       то, ни другое. */
    .koran-book__page {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--sp-12);
    }

    .koran-book__page__original {
        max-width: 360px;
    }

    .dropdown-menu--custom {
        max-height: 260px;
    }
}