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

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

@media (max-width: 768px) {

  /* ── Вид спорта справа в ряду ────────────────────────────────────────
     Подписи не было видно вообще. В cards.css мобильный блок показывает
     код (.erow__cat--short { display: inline }), но ниже по файлу, уже
     без медиа-запроса, стоит .erow__cat--short { display: none } — и оно
     побеждает как более позднее. В итоге полное название спрятано
     мобильным блоком, а код — тем правилом, и справа оставались только
     глаз и звёздочка. Здесь показываем код явно. */
  .erow__cat { display: none; }
  .erow__cat--short { display: inline; font-size: 10px; }

  /* У живого события — полное название вместо кода.
     В секции LIVE смешаны все виды спорта сразу, и «FTB» рядом с
     «Como / Parma» не говорит ничего: по коду вид спорта не угадывается,
     пока не выучишь таблицу. В обычной секции название и так стоит
     в заголовке над списком, там кода достаточно.

     :not() обязателен: у элемента с кодом ОБА класса сразу
     (class="erow__cat erow__cat--short"), и без него правило накрыло бы
     и его тоже.

     white-space: normal — чтобы длинное «AMERICAN FOOTBALL» переносилось
     на вторую строку, а не выдавливало названия команд: ряд и так в два
     этажа, высота от переноса не меняется. */
  .erow--live .erow__cat:not(.erow__cat--short) {
    display: block;
    max-width: 84px;
    font-size: 9px;
    line-height: 1.15;
    letter-spacing: .02em;
    white-space: normal;
    text-align: right;
    color: rgba(255, 255, 255, .55);
  }

  .erow--live .erow__cat--short { display: none; }

  /* ── Ряд события крупнее ─────────────────────────────────────────────
     Чуть больше исходных размеров из cards.css (в скобках — исходное).
     Раскладка та же (grid «время | команды | мета»). */
  .erow {
    grid-template-columns: 52px minmax(0, 1fr) auto;  /* 48px */
    gap: 12px;
    padding: 13px 2px;                                /* 11px 2px */
  }

  .erow__match { gap: 5px; }                          /* 4px */
  .erow__side { gap: 9px; }                           /* 8px */

  .erow__time { font-size: 14px; }                    /* 13px */
  .erow__when .liveBadge { font-size: 12px; }         /* 11px */
  .erow__day { font-size: 11px; }                     /* 10px */

  .erow__team { font-size: 15px; }                    /* 14px */

  .erow__badge {
    width: 24px;                                      /* 21px */
    height: 24px;
    font-size: 9px;                                   /* 8px */
  }

  .erow__meta { gap: 8px; }                           /* 7px */
  .erow__league { height: 16px; }                     /* 22px на ПК */
  .erow__cat--short { font-size: 11px; }              /* 10px */

  .erow__eye { font-size: 12px; }                     /* 11px */
  .erow__pin svg { width: 19px; height: 19px; }       /* 18px */

  /* ── Плашки секций уже и с зазором ───────────────────────────────────
     «Крышки» LIVE / Football / Baseball…, по которым раскрывается список.
     Высота и шрифт — как в cards.css. Меняется только ширина (поля по
     бокам 24px вместо 12) и расстояние между плашками (14px вместо 10).
     Раскрытый список под плашкой — той же ширины, края совпадают. */
  .section__header {
    margin: 0 24px 14px;                              /* 0 12px 10px */
  }

  .section__header.is-open { margin-bottom: 0; }

  .section__header.is-open + .cards--1-wide,
  .section__header.is-open + .live-empty {
    margin: 0 24px 14px;                              /* 0 12px 10px */
  }

  /* ── Ровный левый край в раскрытой секции ────────────────────────────
     У названия плашки поле 16px, а у списка было 10 + 2 = 12px,
     у пустого LIVE — 14px: текст под плашкой стоял на 2–4px левее
     названия. Теперь у всех трёх одна вертикаль — 16px от рамки. */
  .section__header { padding: 0 16px; }

  .section__header.is-open + .cards--1-wide { padding: 2px 14px; }   /* 14 + 2 у ряда = 16 */
  /* Одна строка: сдвиг под слово «LIVE» съедал ширину, и фраза
     переносилась. Поля как у списка событий, перенос запрещён,
     а размер подстраивается под ширину экрана — на узких телефонах
     текст просто становится мельче, но остаётся в один ряд. */
  .section__header.is-open + .live-empty {
    padding: 10px 16px 14px;
    white-space: nowrap;
    font-size: clamp(10px, 3.2vw, 15px);
  }

  /* ── Стиль «Самопал» для ленты ───────────────────────────────────────
     Только внешний вид: плоские серые цвета, Arial, скругления 3px,
     без теней, свечения и пульсации. Размеры и отступы — как выше. */

  /* Плашки секций */
  .section__header {
    border: 1px solid #444;
    border-radius: 3px;
    background-color: #1a1a1a;
  }

  .section__header[data-section] {
    background-image:
      linear-gradient(90deg, rgba(26, 26, 26, .94), rgba(26, 26, 26, .86)),
      var(--shot, none);
  }

  .section__header.is-open {
    border-radius: 3px 3px 0 0;
    border-bottom-color: #333;
  }

  .section__title {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    text-shadow: none;
    color: #eee;
  }

  .section__live-dot {
    animation: none;
    box-shadow: none;
    background: #d33;
  }

  .section__toggle {
    border-radius: 3px;
    color: #aaa;
    filter: none;
    transition: none;
  }

  .section__header:hover .section__toggle { background: none; color: #ddd; }

  /* Список под плашкой */
  .section__header.is-open + .cards--1-wide,
  .section__header.is-open + .live-empty {
    border: 1px solid #444;
    border-top: 0;
    border-radius: 0 0 3px 3px;
    background: #141414;
  }

  .live-empty {
    font-family: Arial, Helvetica, sans-serif;
    color: #999;
  }

  /* Ряды событий */
  .erow {
    border-bottom: 1px solid #2a2a2a;
    transition: none;
  }

  .erow:hover { background: none; box-shadow: none; }
  .erow:active { background: #222; }

  .erow__team,
  .erow__time,
  .erow__day,
  .erow__cat,
  .erow__eye {
    font-family: Arial, Helvetica, sans-serif;
  }

  .erow__team { font-weight: 400; color: #e6e6e6; }
  .erow__time { font-weight: 700; color: #ccc; }
  .erow__day { color: #888; }

  .erow__when .liveBadge {
    font-family: Arial, Helvetica, sans-serif;
    color: #e33;
    text-shadow: none;
    box-shadow: none;
    animation: none;
  }

  .erow__cat--short,
  .erow--live .erow__cat:not(.erow__cat--short) { color: #888; letter-spacing: 0; }

  .erow__eye { color: #999; }

  .erow__badge {
    border-radius: 2px;
    box-shadow: none;
  }

  .erow__pin {
    color: #777;
    transition: none;
  }

  .erow__pin:hover { transform: none; }
  .erow__pin.is-pinned { color: #e0b800; }
}