/*
 * Сетка программатик-разделов - узел мобильного макета `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-feed__title` общий класс (feed.css) - 0 отступа снизу, расстояние до
   содержимого ленты задаёт margin-bottom самого `.it-feed__head` (7px).
   Этой плитке нужно больше воздуха перед сеткой - 15px, а не 7px. Трогаем
   только здесь (`.it-topics .it-feed__title`), не сам общий класс - иначе
   сдвинулись бы заголовки всех остальных лент сайта. Указание Дмитрия
   06.10.2026. */
.it-topics .it-feed__title {
    margin-bottom: 15px;
}

.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(6, minmax(0, 1fr));
        gap: var(--sp-16);
    }

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

    /* Без этого колонка (иконка+подпись) растягивалась на всю ширину
       ячейки грида (`minmax(0, 1fr)` может быть шире 96px) - подпись
       переносилась по чужой ширине, а не по ширине самой иконки.
       Указание Дмитрия 06.10.2026. */
    .it-topics__item {
        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;
}

/* Плашка плитки - оранжевый градиент плюс тень, точные значения дал
   Дмитрий 06.10.2026 (узел 111:131 "Rectangle 67", Fill: Linear gradient
   134.1deg FFE3B0 0% → FFA300 159.54%, Effects: Drop shadow 10/10/30/0
   FFE3B0 + Inner shadow 0/4/5/0 FFFFFF). Первая версия того же дня была
   снята пипеткой на глаз (135deg, стоп 100%, одна внешняя тень
   rgba-оранжевым) - угол и особенно стоп 159.54% (насыщенный цвет
   градиента достигается ЗА пределами плитки, сама плашка светлее) этим
   не покрывались. До обеих версий фон был `var(--c-sand-bg)` с тёмной
   иконкой - разбор всех трёх несовпадений с макетом в CLAUDE.md. */
.it-topics__icon {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--r-20);
    background: linear-gradient(134.1deg, #ffe3b0 0%, #ffa300 159.54%);
    box-shadow: 10px 10px 30px 0 #ffe3b0, inset 0 4px 5px 0 #fff;
}

/* Hover - тот же градиент, внутренняя тень глубже и в цвет (не белая):
   blur 4→10px, прозрачный белый → rgba(255,163,0,.6). Значения от
   Дмитрия 06.10.2026. */
.it-topics__item:hover .it-topics__icon {
    background: linear-gradient(134.1deg, #ffe3b0 0%, #ffa300 159.54%);
    box-shadow: 10px 10px 30px 0 #ffe3b0, inset 0 4px 10px 0 rgba(255, 163, 0, 0.6);
}

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

   🛑 06.10.2026: у 18 из 20 иконок (все, выгруженные экспортом слоя в
   браузере Figma, не через MCP svgAssets) `viewBox` был больше реального
   контура - лишнее поле оставалось под drop-shadow, которую сам контур
   больше не отбрасывает (её убрали ещё при первой чистке файлов). Поле
   было несимметричным (слева/сверху 4.7, справа/снизу больше) - из-за
   этого значок внутри `object-fit: contain` съезжал к верхнему левому
   углу плашки и казался мельче своих 64% (замечание Дмитрия по
   скриншоту). Поправлено не в CSS, а в самих файлах
   `assets/images/topics/*.svg` - `viewBox` обрезан по фактическим
   границам контура (замер `getBBox()` в браузере на каждом файле
   отдельно, значения разные). Два файла через MCP (`imena-allaha.svg`,
   `tafsir-kurana.svg`) уже были обрезаны день в день без зазора -
   не трогал. */
.it-topics__glyph {
    width: 64%;
    height: 64%;
    object-fit: contain;
}

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

@media (max-width: 999px) {
    /* Подпись плитки по мобильному макету (узел 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);
}

/* Курсор при наведении на плитку - отдельная иконка сложенных ладоней (узел
   127:1138 того же Figma-файла, вне сетки плиток, вынесена туда дизайнером
   именно под курсор - разбор в CLAUDE.md). Хотспот 14/14 - центр иконки.
   06.10.2026: исходный экспорт 64×64 на экране смотрелся огромным рядом с
   обычной стрелкой (замечание Дмитрия) - уменьшен до 28×28 (`width`/
   `height` в самом SVG, `viewBox` не трогали). Большинство браузеров
   корректно показывают кастомный курсор крупнее штатных 32×32, поэтому
   отрисовка размером не ограничивается - просто сам файл стал меньше. */
.it-topics__item:hover {
    cursor: url("../../images/topics/cursor-5a946f2ddbc1fdeadd6ea1b0e2784ff1.svg") 14 14, pointer;
}

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