/* [recent-games 2026-08-11] Ряд «История игр» на главной.
 *
 * Собственных стилей КАРТОЧКИ здесь нет: плитки рисует брендовый #template-game и
 * размеры им задаёт тема сайта. Этот файл делает ровно две вещи — превращает обычную
 * сетку блока в горизонтальную ленту и рисует стрелки прокрутки.
 *
 * Цвета намеренно заданы полупрозрачным серым (rgba(127,127,127,…)): один и тот же
 * файл лежит на тёмных брендах (zabkabet/manix/goldera) и на светлом krazik, и такой
 * тон читается на обоих фонах без отдельной темы.
 */

/* ⚠️ Видимость — через КЛАСС, а не inline display: брендовый код показывает блоки
   главной вызовами $('.main-block').show() / $('#main-catalog').show(), которые
   снимают именно inline-стиль. С display:none в разметке пустой ряд «проявлялся» бы
   при каждом возврате на главную. */
#recent-games-block.rg-empty { display: none !important; }

/* ⚠️ `display` ленте НЕ НАВЯЗЫВАЕТСЯ. У брендов сетка блока устроена по-разному:
   flex с процентными ширинами (.flex2 у zabkabet/manix, .flex-games у goldera) и
   CSS Grid (.game-grid-16 у krazik). Общее `display:flex` ломало именно grid —
   плитки теряли колонку и разъезжались до натурального размера картинки (замер на
   krazik: 287 px вместо 145 и разная высота). Поэтому раскладка правится ОТДЕЛЬНО
   для каждого вида, ниже. */
#recent-games-catalog {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    /* Полоса прокрутки скрыта: лента листается стрелками и свайпом, а системный
       скроллбар под карточками ломал бы ритм соседних блоков главной. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#recent-games-catalog::-webkit-scrollbar { width: 0; height: 0; display: none; }
#recent-games-catalog > * { scroll-snap-align: start; }

/* ── Бренды на flex (zabkabet, manix, goldera) ─────────────────────────────────
   Ширина плитки задана темой в процентах от контейнера, поэтому при nowrap в кадре
   остаётся ровно столько же карточек, сколько в обычном ряду каталога. */
#recent-games-catalog.flex2,
#recent-games-catalog.flex-games {
    flex-wrap: nowrap !important;
    justify-content: flex-start;
}
#recent-games-catalog.flex2 > *,
#recent-games-catalog.flex-games > * { flex: 0 0 auto; }

/* ── Бренд на CSS Grid (krazik) ────────────────────────────────────────────────
   Колонки переводятся из строк в один ряд: `grid-template-columns` снимается, иначе
   он перебил бы `grid-auto-columns`. Ширина колонки повторяет ступени .game-grid-16
   темы (8/6/4/3/2 колонки, gap 0.55rem → 0.4rem), чтобы плитка ленты совпадала с
   плиткой соседних блоков. */
#recent-games-catalog.game-grid-16 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 7 * 0.55rem) / 8);
}
@media (max-width: 1200px) {
    #recent-games-catalog.game-grid-16 { grid-auto-columns: calc((100% - 5 * 0.55rem) / 6); }
}
@media (max-width: 920px) {
    #recent-games-catalog.game-grid-16 { grid-auto-columns: calc((100% - 3 * 0.55rem) / 4); }
}
@media (max-width: 600px) {
    #recent-games-catalog.game-grid-16 { grid-auto-columns: calc((100% - 2 * 0.4rem) / 3); }
}
@media (max-width: 420px) {
    #recent-games-catalog.game-grid-16 { grid-auto-columns: calc((100% - 0.4rem) / 2); }
}

/* Строка заголовка: стрелки прижаты вправо и не растягивают шапку блока. */
#recent-games-block .rg-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
}
#recent-games-block .rg-nav.rg-nav-hidden { display: none; }

#recent-games-block .rg-arrow {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(127, 127, 127, 0.18);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
}
#recent-games-block .rg-arrow:hover { background: rgba(127, 127, 127, 0.32); }
#recent-games-block .rg-arrow svg { width: 14px; height: 14px; display: block; }
/* Край ленты достигнут: кнопка гаснет, но остаётся на месте — иначе вторая стрелка
   прыгала бы вбок на каждом краю. */
#recent-games-block .rg-arrow.rg-arrow-off { opacity: 0.35; pointer-events: none; }

/* Часы в заголовке — вровень с текстом (у брендов h2 блоков имеет свою высоту строки). */
#recent-games-block .rg-title-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin: -2px 6px 0 0;
}

@media (max-width: 767px) {
    /* На телефоне лента листается пальцем — стрелки только съедали бы место в шапке. */
    #recent-games-block .rg-nav { display: none; }
}