/*
 * Пагинация списков (страницы рубрик, поиск, теги) - узел макета 4115:158.
 *
 * В макете это просто числа коричневым, а текущая страница - в песочном
 * кружке 30×30. Ни рамок, ни квадратных плашек там нет.
 *
 * ✅ Значения сверены с файлом макета 17.09.2026 (до этого часть была снята
 * пипеткой с кадра и разошлась): числа - Golos Text Medium 12px цвета #b48e73
 * (`--c-brown-dark`), кружок - #ffe3b0 (`--c-sand-bg`). Было 14px цветом
 * `--c-brown` (#ab998f) и без веса - крупнее и бледнее, чем нарисовано.
 *
 * Зачем правило: старый вид (`main.css`) - квадраты 55×55 в одну строку без
 * переноса, из-за чего на 390px страница ехала вбок (scrollWidth 735 при
 * 375 видимых). Теперь строка переносится и прокрутки нет.
 *
 * Вид общий для всех ширин (решение Дмитрия 20.08.2026): сперва правило стояло
 * под `max-width: 999px`, десктоп оставался на оранжевых квадратах - развели
 * два оформления одного элемента. Медиазапрос снят, десктопного узла в макете
 * нет и не будет.
 *
 * 🛑 Разметку `.default_pagination` не трогаем: её отдаёт KnpPaginator по
 * шаблону IslamTodayApplication/Pagination/default.html.twig, и те же классы
 * стоят на всех списках сайта. Стили перебиваем порядком - файл грузится
 * после main.css, специфичность селекторов та же.
 */

/* Шаг сверху тот же, что у кнопки «Загрузить еще» под списком (её margin-top
   20px), - до правки пагинация стояла к кнопке вплотную, а к списку через 20,
   и лесенка была заметна. Снизу 30: это отбивка всей секции до подвала, а не
   шаг между соседними элементами. */
.default_pagination {
    margin-top: var(--sp-20);
    margin-bottom: var(--sp-30);
}

.default_pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.default_pagination li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Точка у li из старой вёрстки: списки там рисуются через ::before. */
.default_pagination li::before {
    content: none;
}

.default_pagination li span,
.default_pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* Кружок из макета 30×30; двузначные номера раздвигают его по ширине,
       поэтому min-width, а не width.
       🛑 `width: auto` обязателен: в старом `main.css` тем же селекторам
       задано `width: 55px`, и без сброса кружок выходил овалом 55×30. */
    width: auto;
    min-width: 30px;
    height: 30px;
    padding: 0 var(--sp-5);
    border-radius: 50%;
    background: transparent;
    color: var(--c-brown-dark);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-decoration: none;
}

.default_pagination li a:hover {
    color: var(--c-accent);
}

/* Текущая страница - тот же коричневый, отличается только песочным кружком:
   в макете цвет числа под кружком не меняется.

   🛑 Цвет задаём ЯВНО, наследования тут мало: в старом `main.css` активному
   пункту прописан белый, и после снятия своего значения цифра под кружком
   стала белой на песочном - почти невидимой. */
.default_pagination li.active a,
.default_pagination li.active span {
    background: var(--c-sand-bg);
    color: var(--c-brown-dark);
}

/* Стрелки «назад/вперёд» в макете не нарисованы, но они полезны - оставляем
   их теми же кружками, без серой плашки старой вёрстки. */
.default_pagination li.pointer a,
.default_pagination li.pointer span {
    background: transparent;
    color: var(--c-brown);
}

/* Многоточие между диапазонами - не кнопка, нажимать нечего. */
.default_pagination li.disabled span {
    min-width: auto;
    padding: 0 var(--sp-4);
}