/*
 * Страница расписания намаза (`/namaztime/`) - приведена к оформлению сайта
 * 20.08.2026.
 *
 * Раньше вся страница жила на инлайновом `<style>` в шаблоне: «Manrope Light»
 * (шрифта в проекте нет), заголовок 32px, таблица кеглем 15-16 с полями 8×12,
 * активный переключатель зелёный. Таблица при этом была ШИРЕ колонки на 33px
 * и вылезала на соседний блок: у `.main` действует `min-width: auto`, поэтому
 * колонка растягивалась под содержимое, а `overflow-x` обёртки не срабатывал.
 *
 * 🛑 `min-width: 0` у обёртки таблицы обязателен - без него прокрутка внутри
 * блока не включается, элемент просто раздвигает колонку.
 */

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

.it-namaz-page {
    font-family: var(--font-main);
    color: var(--c-text);
}

.it-namaz-page__title {
    margin: 0 0 var(--sp-20);
    font-size: var(--fs-feed-title-big);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* ---------- Строка управления: город и период ---------- */

.it-namaz-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-12) var(--sp-20);
    margin: 0 0 var(--sp-20);
}

.it-namaz-controls__group {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
}

.it-namaz-controls__label {
    color: var(--c-text-muted);
    font-size: var(--fs-14);
}

/* 🛑 Свой шеврон вместо системного (просьба Дмитрия 17.09.2026 - "стрелочка
   сильно прижата к правому краю"): у нативной стрелки браузера отступ от
   рамки не переопределить `padding-right` - она рисуется в зарезервированной
   области вплотную к границе независимо от паддинга. appearance: none её
   убирает, паддинг и background-position задают отступ сами. */
.it-namaz-select {
    min-width: 160px;
    height: 34px;
    padding: 0 var(--sp-32) 0 var(--sp-10);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-4);
    background-color: var(--c-white);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6f6f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-16) center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
}

.it-namaz-select:focus {
    outline: none;
    border-color: var(--c-accent-amber);
}

/* Переключатель «Неделю / Месяц» - пилюли, как у рубрик главной, вместо
   зелёного текста с пунктиром. */
.it-namaz-switch {
    display: flex;
    gap: var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-namaz-switch li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-namaz-switch li::before {
    content: none;
}

.it-namaz-switch a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 var(--sp-12);
    border: 1px solid var(--c-line);
    border-radius: var(--r-4);
    color: var(--c-text);
    font-size: var(--fs-14);
    text-decoration: none;
}

.it-namaz-switch .active a {
    border-color: transparent;
    background: var(--c-sand-bg);
    font-weight: var(--fw-demibold);
}

/* ---------- Таблица времён ---------- */

.it-namaz-table-wrap {
    /* 🛑 Без min-width: 0 колонка растягивается под таблицу вместо прокрутки. */
    min-width: 0;
    width: 100%;
    overflow-x: auto;
}

.it-namaz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-14);
}

/* Строки со второй недели скрыты, пока не выбран показ на месяц - открывает
   их скрипт страницы. Правило переехало сюда из инлайнового `<style>`. */
.it-namaz-table .month {
    display: none;
}

.it-namaz-table th,
.it-namaz-table td {
    padding: var(--sp-8) var(--sp-5);
    border-bottom: 1px solid var(--c-line);
    text-align: center;
    white-space: nowrap;
}

.it-namaz-table th {
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: var(--fs-12);
    font-weight: var(--fw-demibold);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.it-namaz-table th:first-child,
.it-namaz-table td:first-child {
    padding-left: var(--sp-10);
    text-align: left;
}

/* Чередование строк - раньше стояло инлайном у каждой строки шаблона. */
.it-namaz-table tbody tr:nth-child(odd) {
    background: var(--c-white);
}

.it-namaz-table tbody tr:nth-child(even) {
    background: #fbfbfb;
}

/* ---------- Текст под таблицей ---------- */

.it-namaz-page__pic {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--sp-25) 0 0;
    border-radius: var(--r-6);
}

.it-namaz-text {
    margin-top: var(--sp-25);
    font-size: var(--fs-14);
    line-height: 1.6;
}

.it-namaz-text p {
    margin: 0 0 var(--sp-12);
}

.it-namaz-text p:last-child {
    margin-bottom: 0;
}

.it-namaz-text h2 {
    margin: var(--sp-20) 0 var(--sp-8);
    font-size: var(--fs-feed-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* 🛑 Мобильная (просьба Дмитрия 17.09.2026 - "вся таблица должна входить на
   один экран, без прокрутки вбок ради Иши"): раньше таблица только СЖИМАЛАСЬ
   на узких экранах, но семь колонок физически не помещались даже в 320px, и
   `.it-namaz-table-wrap` (overflow-x: auto) включал горизонтальную прокрутку.
   Считал по факту (см. историю коммита) - на 320px не хватало ~40px сверх
   того, что даёт простое ужатие паддингов/кегля, и упирались сразу ДВА места:
   заголовок первой колонки ("ВРЕМЯ НАМАЗА" в одну строку) и сама дата с годом
   и днём недели ("17.09.2026, Чт" в одну строку). Проверено пошагово - фикс
   без обеих правок ниже (только паддинг/кегль) не помещался. */
@media (max-width: 599px) {
    .it-namaz-table th,
    .it-namaz-table td {
        /* Раунд-чисел токенов (--sp-4/--sp-8) на 320px не хватило ни на
           волосок - 3px здесь такое же осмысленное число, как остальные. */
        padding: var(--sp-8) 3px;
        font-size: var(--fs-11);
    }

    /* 🛑 Без этого повтора у первой колонки побеждает базовое правило
       `th:first-child, td:first-child { padding-left: var(--sp-10) }` выше -
       оно специфичнее общего `th, td`, и на медиазапрос это не влияет. */
    .it-namaz-table th:first-child,
    .it-namaz-table td:first-child {
        padding-left: 3px;
    }

    .it-namaz-table th {
        letter-spacing: 0;
        font-size: var(--fs-10);
    }

    /* Заголовку первой колонки разрешаем перенос ("ВРЕМЯ / НАМАЗА") - иначе
       он на 320px становится шире, чем сама дата, и держит всю колонку. */
    .it-namaz-table th:first-child {
        white-space: normal;
    }

    /* Год и день недели уходят под дату отдельной строкой - однострочная
       "17.09.2026, Чт" сама по себе шире, чем помещается в 320px. */
    .it-namaz-table__date-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        white-space: nowrap;
    }

    .it-namaz-table__year,
    .it-namaz-table__sep {
        display: none;
    }

    .it-namaz-table__weekday {
        color: var(--c-text-muted);
        font-size: var(--fs-10);
    }
}

/* ---------- Другие города (перелинковка, 24.08.2026) ---------- */

.it-namaz-cities {
    margin-top: var(--sp-25);
    padding-top: var(--sp-20);
    border-top: 1px solid var(--c-line);
}

.it-namaz-cities__title {
    margin: 0 0 var(--sp-12);
    font-size: var(--fs-feed-title);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
}

/* Та же сетка, что у алфавитных указателей терминов и имён (`.list-1` в
   service-pages.css) - здесь без деления по буквам, поэтому колонки чуть
   уже: городов в списке 90, а не сотни. */
.it-namaz-cities__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-4) var(--sp-20);
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-namaz-cities__list li {
    margin: 0;
    padding: var(--sp-4) 0;
    list-style: none;
}

.it-namaz-cities__list li::before {
    content: none;
}

.it-namaz-cities__link {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    text-decoration: none;
}

.it-namaz-cities__link:hover {
    color: var(--c-accent);
}