/* WELLEX DECK — MOBILE
 *
 * Телефонная вёрстка колод. Подключается ПОСЛЕ wellex-deck-bundle.css и
 * действует только на экранах уже 861px — ровно там, где wellex-deck-chrome.js
 * отключает масштабирование холста и слайды идут лентой.
 *
 * Зачем отдельный файл: в бандле телефонные правила есть, но более поздние
 * десктопные заплатки с большей специфичностью (body.serif-body .slide.split…)
 * их перебивают, и на телефоне оставались две-три колонки шириной в слово.
 * Здесь всё с !important и под одним медиазапросом, поэтому десктоп и режим
 * показа (body.present) не затрагиваются.
 */
@media screen and (max-width:860px){

  /* ── поля: 64px с каждой стороны на экране в 390px оставляли тексту треть ── */
  html:root{--slide-pad:20px!important}
  html body:not(.present) .slide{
    width:auto!important;margin-left:10px!important;margin-right:10px!important;
    height:auto!important;max-height:none!important;aspect-ratio:auto!important;
  }
  html body:not(.present) .slide *{min-width:0}
  /* Десктопные потолки высоты (max-height под холст 720px) на телефоне
     обрезали всё, что не влезло: ответы в вопросах, половину значков.
     Снимаем их со всего, кроме медиа, — текст растёт вниз, как лента. */
  html body:not(.present) .slide :not(img,picture,video,svg,svg *,.sp,.cbg,.qrbox,.qrbox *,.appshot,.appshot *){max-height:none!important}
  /* Фолио (номер слайда): бандл на телефоне делает его relative со сдвигом
     top:-26px, и он наезжал на сноску. Ставим его в поток, последней строкой. */
  html body:not(.present) .slide:not(.split){padding-bottom:22px!important}
  /* у фото-слайдов (.bleed, .gal) поля лежат на внутреннем блоке, не на слайде */
  html body:not(.present) .slide:is(.bleed,.gal)>.folio{margin:22px 20px 0!important}
  html body:not(.present) .slide .folio{
    position:relative!important;inset:auto!important;transform:none!important;
    margin:22px 0 0!important;left:auto!important;right:auto!important;width:auto!important;
  }
  html body:not(.present) .slide :is(h1,h2,h3,p,b,span,li,blockquote,div){overflow-wrap:break-word}

  /* ── сплит: фото сверху, текст на всю ширину под ним ── */
  html body:not(.present) .slide.split,
  html body:not(.present) .slide.split.flip{
    display:flex!important;flex-direction:column!important;padding:0!important;
  }
  html body:not(.present) .slide.split>.sp{
    order:-1!important;flex:none!important;height:300px!important;width:100%!important;
  }
  html body:not(.present) .slide.split>.sc{
    flex:none!important;width:100%!important;
    padding:26px 20px 8px!important;
  }
  html body:not(.present) .slide.split .folio{margin:8px 20px 22px!important;order:99!important}

  /* ── .hflight: на десктопе текст живёт на левых 52%, справа фото. На телефоне
     фото скрыто, а потолок ширины оставался — текст сжимался в полосу. ── */
  html body:not(.present) .slide.hflight>*:not(picture){max-width:none!important}

  /* ── сетки карточек и схем — в одну колонку ── */
  html body:not(.present) .slide :is(
    .cols,.cols.c3,.cols.wide,.dcards,.metrics,.split-img,.sq-matrix,.obj,.steps3,.vcard,
    .appsplit,.approw,.table7,.chain4,.cchain,.paysplit,.fx-grid,.bdg,.eqr,.calc,.calcs,.stp,.ranks,.mp-zones,.mp-track
  ){
    grid-template-columns:1fr!important;grid-auto-flow:row!important;
  }

  /* ── инфографика (.igs): один рисунок 1280×720. Сжатый до 390px текст на нём
     не читается — показываем вдвое крупнее и даём листать пальцем вбок. ── */
  html body:not(.present) .slide.igs{overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;scroll-snap-type:none;padding:0!important}
  html body:not(.present) .slide.igs>img.ig,
  html body:not(.present) .slide.igs>picture>img{width:780px!important;max-width:none!important;height:auto!important;display:block}
  html body:not(.present) .slide.igs .folio{position:sticky!important;left:20px!important;margin:10px 20px 16px!important}

  /* ── снимки приложения: телефон в рамке не шире 240px, по центру ── */
  html body:not(.present) .slide :is(.appsplit,.approw) .appshot{width:min(240px,100%)!important;max-width:240px!important;max-height:none!important;margin:0 auto!important;display:block!important;flex:none!important}
  html body:not(.present) .slide :is(.appsplit,.approw) .appshot img{width:100%!important;height:auto!important}

  html body:not(.present) .slide .approw figure{display:flex!important;flex-direction:column!important;gap:14px!important;margin:0!important}

  /* ── фото-слайды (.bleed): на десктопе скрим тёмный слева и прозрачный
     справа, потому что текст слева. На телефоне текст во всю ширину, и белые
     строки ложились на светлую часть кадра — скрим делаем ровным. ── */
  html body:not(.present) .slide.bleed>.scrim{
    background:linear-gradient(180deg,rgba(20,16,14,.58) 0%,rgba(20,16,14,.72) 45%,rgba(20,16,14,.88) 100%)!important;
    opacity:1!important}

  /* ── «петля» (лидеры, слайд 4): четыре карточки по углам круга. На телефоне
     круг не читается — идём списком по шагам, стрелки и центр прячем. ── */
  html body:not(.present) .slide .cycle{display:flex!important;flex-direction:column!important;gap:12px!important;height:auto!important;min-height:0!important}
  html body:not(.present) .slide .cycle>.ring,
  html body:not(.present) .slide .cycle>.cychub{display:none!important}
  html body:not(.present) .slide .cycle>.cyc{grid-column:auto!important;grid-row:auto!important;width:100%!important;
    display:grid!important;grid-template-columns:44px 1fr!important;gap:14px!important;align-items:start!important}

  /* ── таблица рангов: шесть колонок не помещаются — листается вбок внутри карточки ── */
  html body:not(.present) .slide table.ranks{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;max-width:100%}
  html body:not(.present) .slide table.ranks td,
  html body:not(.present) .slide table.ranks th{white-space:nowrap!important;padding:6px 9px!important}

  /* ── полоса долей: подписи переносятся внутри сегмента, а не обрезаются ── */
  html body:not(.present) .slide .pctrack{height:auto!important;min-height:34px;align-items:stretch!important}
  html body:not(.present) .slide .pcseg{white-space:normal!important;overflow:visible!important;height:auto!important;
    line-height:1.3!important;padding:7px 8px!important;font-size:11px!important;text-overflow:clip!important}

  /* ── подписи мельче 11px на телефоне не читаются ── */
  html body:not(.present) .slide :is(.fc,.cstep,.eqh,.jn,.ju,.jwlab,.rc-k,.qrurl,.vc-k,.sh){font-size:11px!important}

  /* ── закрывающий слайд: QR над подписью, ссылка не рвётся посреди слова ── */
  html body:not(.present) .slide .vc-q{flex-wrap:wrap!important;gap:14px!important}
  html body:not(.present) .slide .vc-q .qrurl{overflow-wrap:anywhere;word-break:normal}
}

/* ── десктоп: единственная правка вне телефона ──
   На .split.apphero фолио оказывалось position:relative и третьим элементом
   двухколоночной сетки уезжало в новую строку — под нижний край слайда
   (продуктовая колода, слайд 12). Прижимаем его к низу, как на остальных сплитах. */
@media screen and (min-width:861px){
  html body .slide.split.apphero>.folio{position:absolute!important;bottom:26px!important}
}

/* ── логотип в шапке колоды — ссылка на главную; не даём флексу сжать его в ноль ── */
.deckbar .lock-home{display:block;flex:none;line-height:0}

/* ── шапка колоды на телефоне: 530px в экране 390px — счётчик и «Показ» уезжали
   за край. Бейдж «Confidential» и «Сохранить PDF» на телефоне не нужны. ── */
@media screen and (max-width:560px){
  .deckbar .conf,.deckbar .pbtn{display:none!important}
}
@media screen and (max-width:400px){
  .deckbar{gap:8px!important;padding-left:12px!important;padding-right:12px!important}
  .deckbar .lang-btn{padding-left:10px!important;padding-right:10px!important}
}
@media screen and (max-width:340px){ .deckbar #pos{display:none!important} }

/* ── ссылка регистрации под QR на закрывающем слайде: была бледно-серой на белом
   (контраст ниже нормы) — это главная ссылка колоды, делаем её читаемой ── */
html body .vcard .qrurl{color:#4A4744!important}
/* заголовки колонок таблицы рангов (лидеры, слайд 20) были ниже нормы контраста */
html body .slide table.ranks th{color:#5C5C58!important}