/* Мобильная версия = веб-приложение (решение Бро 13.10.2026): те же страницы и то же содержимое,
   на экране телефона включается слой приложения — верхняя панель, нижние вкладки, «шторки» снизу,
   навигация по разделам, закреплённая кнопка записи, карусели, переходы между экранами.
   Всё ниже действует только при ширине до 820px; десктоп не меняется. */

.abar,.tabs,.cbar,.secnav{display:none}

@media (max-width:820px){
  :root{--tabs-h:64px;--safe-b:env(safe-area-inset-bottom,0px)}
  html{scroll-padding-top:120px;-webkit-tap-highlight-color:transparent}
  body{padding-bottom:calc(var(--tabs-h) + var(--safe-b))}
  body.has-cbar{padding-bottom:calc(var(--tabs-h) + var(--safe-b) + 72px)}
  .top{display:none}

  /* верхняя панель приложения: прозрачная над обложкой, плотная после прокрутки */
  .abar{display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;top:0;z-index:40;height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 10px 0;color:#fff;transition:background .25s,color .25s,box-shadow .25s}
  .abar.solid{background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);color:var(--ink);box-shadow:0 1px 0 var(--line)}
  .abar .ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:rgba(10,17,36,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:inherit}
  .abar.solid .ib{background:var(--snow)}
  .abar .ib svg{width:22px;height:22px}
  .abar .ttl{flex:1;min-width:0;font:700 15px/1.2 var(--f-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
  .abar.solid .ttl{opacity:1;transform:none}
  .abar .lg{display:flex;align-items:center;gap:8px;font:800 14px var(--f-head);letter-spacing:.02em}
  .abar .lg i{width:32px;height:32px;border-radius:8px;display:block;flex:none}
  .abar .lg i img{width:100%;height:100%;display:block;border-radius:inherit}
  .abar.solid .lg{color:var(--ink)}

  /* нижние вкладки */
  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(var(--tabs-h) + var(--safe-b));padding:6px 4px var(--safe-b);background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);border-top:1px solid var(--line)}
  .tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;color:#7B8794;letter-spacing:.01em}
  .tabs svg{width:25px;height:25px;transition:transform .2s var(--ease)}
  .tabs a.on{color:var(--blue)}
  .tabs a.on svg{transform:translateY(-1px);filter:drop-shadow(0 3px 6px rgba(37,99,235,.35))}

  /* навигация по разделам лендинга — «чипсы» под панелью */
  .secnav{display:flex;gap:8px;position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:30;overflow-x:auto;scrollbar-width:none;padding:10px 16px;margin:0 -16px;background:rgba(245,247,249,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .secnav::-webkit-scrollbar{display:none}
  .secnav a{flex:none;height:34px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;font:700 11.5px var(--f-head);letter-spacing:.03em;color:var(--ink-2);white-space:nowrap;transition:background .2s,color .2s}
  .secnav a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

  /* закреплённая кнопка записи над вкладками */
  .cbar{display:flex;align-items:center;gap:12px;position:fixed;left:10px;right:10px;bottom:calc(var(--tabs-h) + var(--safe-b) + 8px);z-index:44;padding:10px 10px 10px 18px;border-radius:18px;background:var(--g-ink);color:#fff;box-shadow:0 12px 30px rgba(10,17,36,.35);transform:translateY(140%);transition:transform .35s var(--ease)}
  .cbar.on{transform:none}
  .cbar .pr{flex:1;min-width:0}
  .cbar .pr small{display:block;font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cbar .pr b{font:800 18px var(--f-head);letter-spacing:-.02em}
  .cbar a{height:46px;padding:0 18px;border-radius:13px;background:var(--g-brand);display:flex;align-items:center;font:700 12.5px var(--f-head);letter-spacing:.04em;white-space:nowrap}

  /* окна → «шторки» снизу */
  .modal{align-items:flex-end!important;padding:0!important}
  .modal .fbox,.modal .box{max-width:none!important;width:100%;border-radius:26px 26px 0 0!important;max-height:92vh!important;padding:30px 20px calc(24px + var(--safe-b))!important;animation:sheetup .38s var(--ease)!important;touch-action:pan-y}
  .modal .fbox:before,.modal .box:before{content:"";position:absolute;left:50%;top:10px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line-2)}
  .modal .x{top:14px!important;right:14px!important}
  @keyframes sheetup{from{transform:translateY(100%)}}

  /* меню «Ещё» */
  .more-sheet .fbox{padding-top:34px!important}
  .more-sheet .ml{display:grid;gap:2px;margin:6px 0 16px}
  .more-sheet .ml a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--line);font:700 15px var(--f-head);letter-spacing:.02em}
  .more-sheet .ml a:after{content:"›";font-size:22px;color:var(--mute)}
  .more-sheet .acts2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .more-sheet .acts2 a{height:50px;border-radius:14px;display:grid;place-items:center;font-weight:700}
  .more-sheet .acts2 a:first-child{background:var(--g1);color:#fff}
  .more-sheet .acts2 a:last-child{background:var(--snow);border:1px solid var(--line)}
  .more-sheet .cty{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
  .more-sheet .cty a{padding:7px 12px;border-radius:999px;background:var(--snow);border:1px solid var(--line);font-size:13px;font-weight:600}

  /* карусели со свайпом вместо столбцов */
  .revs,.levels,.feed,.team{display:flex!important;columns:auto!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;margin:0 -16px;padding:4px 16px 14px;scrollbar-width:none}
  .revs::-webkit-scrollbar,.levels::-webkit-scrollbar,.feed::-webkit-scrollbar,.team::-webkit-scrollbar{display:none}
  .revs>.rev,.levels>.lvc,.feed>.post,.team>.tr{flex:0 0 84%;scroll-snap-align:center;margin:0!important}
  .feed>.post{display:block!important}
  .revs>.rev[hidden]{display:block}
  #revmore{display:none}
  .dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s,background .25s}
  .dots i.on{width:18px;background:var(--blue)}

  /* каталог — список как в приложении */
  .cat{grid-template-columns:1fr!important;gap:10px!important}
  .cc{flex-direction:row!important;align-items:stretch}
  .cc .im{flex:0 0 146px;height:auto!important;min-height:150px}
  .cc .lv{left:8px;top:8px;gap:3px}.cc .lv b{width:20px;height:20px;font-size:10px;border-radius:6px}
  .cc .bd{padding:14px 14px 14px!important;gap:6px!important}
  .cc .tt{font-size:16px!important}
  .cc .rich p,.cc .rich li{font-size:14px!important}

  /* увеличенное фото: свайп влево/вправо, вниз — закрыть; кнопки-стрелки не нужны */
  /* фото — плитка 2 колонки */
  .gal{columns:2!important;column-gap:8px!important}
  .gi{margin-bottom:8px!important;border-radius:16px!important}
  .gi .cap{padding:10px 11px 11px!important}.gi .cap b{font-size:13px!important}.gi .cap span{font-size:12px!important}

  /* календарь — месяцы чипсами, заезды карточками */
  .row{grid-template-columns:auto 1fr auto!important;gap:6px 12px!important;padding:14px 14px!important}
  .row .d{grid-column:1/2!important;font-size:19px!important}
  .row .r{grid-column:2/4}
  .row .c{grid-column:1/-1!important;font-size:15px}
  .row .s{grid-column:1/2;text-align:left!important;display:flex;align-items:baseline;gap:5px}
  .row .s b{font-size:18px!important}
  .row .go{grid-column:2/4;justify-self:end;height:42px!important}
  .month{margin-top:28px!important}

  /* лендинг — компактнее */
  .hero{min-height:78vh!important;min-height:78svh!important;padding:96px 0 70px!important}
  main{padding-top:6px!important}
  .sec{border-radius:22px!important}
  .ic{width:64px!important;height:64px!important;border-radius:18px!important}.ic svg{width:36px!important;height:36px!important}
  .grid{gap:12px!important}
  .cta{display:none!important}

  /* «Курсы по городам» и подвал — над вкладками */
  footer .wrap{padding-bottom:20px!important}
  .note{font-size:12px}

  /* переходы между экранами (браузеры с View Transitions) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .28s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .32s var(--ease) both}
  @keyframes vt-out{to{transform:translateX(-18%);opacity:.6}}
  @keyframes vt-in{from{transform:translateX(30%);opacity:.4}}
  html.back::view-transition-old(root){animation-name:vt-out-b}
  html.back::view-transition-new(root){animation-name:vt-in-b}
  @keyframes vt-out-b{to{transform:translateX(18%);opacity:.6}}
  @keyframes vt-in-b{from{transform:translateX(-30%);opacity:.4}}
  .abar,.tabs{view-transition-name:none}
  .tabs{view-transition-name:tabs}
  ::view-transition-old(tabs),::view-transition-new(tabs){animation:none}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .cbar,.abar .ttl{transition:none}
}