/* Сайт клуба на широком экране.

   МАКЕТА ДЕСКТОПА ПОКА НЕТ: вкладка у дизайнера не доделана. Здесь временная
   адаптация, и она намеренно скупая — задача одна: чтобы телефонный экран,
   открытый на планшете или в браузере, не выглядел растянутым телефоном.
   Телефонную раскладку эти правила не трогают ни строкой: всё внутри
   медиа-запроса.

   Правило адаптации одно — КОЛОНКА. Содержимое перестаёт растягиваться на всю
   ширину и встаёт в колонку по центру; вместе с ним встают шапка и нижняя
   навигация, иначе кнопка в углу шапки уезжает от карточек на пол-экрана. */

@media (min-width: 768px) {
  :root {
    /* Шире телефона, но не настолько, чтобы карточка вечера превратилась в
       полосу: её внутренняя раскладка рассчитана на узкое. */
    --cs-col: 620px;
  }

  /* Шапка перестаёт быть фиксированной.

     На телефоне она висит над содержимым и проявляется на прокрутке — так в
     макете. На широком экране в этом нет смысла: прокрутка короче, а полоса
     во всю ширину с заголовком слева и кнопкой справа читается как чужая
     панель. Заодно из неё уходят фильтры — на телефоне они часть шапки,
     здесь это просто первая строка страницы. */
  .fd-header, .csHead {
    position: static;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    /* Своих 26px здесь больше нет: отступ сверху на сайте один (`--cs-top`).
       Правило осталось, чтобы снять с шапки добавку на «чёлку» — в окне
       браузера выреза нет, а `env()` на телефоне в альбомной ориентации
       вернул бы не ноль. */
    padding-top: var(--cs-top);
  }
  .fd-header, .csHead, .csHeadTop, .tFilters,
  .csPage, .tPage, .csHeroIn, .csTilesWrap,
  .evTopIn, .evTabs, .evBody,
  /* `.dnTop` в колонку НЕ ставим: на нём свечение вечера, и оно должно
     остаться во всю ширину — ради этого подложка и содержимое у итогов
     разведены на два узла, как у живого вечера. */
  .dnTopIn, .dnPage,
  .rtTop, .rtList {
    max-width: var(--cs-col);
    margin-left: auto;
    margin-right: auto;
  }
  /* Отступ сверху ставила фиксированная шапка — теперь она в потоке. */
  .tPage { padding-top: 10px; }
  .evTopIn { padding-top: 10px; }
  .csHeroIn { padding-top: 10px; }

  /* Липкие строки вкладок — тем же правилом, что и шапка выше, и по той же
     причине, доведённой до конца.

     Полоса под вкладками не украшение: она НЕПРОЗРАЧНАЯ и гасит содержимое,
     проезжающее под таблеткой. Красится она плоским `--bg`, а страница под
     ней светится (base.css): свечение задано долей ВЫСОТЫ ОКНА, и на телефоне
     оно кончается ровно там, где начинаются вкладки, — как в макете. На
     широком экране всё съезжает вверх (шапка уходит в поток, у визитки
     остаётся 10px сверху), вкладки оказываются в самой яркой части свечения,
     и плоская полоса читается чёрным прямоугольником поперёк страницы. В
     колонке шириной 620px это прямоугольник посреди светящегося фона —
     отсюда и «выбивается».

     Поэтому здесь полоса не липнет и не красится: гасить ей нечего — на
     широком экране не липнет и шапка, и над вкладками ничего не проезжает. */
  .abTabsWrap, .boTabsWrap, .evTabsWrap {
    position: static;
    background: none;
  }

  /* Календарь падает из-под строки фильтров, а не из-под шапки во всю
     ширину: якорь у него тот же, что был, но ширина — колонки. */
  .tCal {
    left: 50%; right: auto;
    width: var(--cs-col);
    transform: translateX(-50%) translateY(-8px) scaleY(.92);
    border-radius: 0 0 20px 20px;
    border: 1px solid var(--line); border-top: 0;
  }
  .tCal.on { transform: translateX(-50%); }

  /* Навигация — той же колонкой, иначе таблетка висит от края до края и
     пять кнопок разъезжаются по сто пикселей друг от друга. */
  .fd-tabbar { left: 50%; right: auto; width: var(--cs-col); transform: translateX(-50%); }
  .evDock { left: 50%; right: auto; width: var(--cs-col); transform: translateX(-50%); padding-left: 0; padding-right: 0; }
  .fd-toasts { left: 50%; right: auto; width: var(--cs-col); transform: translateX(-50%); }
  .rtSeasons { left: 50%; right: auto; width: var(--cs-col); transform: translateX(-50%); }

  /* Шторки тоже не во всю ширину: лист бумаги, а не полоса. */
  .bkSheet, .fd-sheet {
    left: 50%; right: auto;
    width: var(--cs-col);
    transform: translateX(-50%);
    border-radius: 28px 28px 0 0;
  }
  @keyframes csSheetUp { from { transform: translateX(-50%) translateY(100%) } to { transform: translateX(-50%) } }
}

/* Совсем широкий экран: колонка не растёт дальше — растёт воздух вокруг.
   Раскладку в две колонки отложили до макета: придумывать её за дизайнера
   значит потом переделывать. */
@media (min-width: 1200px) {
  :root { --cs-col: 680px; }
}