/* Веб-раскладка каталога — СОБСТВЕННАЯ, а не растянутая телефонная.
 *
 * Прежний файл был набором заплаток «поставить max-width и центрировать»: на
 * широком экране оставались телефонные приёмы — обложка во всю ширину монитора
 * с именем в углу, полоса цифр на 1400 px, липкий док у нижней кромки и лента
 * из горизонтальных строк, разложенная в три колонки. Это и читается как
 * «мобилку растянули».
 *
 * Здесь веб собран заново, из своих правил:
 *
 *   мера      контент живёт в колонке --web-max с полями --web-gut, а не во всю
 *             ширину окна: строка на 1400 px не читается;
 *   рельса    фильтры каталога уезжают в левую колонку — на вебе они видны
 *             всегда, а не прячутся под липкой полосой над лентой;
 *   две       у клуба, турнира и подтверждения справа липкая панель действия.
 *   колонки   Телефонный док — приём маленького экрана: там кнопке негде быть,
 *             кроме нижней кромки. На вебе место есть, и «Забронировать» стоит
 *             рядом с тем, что бронируешь;
 *   карточки  выдача — сетка одинаковых карточек с обложкой сверху. Смешивать
 *             крупную карточку и плотные строки в одной сетке нельзя: колонки
 *             перестают читаться как один список;
 *   модалка   шторка снизу — тоже телефонный приём; на вебе она садится по
 *             центру экрана.
 *
 * Разметка при этом ОДНА, как и было: раскладку задаёт grid-размещение уже
 * существующих блоков экрана (`#s-club > .fd-dock` — в правую колонку и т.д.).
 * Дублировать экраны под ширины по-прежнему нельзя — они разъедутся в первую же
 * правку, и телефонный дизайн, который просили сохранить, пострадает первым.
 * Поэтому телефонная база не правится отсюда ни одной строкой: всё, что ниже,
 * живёт внутри медиа-запросов.
 *
 * Ступени:
 *   768–1023  планшет: телефонная раскладка с нижней навигацией, но контент
 *             центрируется и выдача идёт в две колонки;
 *   ≥1024     веб: шапка, рельса, две колонки, модалки;
 *   ≥1320     широкий: три карточки в ряд;
 *   ≥1600     очень широкий: мера чуть шире, дальше не растём.
 */

/* ═══ 768–1023: планшет ══════════════════════════════════════════════════════
   Это ещё телефон — нижняя навигация, липкая верхушка ленты, док у кромки.
   Меняется только то, что на 900 px выглядит потерянным: длина строки и
   одноколоночная выдача. Верхняя граница обязательна: без неё эти правила
   протекли бы в веб и снова смешались бы две раскладки в одну. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .fd-main { max-width: 880px; padding-left: 24px; padding-right: 24px; }
  .fd-pad { padding-left: 0; padding-right: 0; }

  /* Липкая верхушка и вкладки стеклянные во всю ширину сцены — поля им
     возвращаются отрицательным margin, иначе стекло обрежется по контенту. */
  .fd-sticky, .fd-tabs { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .fd-sticky .fd-chips, .fd-sticky .fd-pad { padding-left: 0; padding-right: 0; }
  .fd-dock { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }

  /* Колонки — ТОЛЬКО у выдачи. Один общий `.fd-list { display:grid }` разложил
     бы в две колонки и внутренности карточки клуба, и экран турнира, где свой
     вертикальный ритм. */
  #s-clubs > .fd-list,
  #s-myclubs > .fd-list,
  #s-bookings > .fd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
  #s-clubs > .fd-list > .fd-caprow,
  #s-clubs > .fd-list > .fd-empty,
  #s-clubs > .fd-list > .fd-gap,
  #s-myclubs > .fd-list > h1,
  #s-myclubs > .fd-list > .fd-tabs,
  #s-myclubs > .fd-list > .fd-empty,
  #s-myclubs > .fd-list > .fd-gap,
  #s-myclubs > .fd-list > .fd-addRow,
  #s-myclubs > .fd-list > .fd-btn,
  #s-bookings > .fd-list > h1,
  #s-bookings > .fd-list > .fd-tabs,
  #s-bookings > .fd-list > .fd-empty,
  #s-bookings > .fd-list > .fd-btn { grid-column: 1 / -1; }

  /* Поля даёт сцена: у Главной свои 16 px внутри секций, и вместе с полями
     сцены они складывались в 40 px отступа от края. */
  .fd-heroWeb, .fd-sect { padding-left: 0; padding-right: 0; }
  .fd-band { margin-left: 0; margin-right: 0; }

  .fd-clubHero { min-height: 280px; border-radius: 0 0 var(--r-2xl) var(--r-2xl); }
  .fd-clubStats { border-radius: var(--r-xl); border: 1px solid var(--line); margin-top: -12px; position: relative; z-index: 2; }
  .fd-ticket { max-width: 460px; margin: 0 auto; }
}

/* ═══ ≥1024: веб ═════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  :root {
    --web-max: 1240px;   /* мера контента: колонка, а не ширина окна */
    --web-gut: 28px;     /* поля сцены */
    --web-gap: 28px;     /* разрыв между колонками */
    --rail-w: 248px;     /* рельса фильтров каталога */
    --side-w: 344px;     /* панель действия справа */
    --read-w: 720px;     /* одноколоночные экраны: ~90 знаков в основном кегле */
    --map-rail: 404px;   /* список рядом с картой */
  }

  /* ── оболочка ─────────────────────────────────────────────────────────── */
  .fd-header { display: block; }
  .fd-tabbar { display: none; }
  .narrowOnly { display: none !important; }

  /* Шапка — то же белое стекло, что таблетка на телефоне, и та же логика: от
     страницы её отделяет не тёмная подложка, а тень под нижней кромкой и блик
     по верхней. Одной волосяной линии снизу для этого мало — с ней шапка
     читалась как первый блок контента. */
  .fd-header {
    background: var(--nav);
    border-bottom: 1px solid var(--nav-brd);
    box-shadow: var(--nav-gloss), 0 10px 28px rgba(12, 12, 20, .07);
  }
  /* Поиск — на полтона темнее панели: белое поле на белом стекле не читается
     как поле. Профиль так стоит и без правки (--surface2 в базовых стилях). */
  .fd-search-wide { background: var(--surface2); border-color: var(--line); }
  /* Подпись активного раздела — глубоким акцентом: светлый --acc на мятной
     плашке даёт контраст 3:1, для 14 px этого мало. */
  .fd-nav a.on { color: var(--acc-deep); }

  .fd-header-in { max-width: calc(var(--web-max) + var(--web-gut) * 2); padding: 0 var(--web-gut); }

  /* Шапка — одна строка ростом --header-h, поэтому переносить в ней нечего:
     «Мои клубы» в две строки и подсказка поиска в три ломают её высоту, а
     вместе с ней и все липкие отсчёты от неё. */
  .fd-nav a, .fd-city, .fd-me, .fd-search-wide { white-space: nowrap; }
  .fd-search-wide { width: clamp(180px, 20vw, 280px); }

  .fd-main {
    max-width: calc(var(--web-max) + var(--web-gut) * 2);
    padding: 0 var(--web-gut) 72px;
  }

  /* Поля даёт сцена — телефонные 16 px внутри каждого блока здесь лишние. */
  .fd-pad { padding-left: 0; padding-right: 0; }

  /* Вход и код — единственные экраны без шапки и навигации (класс ставит
     оболочка). Мера контента им не нужна: тёмная страница входа, обрезанная по
     колонке, читается как незакрашенная карточка со светлыми полями по бокам. */
  body.fd-bare .fd-main { max-width: none; padding-left: 0; padding-right: 0; }

  /* Заголовок экрана на вебе крупнее: он единственная точка входа в страницу,
     шапка над ним — навигация, а не название раздела. */
  .fd-screen > .fd-list > h1.fd-h1 { font-size: 30px; letter-spacing: -1px; }

  /* Экраны-списки начинаются не от самой шапки. Отступ тот же, что на телефоне
     (`.fd-screen > .fd-pad:first-child` в screens.css), только крупнее: иначе к
     нему прибавился бы телефонный и получилось бы два отступа подряд. */
  .fd-screen > .fd-pad:first-child { padding-top: 28px; }

  /* Вкладки ВНУТРИ списка (брони, мои клубы) — обычный переключатель, а не
     липкая стеклянная полоса: липнуть ей здесь некуда и незачем. */
  .fd-list > .fd-tabs {
    position: static;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    overflow: visible;
  }

  /* ── тост: угол экрана, а не полоса во всю ширину ─────────────────────── */
  .fd-toasts { left: auto; right: var(--web-gut); bottom: 24px; width: 380px; }
  .fd-toast { text-align: left; }

  /* ── шторка снизу становится модалкой по центру ────────────────────────── */
  .fd-sheet-back { align-items: center; padding: 24px; }
  .fd-sheet {
    max-width: 460px;
    border-radius: var(--r-2xl);
    padding: 22px;
    max-height: 78vh;
    box-shadow: 0 24px 70px rgba(20, 19, 26, .28);
    animation: fd-pop .18s var(--ease);
  }
  .fd-sheet .fd-sheet-grip { display: none; }
  @keyframes fd-pop { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  .fd-cityopt { padding: 13px 15px; }

  /* ══ каталог: рельса фильтров + сетка карточек ═════════════════════════════
     На телефоне фильтры — липкая полоса над лентой: другого места нет. На вебе
     полоса во всю ширину монитора превращала переключатель «Списком / На карте»
     в тумблер размером с экран. Здесь они стоят в левой колонке и видны всё
     время, пока листаешь выдачу. */
  #s-clubs.on {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: var(--web-gap);
    align-items: start;
    padding-top: 28px;
  }

  #s-clubs > .fd-sticky {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  #s-clubs > .fd-sticky .fd-pad { padding: 0; }

  /* «Списком / На карте» — две строки-кнопки, а не сегмент во всю ширину. */
  #s-clubs > .fd-sticky .fd-seg {
    flex-direction: column;
    background: none;
    border-radius: 0;
    padding: 0;
    gap: 6px;
    max-width: none;
  }
  #s-clubs > .fd-sticky .fd-seg button {
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: none;
  }
  #s-clubs > .fd-sticky .fd-seg button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  #s-clubs > .fd-sticky .fd-seg button i { font-size: 18px; }

  /* Чипы фильтров — вертикальный список: горизонтальная лента с прокруткой
     нужна там, где не хватает ширины, а здесь её хватает. */
  #s-clubs > .fd-sticky .fd-chips {
    flex-direction: column;
    align-items: stretch;
    overflow: visible;
    gap: 6px;
    padding: 14px 0 0;
    border-top: 1px solid var(--line);
  }
  #s-clubs > .fd-sticky .fd-chip { border-radius: var(--r-md); padding: 10px 14px; text-align: left; }

  #s-clubs > .fd-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  #s-clubs > .fd-list > .fd-caprow,
  #s-clubs > .fd-list > .fd-empty,
  #s-clubs > .fd-list > .fd-gap { grid-column: 1 / -1; }
  #s-clubs > .fd-list > .fd-caprow { padding-top: 0; }

  /* Карточки выдачи — одного вида: обложка сверху, тело под ней. Плотная
     строка `.fd-row2` живёт горизонтальной на телефоне, где ширина дороже
     высоты; в колонке 300 px она превращается в обрубок с полоской обложки. */
  #s-clubs .fd-row2 { flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
  #s-clubs .fd-row2-cover { width: 100%; height: 148px; min-height: 0; border-radius: 0; align-self: auto; }
  #s-clubs .fd-row2-body { padding: 13px 15px 15px; gap: 6px; }
  /* Первая карточка — та, где сейчас играют, и по дизайну она крупная: имя
     лежит на обложке, а не под ней. В общей сетке эта разница должна читаться
     как решение, а не как сбой, поэтому обложка у неё выше остальных. */
  #s-clubs .fd-hero-cover { height: 178px; }
  #s-clubs .fd-hero-body { padding: 13px 15px 15px; }

  /* ══ клуб: обложка-баннер + панель брони справа ════════════════════════════
     Экран отдаёт пять блоков подряд (обложка, цифры, вкладки, дни, тело) и док.
     Строки расставлены явно, чтобы док мог занять правую колонку во всю высоту
     контента: только тогда `sticky` держит его на экране, а не в своей строке. */
  #s-club.on,
  #s-event.on,
  #s-confirm.on {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-w);
    column-gap: var(--web-gap);
    align-content: start;
  }
  /* Колонок всегда две — даже когда дока нет (вкладки «О клубе», «Рейтинг»,
     «Отзывы»). Схлопывать сетку в одну колонку нельзя: переключение вкладки
     меняло бы ширину всей страницы, обложка и полоса цифр прыгали бы под
     курсором, а строки уезжали бы на 1240 px. Пустая колонка справа — тише,
     чем перекладка страницы на каждый клик. */

  #s-club > *, #s-event > *, #s-confirm > * { grid-column: 1; }

  #s-club > .fd-clubHero { grid-area: 1 / 1 / 2 / -1; }
  #s-club > .fd-clubStats { grid-row: 2; }
  #s-club > .fd-tabs { grid-row: 3; }
  #s-club > .fd-days { grid-row: 4; }
  #s-club > .fd-list { grid-row: 5; }
  #s-club > .fd-dock { grid-area: 2 / 2 / 6 / 3; }

  /* Обложка — баннер в мере контента, со скруглением: на всю ширину монитора
     она читается как заливка страницы, а имя клуба теряется в углу. */
  #s-club > .fd-clubHero {
    position: relative;
    min-height: 260px;
    margin-top: 28px;
    padding: 24px 28px;
    border-radius: var(--r-2xl);
    overflow: hidden;
  }
  /* Затемнение снизу: у баннера этого размера имя лежит на светлой части
     обложки чаще, чем на телефоне. */
  #s-club > .fd-clubHero::after {
    content: '';
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(180deg, rgba(16, 15, 23, 0), rgba(16, 15, 23, .55));
  }
  #s-club > .fd-clubHero > * { position: relative; z-index: 1; }
  #s-club .fd-clubHeroName .fd-h1 { font-size: 34px; letter-spacing: -1.2px; }
  #s-club .fd-hero-sub { font-size: 14px; }

  /* Полоса цифр: на телефоне три ячейки делят ширину поровну — там она равна
     экрану. Растянутая на 800 px, она превращается в три числа посреди пустых
     полей, поэтому здесь ячейки прижаты к левому краю и читаются как подпись
     под именем клуба. */
  #s-club > .fd-clubStats {
    margin-top: 18px;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    justify-content: flex-start;
  }
  #s-club > .fd-clubStats > div {
    flex: none;
    min-width: 148px;
    padding: 15px 24px;
    text-align: left;
  }
  #s-club > .fd-clubStats b { font-size: 22px; }
  #s-club > .fd-clubStats span { font-size: 11.5px; }

  /* Вкладки клуба — обычная строка. Липкой ей на вебе быть нельзя: липкий
     элемент держится внутри своей ячейки сетки, а растянуть ячейку на строки
     ниже значило бы положить вкладки поверх контента. */
  #s-club > .fd-tabs {
    position: static;
    margin-top: 20px;
    padding: 0 0 12px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    overflow: visible;
  }
  #s-club > .fd-tabs .fd-tab { padding: 10px 16px; }
  /* Дни афиши переносятся на вторую строку, а не уезжают в горизонтальную
     прокрутку: пролистывать ленту пальцем на вебе нечем, а дни, которых не
     видно, читаются как «клуб играет только на этой неделе». */
  #s-club > .fd-days { padding-top: 16px; flex-wrap: wrap; overflow: visible; }

  /* Кнопка на всю ширину колонки — телефонный приём: там она равна экрану и
     ловит палец. На вебе кнопка размером с кнопку. */
  #s-club > .fd-list > .fd-btn.wide,
  #s-event > .fd-list > .fd-btn.wide { width: auto; align-self: flex-start; padding: 14px 24px; }
  #s-club > .fd-list { padding-top: 16px; }

  /* Расписание: время слева отдельной колонкой — на вебе есть место для того,
     чтобы вечер читался сверху вниз по часам. */
  #s-club .fd-schedTime { width: 68px; }
  #s-club .fd-schedTime .fd-num { font-size: 19px; }

  /* ── турнир ───────────────────────────────────────────────────────────── */
  #s-event > .fd-eventHead { grid-area: 1 / 1 / 2 / -1; }
  #s-event > .fd-list { grid-row: 2; }
  #s-event > .fd-dock { grid-area: 2 / 2 / 3 / 3; }

  /* Шапка турнира: название слева, цифры вечера — справа по нижнему краю.
     Столбиком друг под другом они оставляли справедливую половину баннера
     пустой, а это те самые четыре числа, из-за которых на экран и заходят. */
  #s-event > .fd-eventHead {
    margin-top: 28px;
    padding: 26px 30px 28px;
    border-radius: var(--r-2xl);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 36px;
  }
  #s-event > .fd-eventHead > .fd-eventTop { grid-column: 1 / -1; }
  #s-event > .fd-eventHead > .fd-eventTags,
  #s-event > .fd-eventHead > h1 { grid-column: 1; }
  #s-event > .fd-eventHead h1 { font-size: 34px; letter-spacing: -1.2px; }
  #s-event > .fd-eventHead > .fd-eventFacts {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: end;
    margin-top: 0;
    gap: 32px;
    flex-wrap: nowrap;
  }
  #s-event > .fd-eventHead .fd-eventFacts b { font-size: 24px; }
  #s-event > .fd-list { padding-top: 22px; }

  /* ── подтверждение брони ──────────────────────────────────────────────── */
  #s-confirm.on { padding-top: 28px; }
  #s-confirm > .fd-list { grid-row: 1; }
  #s-confirm > .fd-dock { grid-area: 1 / 2 / 2 / 3; }

  /* ── панель действия справа (был телефонный док) ───────────────────────── */
  #s-club > .fd-dock,
  #s-event > .fd-dock,
  #s-confirm > .fd-dock {
    position: sticky;
    top: calc(var(--header-h) + 28px);
    bottom: auto;
    align-self: start;
    z-index: 1;
    background: none;
    padding: 0;
    margin-top: 18px;
  }
  #s-confirm > .fd-dock { margin-top: 0; }

  .fd-dock .fd-dockCard {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
  }
  .fd-dock .fd-dockCard .fd-dockText { flex: none; }
  .fd-dock .fd-dockCard .fd-nextTitle { font-size: 16px; }
  .fd-dock .fd-dockCard .fd-btn,
  .fd-dock .fd-dockWide .fd-btn {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    border-radius: var(--r-md);
  }
  .fd-dock .fd-dockWide {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px;
    box-shadow: var(--shadow);
  }

  /* ── билет: карта, а не страница ───────────────────────────────────────── */
  #s-ticket > .fd-list { max-width: 520px; margin: 0 auto; }

  /* ── одноколоночные экраны ────────────────────────────────────────────── */
  #s-friends > .fd-list,
  #s-profile > .fd-list,
  #s-rating > .fd-list,
  #s-edit > .fd-list { max-width: var(--read-w); margin: 0 auto; }
  /* Обложка профиля и липкие верхушки правки и рейтинга держат ту же меру, что
     и содержимое под ними: тёмная панель во всю ширину монитора перестаёт быть
     обложкой и становится баннером. */
  #s-profile > .fd-profCover { max-width: var(--read-w); margin: 0 auto; border-radius: var(--r-xl); padding: 18px; }
  #s-edit > .fd-sticky,
  #s-rating > .fd-sticky { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
  #s-edit > .fd-sticky > .fd-backrow,
  #s-rating > .fd-sticky > .fd-backrow,
  #s-rating > .fd-sticky > .fd-pad { max-width: var(--read-w); margin: 0 auto; padding-left: 0; padding-right: 0; }
  /* Строка «выйти» и пунктирные строки-подсказки — не полосы во всю меру. */
  #s-profile > .fd-list > .fd-btn.wide,
  #s-edit > .fd-list > .fd-btn.wide { width: auto; align-self: flex-start; padding: 14px 22px; }

  /* Код и ник — форма, а не страница: колонка та же, что у входа, а поле кода
     ровно под четыре цифры. Растянутое на 720 px, оно читается как строка
     поиска. */
  #s-code > .fd-list,
  #s-nick > .fd-list { max-width: 460px; margin: 0 auto; }
  .fd-codeInput { max-width: 320px; margin: 0 auto; display: block; }

  /* ── брони и мои клубы: выдача в две колонки ───────────────────────────── */
  #s-bookings > .fd-list,
  #s-myclubs > .fd-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  #s-bookings > .fd-list > h1,
  #s-bookings > .fd-list > .fd-tabs,
  #s-bookings > .fd-list > .fd-empty,
  #s-bookings > .fd-list > .fd-btn,
  #s-myclubs > .fd-list > h1,
  #s-myclubs > .fd-list > .fd-tabs,
  #s-myclubs > .fd-list > .fd-empty,
  #s-myclubs > .fd-list > .fd-gap,
  #s-myclubs > .fd-list > .fd-addRow,
  #s-myclubs > .fd-list > .fd-btn { grid-column: 1 / -1; }
  /* Кнопка на всю ширину сцены — это уже не кнопка, а полоса. */
  #s-bookings > .fd-list > .fd-btn.wide,
  #s-myclubs > .fd-list > .fd-btn.wide { width: auto; justify-self: start; padding: 14px 22px; }
  #s-myclubs > .fd-list > .fd-addRow { justify-self: start; width: auto; min-width: 320px; }

  /* ── вход ─────────────────────────────────────────────────────────────── */
  /* Шапки на этом экране нет (её снимает оболочка), поэтому форма центрируется
     по всему окну, а не под шапкой. */
  .fd-loginWrap { min-height: 100vh; justify-content: center; }
  .fd-loginTop, .fd-loginBody { max-width: 460px; margin: 0 auto; width: 100%; }
  .fd-loginBody { padding: 32px 22px 40px; }

  /* ══ карта: список рядом с картой ═══════════════════════════════════════
     На телефоне список — шторка снизу поверх карты, потому что показать оба
     сразу негде. На вебе они стоят рядом, и переключать режим не нужно; город
     и поиск живут в шапке, поэтому свои копии над картой здесь скрыты. */
  #s-map.on { position: fixed; inset: var(--header-h) 0 0; }
  /* Список стоит рядом, а не поверх карты, — значит закрывать её низ нечем, и
     подгонять клубы «под шторку» больше не нужно (см. --mm-fit-reserve в
     #shared/lib/minimap.js: по умолчанию там телефонные 220 px). */
  .fd-mapCanvas { left: var(--map-rail); --mm-fit-reserve: 48px; }
  .fd-mapTop, .fd-mapSeg { display: none; }
  .fd-mapSheet {
    top: 0; right: auto; bottom: 0;
    width: var(--map-rail);
    height: auto;
    border-radius: 0;
    border-right: 1px solid var(--line);
    box-shadow: none;
    padding-top: 18px;
  }
  .fd-mapSheet .fd-sheet-grip { display: none; }
  .fd-mapSheetHead { padding: 4px 20px 12px; }
  .fd-mapList { padding: 0 20px 24px; }
  .mm-zoom { right: 16px; bottom: 16px; }
  .mm-credit { left: 8px; bottom: 6px; }

  /* ══ посадочная страница ═══════════════════════════════════════════════ */
  .fd-heroWeb {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
    gap: 48px;
    align-items: start;
    padding: 56px 0 28px;
  }
  .fd-display { font-size: 48px; letter-spacing: -1.8px; }
  .fd-lead { font-size: 16.5px; }
  .fd-searchBar { flex-wrap: nowrap; padding: 9px; }
  .fd-searchCell { min-width: 150px; gap: 10px; padding: 10px 12px; }
  .fd-searchCell i { display: block; }

  /* Маркетинговая часть Главной — только здесь: на телефоне это рабочий экран.
     Каждый носитель `wideOnly` возвращается со своим display: `revert` отдал бы
     нам блок от браузера и сломал бы .fd-sect (там flex-колонка). */
  .fd-sect.wideOnly { display: flex; }
  .fd-btn.wideOnly { display: inline-flex; }
  .fd-badge2.wideOnly { display: inline-flex; }
  .fd-lead.wideOnly, .fd-sub.wideOnly { display: block; }

  /* Цифры каталога: на телефоне строка с точками, здесь — три крупных числа. */
  .fd-facts { gap: 34px; align-items: flex-start; }
  .fd-facts > div { display: block; }
  .fd-facts > div + div::before { display: none; }
  .fd-facts b { display: block; font-size: 30px; line-height: 1; }
  .fd-facts span { font-size: 12.5px; font-weight: 700; }

  /* Карточка «кто играет сейчас» стоит в колонке рядом с заголовком — места
     больше, чем на телефоне, поэтому строки просторнее, а клубов в блоке ниже
     все шесть, а не три. */
  .fd-nowCard > .fd-liveHead { padding: 15px 16px 0; }
  .fd-nowCard > .fd-whenSeg { margin: 12px 16px 13px; }
  .fd-tonight { padding: 13px 16px; gap: 12px; }
  .fd-tonightTime { width: 68px; }
  .fd-nowAll { padding: 14px; }
  .fd-grid3 > .fd-homeClub:nth-child(n + 4) { display: flex; }

  .fd-band { margin: 4px 0; padding: 14px 18px; }
  .fd-sect { padding: 44px 0; gap: 20px; }
  .fd-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .fd-homeCover { height: 148px; }

  /* Полоса про рейтинг — карточка в мере контента: во всю ширину окна её
     нельзя вытянуть, не выйдя за колонку и не поймав горизонтальную прокрутку
     на ширину полосы прокрутки. */
  .fd-sect.fd-rpBand {
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    padding: 36px 40px;
    margin: 8px 0;
  }
  .fd-cityGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══ 1024–1199: узкий веб ═══════════════════════════════════════════════════
   Шапка здесь на пределе: бренд, четыре раздела, поиск, город и профиль в 968 px
   не влезают в один рост. Убираем то, что дублируется или подсказывается
   иконкой, — ник рядом с аватаром и лишние отбивки. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .fd-header-in { gap: 8px; }
  .fd-nav a { padding: 10px 9px; font-size: 13.5px; }
  .fd-me .nickWide { display: none; }
  .fd-me { padding: 5px; }
  :root { --rail-w: 208px; --side-w: 300px; }
}

/* ═══ ≥1320: широкий экран ═══════════════════════════════════════════════════ */
@media (min-width: 1320px) {
  #s-clubs > .fd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #s-club > .fd-clubHero { min-height: 300px; }
  .fd-display { font-size: 54px; }
  .fd-heroWeb { gap: 56px; }
}

/* ═══ ≥1600: очень широкий ═══════════════════════════════════════════════════
   Мера растёт один раз и останавливается: дальше растёт не текст, а поля. */
@media (min-width: 1600px) {
  :root { --web-max: 1360px; --side-w: 368px; }
}

/* ═══ мышь есть — показываем отклик на наведение ══════════════════════════════
   На тач-экранах :hover залипает после тапа, поэтому только для точного
   указателя. */
@media (hover: hover) and (pointer: fine) {
  .fd-card[data-act]:hover { border-color: var(--line2); box-shadow: var(--shadow); }
  .fd-row[data-act]:hover { background: var(--surface2); }
  .fd-tab:hover:not(.on) { background: var(--surface2); }
  .fd-chip:hover:not(.on) { border-color: var(--line2); }
  .fd-nav a:hover:not(.on) { background: var(--surface2); color: var(--ink); }
  .fd-cityCard:hover, .fd-tonight:hover { border-color: var(--line2); box-shadow: var(--shadow-s); }
  .fd-searchCell:hover { background: var(--surface2); }
}