/*
 * Блок «Время намаза». Источник: компонент NAMAZ_TIME макета (0:2662) -
 * единственный настоящий компонент во всём файле Figma; мобильный вариант -
 * узел 0:13. Значения сняты 17.08.2026 через get_design_context.
 *
 * Состав по макету (слева направо): исламская дата | текущее время табло |
 * Фаджр, Восход, Зухр, Аср, Магриб, Иша | «Расписание на месяц» (порядок
 * менялся дважды 28.08.2026 - сначала шесть намазов свели подряд без разрыва,
 * потом дату и табло перенесли к началу ряда, сразу после лого/города;
 * разбор в комментарии namaz.html.twig).
 * На мобильной в самой строке остаются только табло и ближайшее время (шесть
 * намазов и ссылка на расписание не влезают); дата по хиджре с 17.09.2026
 * выводится отдельной строкой под ней - см. блок «Мобильная: дата по хиджре»
 * ниже.
 *
 * Прошедшие времена набраны коричневым, наступающие - чёрным. Та же логика
 * уже есть в старом виджете (классы active/future в jquery-скрипте), поэтому
 * имена состояний сохраняем по смыслу.
 */

/* Локальный сброс: блок работает и на страницах старой вёрстки, где общего
   сброса из base.css нет, а main.css задаёт свои правила по тегам. */
.it-namaz,
.it-namaz *,
.it-namaz *::before,
.it-namaz *::after {
    box-sizing: border-box;
}

.it-namaz {
    display: flex;
    align-items: center;
    gap: var(--sp-12);
    font-family: var(--font-main);
    line-height: 1.2;
}

.it-namaz a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Одно время: подпись сверху, часы снизу ---------- */

.it-namaz__item {
    display: none; /* на мобильной видно только табло, см. ниже */
    flex-direction: column;
    gap: var(--sp-4);
    font-size: var(--fs-namaz-label);
    letter-spacing: var(--ls-namaz);
    white-space: nowrap;
    color: var(--c-text-black);
}

/* Время уже прошло сегодня - приглушено */
.it-namaz__item--past {
    color: var(--c-brown);
}

/* ---------- Разделители ---------- */

.it-namaz__sep {
    display: none;
    flex: none;
    width: 1px;
    align-self: stretch;
    background: var(--c-brown-light);
    border-radius: var(--r-10);
}

/* ---------- Табло текущего времени ---------- */

.it-namaz__clock {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.it-namaz__digit {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 var(--sp-4);
    background: var(--grad-namaz-digit);
    border-radius: var(--r-3);
    color: var(--c-white);
    font-size: var(--fs-namaz-digit);
    line-height: 1.4;
}

.it-namaz__colon {
    padding: 0 2px;
    color: var(--c-text-black);
    font-size: var(--fs-namaz-digit);
}

/* 🛑 17.09.2026 (просьба Дмитрия): на мобильной табло ужато сильнее, чем на
   десктопе, - освобождает место под компактную дату по хиджре, см. блок
   «Мобильная: дата по хиджре» ниже. Гейт `max-width: 999px` обязателен -
   базовые 22px/2px выше общие для десктопа и мобильной (десктопного
   переопределения у размеров табло не было вовсе), без гейта ужалась бы
   и десктопная строка, которую Заказчик не просил трогать. */
@media (max-width: 999px) {
    .it-namaz__clock {
        gap: 1px;
    }

    .it-namaz__digit {
        min-width: 18px;
        padding: 0 2px;
    }
}

/* ---------- Исламская дата ---------- */

.it-namaz__hijri {
    display: none;
    align-items: center;
    /* 🛑 29.08.2026: было --sp-8 (8px) - на фоне общего gap ряда .it-namaz
       (30-31px, токен --gap-namaz) день и месяц смотрелись слипшимися, а
       снаружи блока - непропорционально просторно (замечание Дмитрия по
       скриншоту). --sp-12 не разъезжает день и месяц далеко (они остаются
       одной группой «дата»), но убирает ощущение слипания. */
    gap: var(--sp-12);
    flex: none;
    /* 29.08.2026: слева от блока - не gap этого ряда, а gap ВНЕШНЕГО
       flex-контейнера `.it-header__bar` (фиксированные 12px) - он меньше
       промежутков ВНУТРИ .it-namaz (там justify-content: space-between
       растягивает их до 30px+ на десктопе). На глаз это читалось как «дата
       прижата к лого». margin-left не может повторить space-between
       дословно на любой ширине, но приближает к нему на типичном экране. */
    margin-left: var(--sp-20);
}

.it-namaz__hijri-day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: var(--sp-4);
    background: var(--grad-hijri);
    border-radius: var(--r-3);
    color: var(--c-white);
    font-size: var(--fs-namaz-digit);
}

.it-namaz__hijri-month {
    color: var(--c-brown);
    font-size: var(--fs-12);
    line-height: 1.15;
    /* 🛑 23.09.2026, указание Дмитрия: имя месяца идёт ОДНОЙ строкой - здесь
       стоял `max-width: 70px`, и «Раби ас-сани» ломалось на «Раби ас-» и
       «сани» даже там, где места хватало с запасом. Самое длинное имя
       («Джумада ас-сани») занимает 104px, ряд шапки от этого не рвётся ни на
       1000px, ни на 1440 - замер на стенде.
       🛑 07.10.2026: компактный перенос на мобильной (класс `--hijri-wrap`,
       44px) убран вместе со всей системой «уместить дату в один ряд с
       бургером» - `.it-namaz` сам целиком уходит на вторую строку шапки
       (блок выше), поэтому месяцу есть куда расти, и ограничивать перенос
       отдельно для мобильной больше незачем. */
    white-space: nowrap;
    /* 29.08.2026: название месяца при переносе на 2 строки («Раби аль-» /
       «авваль») по умолчанию прижималось к левому краю - короткая вторая
       строка висела слева, а не под серединой первой (замечание Дмитрия). */
    text-align: center;
}

/* Если данных нет (`ServiceController::getHijriDate()` вернул null - нет
   расширения intl или незнакомый месяц календаря), Twig не выводит блок
   вовсе - `:empty` здесь подстраховка на случай пустой разметки, а не
   основной путь скрытия. */
.it-namaz__hijri:empty {
    display: none;
}

/* ---------- Мобильная: дата, табло и ближайший намаз - ОДНА группа (07.10.2026) ----------
 *
 * 🛑 До этой правки `.it-namaz` переводился в `display: contents`, и дата по
 * хиджре (единственная «длинная» по ширине среди соседей) вываливалась из
 * общего ряда `.it-header__bar` на свою отдельную строку (`flex: 1 1 100%` +
 * `order: 5`), а табло и ближайший намаз оставались в первой строке рядом с
 * логотипом и бургером - три части одних и тех же часов читались как
 * отдельные блоки с разными отступами (замечание Дмитрия 07.10.2026).
 *
 * Решение проще: `.it-namaz` - настоящий `display: flex` (не `contents`),
 * сам становится ОДНИМ элементом строки `.it-header__bar`. Когда вся группа
 * целиком не помещается рядом с логотипом и бургером, `flex-wrap` бара
 * (header.css) переносит её ЦЕЛИКОМ на вторую строку - не одну дату, как
 * раньше. `flex-grow: 1` отдаёт группе всё свободное место той строки,
 * `justify-content: center` центрирует в нём дату+табло+намаз как единое
 * целое. Промежутки между ними держит общий `gap` `.it-namaz` (12px, базовое
 * правило в начале файла) - тот же приём, что и у остальных групп шапки. */
@media (max-width: 999px) {
    .it-namaz {
        display: flex;
        flex-grow: 1;
        justify-content: center;
    }

    /* Внутри группы элементы - просто дети `.it-namaz` с его общим `gap`,
       без собственных margin: до 07.10.2026 здесь жили подпорки под старую
       раскладку (`margin-left: auto` у табло, чтобы прижать группу к
       бургеру; `order`/`flex-basis: 100%` у даты, чтобы вытолкнуть её на
       отдельную строку) - с `.it-namaz` как настоящим flex-контейнером они
       не нужны и только мешали бы `justify-content: center` центрировать
       группу (margin-left: auto съедал бы всё свободное место до себя). */
    .it-namaz__hijri {
        display: flex;
        flex: none;
        order: 0;
        margin: 0;
        /* Между цифрой и месяцем - как в компактном виде, иначе на узких
           телефонах дата выглядит просторнее, чем на обычных. */
        gap: var(--sp-8);
    }

    /* 🛑 Плашка той же формы, что цифра табло - на ВСЕЙ мобильной, а не
       только в компактном виде (замечание Дмитрия 17.09.2026 про одинаковые
       размеры): иначе на узких телефонах, где дата падает на свою строку,
       она внезапно крупнее, чем на обычных. Десктоп сохраняет свои 34px -
       там у табло и кегль крупнее. */
    .it-namaz__hijri-day {
        padding: 0 2px;
        line-height: 1.4;
    }

    /* 🛑 Цифры табло и плашка дня ужаты ещё раз 23.09.2026 (просьба Дмитрия
       «на мобильной всё должно вмещаться в одну строку шапки»): 19 → 17px,
       ширина 18 → 16. Это 10px в строке - та часть дефицита, которую не
       удалось снять промежутками. Кегль у двух плашек общий, врозь их менять
       нельзя: замечание Дмитрия 17.09.2026 про одинаковые размеры двух
       блоков календаря. Ниже 16px не опускаться - цифра времени должна
       читаться на ходу, а не только с рук. */
    .it-namaz__digit,
    .it-namaz__hijri-day {
        font-size: 17px;
        min-width: 16px;
    }

    /* Двоеточие уже цифры, поэтому отдельной плашки ему не нужно - его поля
       здесь чистый воздух, и 1px хватает. */
    .it-namaz__colon {
        font-size: 17px;
        padding: 0 1px;
    }
}

/* ---------- Ближайшее время рядом с табло (мобильная) ---------- */

.it-namaz__next {
    display: flex;
    flex-direction: column;
    /* 🛑 Без промежутка (было --sp-4, 17.09.2026, замечание Дмитрия «сильно
       далеко»): подпись и время - одна пара, как цифра и месяц в дате слева,
       но там они стоят в строку с зазором 4px, а здесь тот же зазор идёт по
       вертикали и складывается с интерлиньяжем обеих строк - на кегле 9px
       пара разъезжалась и читалась как два отдельных элемента. Расстояние
       между строками теперь даёт только `line-height`. */
    gap: 0;
    font-size: var(--fs-namaz-label);
    letter-spacing: var(--ls-namaz);
    line-height: 1.3;
    white-space: nowrap;
}

/* ---------- Обратный отсчёт до следующего намаза ----------
 *
 * Тикает `namaz.js` (`[data-namaz-countdown]`), ЧЧ:ММ:СС - старый виджет
 * (namaztime_widget.html.twig, retro-clock) показывал ровно это, пустое до
 * JS не выглядит сломанным (сервер не знает текущих секунд посетителя).
 * Цвет - фирменный оранжевый: это единственное "живое" число в шапке,
 * должно читаться отдельно от самих времён. `tabular-nums`, чтобы цифры не
 * дёргали ширину блока каждую секунду.
 */
.it-namaz__countdown {
    font-variant-numeric: tabular-nums;
    /* 🛑 Без разрядки, унаследованной от подписи: с ней строка на 3px шире
       «ФАДЖР», и на 390px этих пикселей не хватало, чтобы дата по хиджре
       осталась в ряду шапки (namaz.js откатывал её на отдельную строку). */
    letter-spacing: 0;
    color: var(--c-accent);
}

.it-namaz__countdown:empty {
    display: none;
}

/* Внутри строки времени (десктопный ряд) - третья строка в колонке, кегль
   как у «Расписание на месяц» (меньше подписи намаза, это пояснение). */
.it-namaz__item .it-namaz__countdown {
    font-size: var(--fs-namaz-sched);
    font-weight: var(--fw-medium);
}

/* Внутри `.it-namaz__next` (мобильная) - третья строка под именем и
   временем, та же логика нулевого gap, что у пары выше. */
.it-namaz__countdown--next {
    font-size: var(--fs-namaz-sched);
    font-weight: var(--fw-medium);
}

/* ---------- Ссылка на расписание ---------- */

.it-namaz__schedule {
    display: none;
    align-items: center;
    gap: var(--sp-8);
    flex: none;
    font-size: var(--fs-namaz-sched);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-namaz);
    line-height: 1.2;
}

/* Значок слева от подписи, как в макете. Размер из самого файла (16x20),
   не растягиваем. */
.it-namaz__schedule-icon {
    flex: none;
    width: 16px;
    height: 20px;
}

/* ---------- Десктоп: показываем всё ----------
 *
 * Порог общий десктопный - 1000 (решение Дмитрия 20.08.2026): полный ряд
 * (шесть времён намаза, дата по хиджре, табло и ссылка на расписание) виден
 * везде, кроме мобильной, где остаётся табло и ближайшее время.
 *
 * ⚠️ До 20.08.2026 порог был 1280: ряд требовал около 840px и на 1024 вылезал
 * за контейнер, давая горизонтальную прокрутку всей страницы. С тех пор кегли
 * шапки стали плавными и на 1000 ряд помещается - проверено замером ширины
 * блока и прокрутки на 1000/1100/1280. Если ряд снова начнёт вылезать (добавят
 * элемент, вернут крупный кегль), первым делом проверять именно это.
 */

@media (min-width: 1000px) {
    .it-namaz {
        flex: 1 1 auto;
        justify-content: space-between;
        gap: var(--gap-namaz);
        height: 40px;
    }

    .it-namaz__item,
    .it-namaz__sep,
    .it-namaz__schedule {
        display: flex;
    }

    .it-namaz__hijri {
        display: flex;
    }

    /* На десктопе ближайшее время не дублируем - оно и так в общем ряду */
    .it-namaz__next {
        display: none;
    }

    /* 🛑 Исключение - ночные часы после Иши: ни один элемент ряда выше не
       "следующий" (следующий намаз - Фаджр завтрашнего дня, своей строки
       в сегодняшнем расписании у него нет). Это единственное место, где
       отсчёт виден вообще, поэтому держим его на экране и на десктопе. */
    .it-namaz__next--always {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: var(--sp-8);
    }
}

/* 🛑 Отдельный порог 360px здесь БЫЛ (23.08.2026: на 320px табло вместе с
   логотипом и бургером выходило за край) - снят 17.09.2026, потому что
   ужатые под него значения (gap 1px, min-width 18px) с этого дня стали
   базой для ВСЕЙ мобильной ширины (см. блок выше). Полям страницы и
   логотипу на 320px по-прежнему нужен отдельный шаг - `blocks/header.css`. */