/*
 * Сетка программатик-разделов - узел мобильного макета `0:6` (24.08.2026).
 * Разбор источника и состава - в самом шаблоне (redesign/blocks/topics_grid).
 *
 * 🛑 Локальный сброс обязателен: блок живёт и на страницах старой вёрстки,
 * где общий base.css не подключён (то же правило, что у остальных блоков).
 *
 * 31.08.2026 - расширен на десктоп (решение по реструктуризации навигации).
 * Первая версия ставила блок ОТДЕЛЬНЫМ элементом грида `.container.content`
 * (grid-row: 2, по аналогии с «Благородным Куръаном») - и он съезжал вниз до
 * конца ВСЕЙ первой строки грида, а её высоту задаёт САМАЯ ВЫСОКАЯ из трёх
 * колонок (обычно правая - там Фото дня, Видео дня, Мобильные приложения).
 * Между лентой и сеткой оставался пустой разрыв на несколько сотен пикселей
 * (замечание Дмитрия 31.08.2026, со скриншотом живой страницы). У строки
 * CSS-грида высота всегда равна самой высокой колонке, которая её касается -
 * обойти это можно только НЕ делая блок отдельным элементом грида. Шаблон
 * (redesign/blocks/topics_grid, index.html.twig) кладёт блок ВНУТРЬ `.main`,
 * обычным потоком сразу после ленты - он не участвует в позиционировании по
 * строкам/колонкам грида вообще, поэтому вертикальная позиция зависит только
 * от высоты .main, а не от правой колонки.
 *
 * Заказчик попросил вернуть ширину в две колонки (левая+центральная, как в
 * первой версии) - сделано БЕЗ возврата к grid-column/grid-row: блок
 * по-прежнему внутри .main (позиция не трогается), а ширину дотягиваем влево
 * приёмом breakout - отрицательным полем, посчитанным по тем же пропорциям
 * колонок, что в .content (legacy-bridge.css, `grid-template-columns: 380fr
 * 422fr 256fr`). Левая колонка = 380/422 от ширины .main, плюс промежуток
 * между ними (`--gap-columns`, тот же токен, что в .content).
 *
 * ⚠️ Риск, который стоит держать в уме: ширина блока определяется высотой
 * .main (это то, что чинили выше), но ФИЗИЧЕСКИ он теперь заезжает НАД левую
 * колонку - если левая колонка (список «Топ статей об исламе», до 23 записей)
 * на какой-то странице окажется НИЖЕ по высоте, чем .main в точке начала
 * этого блока, случится наложение. На главной 31.08.2026 запас ~220px (левая
 * заканчивается заметно раньше) - проверять при следующей ревизии, если
 * список слева станет длиннее (сейчас режется на 23 записи в контроллере).
 */

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

.it-topics__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-12) var(--sp-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 359px) {
    .it-topics__list {
        gap: var(--sp-8) var(--sp-5);
    }
}

@media (min-width: 1000px) {
    .it-topics {
        margin-left: calc(-1 * (100% * 380 / 422) - var(--gap-columns));
        width: calc(100% + (100% * 380 / 422) + var(--gap-columns));
        /* Отступы сверху и снизу (замечание Дмитрия 31.08.2026) - только
           десктоп: на мобильной расстояние между блоками задаёт `gap`
           контейнера (см. .it-topics { order: 65 } в legacy-bridge.css),
           здесь эта же отбивка добавила бы к нему ещё, а не заменила его. */
        margin-top: var(--sp-30);
        margin-bottom: var(--sp-30);
    }

    .it-topics__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--sp-16);
    }

    .it-topics__icon {
        max-width: 96px;
        margin: 0 auto;
    }
}

.it-topics__list > li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-topics__list > li::before {
    content: none;
}

.it-topics__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-8);
    width: 100%;
    color: var(--c-text-black);
    font-family: var(--font-main);
    font-size: var(--fs-12);
    font-weight: var(--fw-demibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

/* Плашка плитки. Картинка есть только у трёх тем из макета (разбор - в самом
   шаблоне), у остальных остаётся пустая подложка. */
.it-topics__icon {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-20);
    background: var(--c-sand-bg);
}

/* Каллиграфия: вектор по центру плашки. В макете знак занимает примерно две
   трети плашки (51 из 80 у «Тафсира», 42×54 у «Имён Аллаха») - отсюда 64%,
   пропорции держит `object-fit`, разные по высоте знаки не растягиваются. */
.it-topics__glyph {
    width: 64%;
    height: 64%;
    object-fit: contain;
}

/* Фотография заполняет плашку целиком, скругление даёт `overflow` родителя. */
.it-topics__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* На мобильной блок лежит на песочной плашке первого экрана (макет 0:6,
   Rectangle 1 - разбор в legacy-bridge.css), и песочные плашки плиток на ней
   просто пропали бы. В макете плитки там белые. */
@media (max-width: 999px) {
    .it-topics__icon {
        background: var(--c-white);
    }

    /* Подпись плитки по мобильному макету (узел 70:130, снято 16.09.2026):
       Golos Text Regular 12px, чёрный, по центру - НЕ полужирный, каким блок
       был с десктопной версии. На десктопе вес оставлен прежним: там своего
       узла в макете нет, и текущий вид Заказчик уже утвердил 02-03.09.2026. */
    .it-topics__item {
        font-weight: var(--fw-regular);
    }

    /* Заголовка «Темы и разделы» в мобильном макете нет: под строкой поиска
       сразу идут плитки (узел 63:130 в 0:6, указание Дмитрия 16.09.2026).
       На десктопе заголовок остаётся - там блок стоит в ленте и без него
       непонятно, что это. Отбивку сверху задаёт `padding-top` блока в
       legacy-bridge.css, поэтому скрытие заголовка её не трогает. */
    .it-topics > .it-feed__head {
        display: none;
    }
}

.it-topics__item:hover .it-topics__name {
    color: var(--c-accent);
}

/* Лигатура ﷺ у «Пророк Мухаммад» - свой шрифт (02.09.2026, разбор в
   fonts.css и в самом шаблоне). Кегль чуть крупнее строки: у этого
   начертания заметно меньше высота знака, чем у кириллицы того же
   font-size, - без поправки лигатура «тонет» рядом с текстом. */
.it-topics__honorific {
    font-family: 'Arabic Honorific', var(--font-main);
    font-size: 1.15em;
}