/*
 * Карусель первого экрана мобильной главной (макет 0:6 и его второй вариант
 * 0:1270, 16.09.2026). Две страницы, между ними листание пальцем:
 *   1 - Хузур ТВ слева и две промо-карточки справа (две колонки, как в макете);
 *   2 - блок «Благородный Куръан».
 * Под ними ряд точек (узел 0:333): 10×10, промежуток 10, активная - янтарная,
 * остальные белые.
 *
 * 🛑 Разметку собирает `controllers/hero-slider.js` переносом уже выведенных
 * блоков, а не вторым выводом в шаблоне: те же `.it-tv` и `.it-koran-wide`
 * нужны десктопу на своих местах (правая колонка и лента), а дублирование
 * разметки означало бы два набора данных на странице. На десктопе скрипт
 * возвращает блоки обратно по меткам-плейсхолдерам.
 *
 * Листание - нативное: горизонтальная прокрутка со `scroll-snap`, без
 * библиотеки. Поэтому свайп работает точно так же, как в любом другом месте
 * системы, и не ломается при отключённом JS (без скрипта карусели просто нет,
 * блоки остаются в ленте - рабочий вид).
 */

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

.it-hero-slider {
    min-width: 0;
}

.it-hero-slider__track {
    display: flex;
    /* Страницы НЕ растягиваются по высоте трека: иначе короткая страница
       принимает высоту трека, а скрипт меряет её же и никогда не уменьшит. */
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--sp-20);
    /* Высоту ставит скрипт по активной странице: без неё трек был бы высотой
       с самую высокую страницу («Куръан» вдвое выше ТВ), и под короткой
       оставалась бы пустая песочная простыня в треть экрана. */
    transition: height 0.2s ease;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.it-hero-slider__track::-webkit-scrollbar {
    display: none;
}

/* Страница - колонка строк: в макете на первой странице сетка тем идёт во всю
   ширину, а Хузур ТВ и промо-карточки под ней в две колонки. */
.it-hero-slider__slide {
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    gap: var(--sp-20);
    min-width: 0;
    scroll-snap-align: start;
}

/* Строка страницы: блоки внутри делят её поровну. В макете обе колонки по
   170px при ширине экрана 390 - то есть ровно пополам с промежутком 10px. */
.it-hero-slider__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-10);
    width: 100%;
    min-width: 0;
}

.it-hero-slider__row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- Вторая страница: одна белая карточка (узел 72:131) ----------
 *
 * До 17.09.2026 сюда переносился ещё и «Благородный Куръан» (аят с
 * переводом) - карточка была общей на двоих. Дмитрий попросил вернуть
 * Куръан в обычный поток ленты, сразу после блока «Вопрос-ответ» (см.
 * hero-slider.js и legacy-bridge.css, `order: 80` у `.it-koran-wide`) -
 * теперь здесь только плеер суры, карточка держит его подложку и поля.
 */
.it-hero-slider__slide--card {
    gap: var(--sp-16);
    /* 23px - размер из макета (указание Дмитрия 16.09.2026), в шкалу токенов
       не попадает: ближайшие 20 и 24. */
    padding: 23px;
    border-radius: var(--r-4);
    /* Не белый, а градиент из макета (узел 80:133): белое поле с голубым
       отсветом в правом верхнем углу - тот же характер, что у карточки
       плеера. Разбор значений - в tokens.css. */
    background: var(--grad-koran-card);
}

.it-hero-slider__slide--card .it-koran-player {
    padding: 0;
    border-radius: 0;
    background: none;
}

/* 🛑 Сброс правил ленты у перенесённых блоков (`order`, поля, ширина) стоит
   НЕ здесь, а в legacy-bridge.css: он подключается последним и только оттуда
   перебивается `.content .it-tv { order: 15 }` - при равной специфичности
   выигрывает файл, подключённый позже. Разбор - там же. */

.it-hero-slider__dots {
    display: flex;
    justify-content: center;
    gap: var(--sp-10);
    padding-top: var(--sp-20);
}

/* Точка 10×10. У неактивной - белая заливка и янтарная обводка 1px (узел
   0:333: на границе точки в макете ровно половинное смешение #ffa300 с белым,
   то есть сглаженная линия в 1px этим же цветом). Активная залита янтарным
   целиком, обводка того же цвета на ней не видна. */
.it-hero-slider__dot {
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid var(--c-accent-amber);
    border-radius: 50%;
    background: var(--c-white);
    cursor: pointer;
}

.it-hero-slider__dot--active {
    background: var(--c-accent-amber);
}