/* ============================================================
   Каталог — адаптив, тактический стиль RED
   Дополняет styleCatalog.css: только перестроение сеток и
   размеров. Токены и компоненты — styleTactical.css.
   ============================================================ */

/* ── Широкие ноутбуки: 3 колонки товаров ───────────────────── */
@media (max-width: 1200px) {
  .catalog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .navigation-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── Планшеты ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .catalog-page-wrapper {
    padding: 0 18px 64px;
  }

  .leaderboard-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .other-players-list {
    align-self: stretch;
  }

  .catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-search {
    flex-direction: column;
  }

  .catalog-sort {
    min-width: 0;
  }
}

/* ── Мобильные ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .support-section {
    padding-top: 40px;
  }

  .support-content {
    padding: 18px 20px;
  }

  .top-players-showcase,
  .navigation-strip-container,
  .catalog-category {
    margin-top: 48px;
  }

  .t-section-head {
    flex-wrap: wrap;
    gap: 8px;
  }

  .t-section-head .t-section-line {
    display: none;
  }

  .podium-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .podium-item,
  .podium-item.gold-position {
    padding: 18px 20px;
  }

  .navigation-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* Табы категорий: mobileCatalog.js переводит контейнер в grid
     инлайновым стилем — здесь только отступы и перенос текста */
  .categories-container,
  .subcategory-tabs {
    gap: 8px;
  }

  .category-tab,
  .subcategory-tab {
    justify-content: flex-start;
    white-space: normal;
    text-align: left;
  }

  .category-header h2 {
    font-size: 20px;
    white-space: normal;
  }

  .category-header-count {
    display: none;
  }

  .catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .catalog-content {
    padding: 14px;
    gap: 6px;
  }

  .catalog-content h3 {
    font-size: 14px;
  }

  .catalog-content p {
    -webkit-line-clamp: 2;
  }

  .case-info-strip {
    padding: 0 14px 4px;
  }

  .catalog-footer {
    padding: 0 14px 14px;
  }

  /* Карусель на тач-устройствах — стрелки всегда видны */
  .carousel-control {
    opacity: 1;
  }

  .catalog-pagination {
    flex-wrap: wrap;
    gap: 12px;
  }

  .modal {
    padding: 20px;
  }

  .modal .close {
    top: 14px;
    right: 14px;
  }

  .scroll-top-btn {
    right: 16px;
    bottom: 16px;
  }
}

/* ── Узкие экраны ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .catalog-page-wrapper {
    padding: 0 14px 56px;
  }

  .catalog-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .navigation-buttons {
    grid-template-columns: minmax(0, 1fr);
  }

  .player-avatar,
  .gold-position .player-avatar,
  .bronze-position .player-avatar {
    width: 44px;
    height: 44px;
  }

  .catalog-page-title {
    font-size: 30px;
  }

  .scroll-text {
    display: none;
  }

  .scroll-top-btn {
    padding: 8px;
  }
}

/* ── Landscape на мобильных: экономим вертикаль ────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  .catalog-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .podium-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}