/* ======= Адаптивная сетка ======= */

/* На экранах до 1024px: 2 карточки в ряд */
@media (max-width: 1024px) {
  .wrapper-hub .slot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* На экранах до 600px: 1 карточка в ряд */
@media (max-width: 600px) {
  .wrapper-hub .slot-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ======= Оформление обертки всей страницы ======= */

/* Основная обертка для страницы слотов */
.wrapper-hub .slot-wrapper {
  border: 2px solid #0f6a4f;       /* Тёмно-зелёная рамка */
  border-radius: 12px;             /* Скругление углов */
  margin-top: -30px;               /* Подтягивание вверх */
  padding: 50px 30px 40px 30px;    /* Отступы внутри */
}

/* ======= Сетка карточек ======= */

/* Сетка карточек слотов */
.wrapper-hub .slot-grid {
  display: grid;                  /* Используем Grid */
  grid-template-columns: repeat(4, 1fr); /* 4 карточки в ряд по умолчанию */
  gap: 20px;                      /* Расстояние между карточками */
  margin-top: 30px;               /* Отступ сверху */
  padding: 0;
  list-style: none;               /* Убираем маркеры списка */
}

/* ======= Карточка слота ======= */

/* Одна карточка слота */
.wrapper-hub .slot-grid li {
  background: #6b182f;            /* Бордовый фон */
  border: 2px solid #fff;          /* Белая рамка */
  border-radius: 12px;             /* Скругленные углы */
  padding: 16px 18px;              /* Внутренние отступы */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* Лёгкая тень */
  transition: all 0.25s ease;      /* Плавные эффекты */
  display: flex;
  flex-direction: column;          /* Контент по колонке */
  justify-content: space-between;  /* Растягиваем на высоту */
  height: 100%;                    /* Занимает всю доступную высоту */
  position: relative;
  overflow: hidden;                /* Обрезаем выходящее */
}

/* ======= Ховер на карточке ======= */

/* Эффект при наведении на карточку */
.wrapper-hub .slot-grid li:hover {
  background: #9f4951;             /* Светлее фон */
  transform: translateY(-3px);     /* Поднимаем карточку */
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15); /* Увеличиваем тень */
}

/* ======= Иконка внутри карточки ======= */

/* Маленькая иконка 🎰 в углу карточки */
.wrapper-hub .slot-grid li::before {
  content: "🎰";                   /* Символ слота */
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 20px;
  opacity: 0.3;                    /* Полупрозрачная */
}

/* ======= Ссылка на слот ======= */

/* Название слота */
.wrapper-hub .slot-grid a {
  font-weight: 800;                /* Очень жирный шрифт */
  font-size: 17px;
  color: #eeee22 !important;       /* Жёлтый текст */
  text-decoration: none;           /* Убираем подчёркивание */
  margin-bottom: 10px;             /* Отступ снизу */
  line-height: 1.3;
  display: block;
}

/* ======= Метаданные карточки ======= */

/* Блок с провайдером и RTP */
.wrapper-hub .slot-meta {
  font-size: 14px;
  color: #fff;
  line-height: 1.6;
  margin-top: auto;                /* Толкаем вниз карточки */
}

/* Отдельная строка метаданных */
.wrapper-hub .slot-meta div {
  margin-bottom: 4px;
}

/* ======= Пагинация ======= */

/* Контейнер пагинации */
.wrapper-hub .pagination-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;                 /* Разбивать на строки при необходимости */
  gap: 10px;
  margin: 30px 0;
}

/* Кнопка пагинации (обычная и текущая) */
.wrapper-hub .pagination-buttons a,
.wrapper-hub .pagination-buttons span {
  background: #6b182f;             /* Бордовый фон */
  color: #eeee22;                  /* Жёлтый текст */
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  padding: 6px 12px;
  font-size: 12px;
  transition: all 0.3s;
}

/* Ховер на пагинации */
.wrapper-hub .pagination-buttons a:hover {
  background: #9f4951;             /* Светлее фон */
  color: #ffffff;                  /* Белый текст */
}

/* Активная страница в пагинации */
.wrapper-hub .pagination-buttons .current {
  background: #9f4951;
  color: #ffffff;
  font-weight: 800;
}

/* ======= Дополнительные стили ======= */

/* Заголовок страницы */
.wrapper-hub .slot-page-title {
  text-align: center;
  font-size: 32px;
  margin: -30px 0 30px;
  font-weight: bold;
  color: #6b182f;                  /* Бордовый цвет */
}

/* Подсветка части заголовка */
.wrapper-hub .slot-highlight {
  background-color: #6b182f;
  color: #eeee22;
  padding: 4px 10px;
  border-radius: 6px;
}

/* Сообщение если нет слотов */
.wrapper-hub .no-slots-found {
  text-align: center;
  color: #999;
}