/* =====================================================================
   СТИЛИ ЛЕНТЫ СОБЫТИЙ — ТОЛЬКО ПК
   ---------------------------------------------------------------------
   Весь файл лежит внутри @media (min-width: 769px), поэтому ничто
   отсюда не может протечь на телефон. Подключается ПОСЛЕ cards.css
   (см. nuxt.config.ts), то есть перебивает его при равной
   специфичности — дописывать !important не нужно.

   Правка «как должно быть на компьютере» — сюда, «как на телефоне» —
   в cards-mobile.css, общее для обоих — в cards.css.

   Исправления ниже живут здесь, а не в самом cards.css, сознательно:
   cards.css большой и его регулярно переписывают целиком, и правки
   в нём уже дважды терялись. Отсюда их не затрёт.
   ===================================================================== */

@media (min-width: 769px) {

  /* ── Заголовок секции: по центру колонки карточек ────────────────────
     В cards.css заголовок прижат влево: @media (min-width: 769px)
     задаёт ему padding: 0 308px 0 22px, то есть 22 пикселя от края окна,
     тогда как сами карточки стоят по центру. Выглядит как случайно
     уехавший текст.

     Поля здесь те же, что у .cards--1-wide (слева 60, справа 308 —
     справа стоит колонка Discord), а box-sizing: content-box заставляет
     max-width считаться по содержимому: вместе с margin: 0 auto коробка
     заголовка получает ровно ту же ось, что и колонка рядов, при любой
     ширине окна. */
  .section__header {
    box-sizing: content-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 308px 0 60px;
    justify-content: center;
  }

  .section__title-wrap { justify-content: center; }
  .section__header .section__title { text-align: center; }

  /* ── Вид спорта справа в ряду ────────────────────────────────────────
     Трёхбуквенный код — мобильная вещь, на широком экране места хватает
     на полное название. В cards.css правило .erow__cat--short
     { display: none } стоит без медиа-запроса и ПОСЛЕ мобильного блока,
     из-за чего гасило код и на телефоне тоже. Поэтому прячем его здесь,
     а показываем — в cards-mobile.css. */
  .erow__cat--short { display: none; }
  .erow__cat { display: inline; }
}

/* ── Узкий десктоп ──────────────────────────────────────────────────────
   Ниже 1200 колонки Discord нет и ряды занимают всю ширину — коробку
   заголовка возвращаем к обычной, иначе поля от широкого блока остались
   бы висеть и заголовок снова уехал бы с оси. */
@media (min-width: 769px) and (max-width: 1200px) {
  .section__header {
    box-sizing: border-box;
    max-width: none;
    margin: 0;
    padding: 0 24px;
  }
}