/* ═══════════════════════════════════════════════════════════
   ТЕЛЕФОН И ПЛАНШЕТ
   Отдельный файл и подключён последним: правки десктопа
   его не задевают, а он не спорит с ними на широком экране.

   Принцип: геометрия шва — десктопная история. На узком
   экране шва во вьюпорте физически нет (кадр обрезан),
   поэтому вместо двух колонок — одна, а порядок блоков
   переставлен под мобильный сценарий: сначала «когда, где
   и сколько стоит», потом действие, и только потом длинный
   рассказ. Контент не прячем — меняем очерёдность.
   ═══════════════════════════════════════════════════════════ */

/* якоря не должны заезжать под липкую шапку */
[id]{scroll-margin-top:clamp(62px,9vh,86px)}

/* картинка нигде не шире своего поля — на 768 вылетали на 4px */
img{max-width:100%}

@media (max-width:900px){

  /* ── ШАПКА ──────────────────────────────────────────
     Пять ссылок в 390px не помещаются: они ломали строку
     и выталкивали кнопку за экран. На линейной странице
     с липким действием внизу меню не нужно — оставляем
     знак и одно действие. */
  .nav-x__links{display:none}
  nav.nav-x{gap:14px;padding:11px var(--x-col)}
  .nav-x__logo-img{width:auto;height:19px}
  .btn-x--sm{padding:11px calc(16px + var(--x-bevel)) 11px 16px;font-size:11.5px}

  /* ── ПЕРВЫЙ ЭКРАН ───────────────────────────────────
     display:contents распускает обе колонки в общую
     сетку, дальше порядок задаётся вручную. */
  .hero-x__content{
    grid-template-columns:1fr;
    padding-right:var(--x-col);
    row-gap:0}
  .hx-left,.hx-right{display:contents}

  .facts       {order:1;margin-bottom:clamp(14px,2.4vh,22px)}
  .title-x     {order:2}
  .sub-x       {order:3;margin-top:clamp(18px,3vh,28px);font-size:clamp(23px,6.4vw,30px)}
  .hx-right .panel{order:4}
  .hx-right .panel:first-of-type{margin-top:clamp(20px,3.4vh,30px);
    border-top:1px solid rgba(238,244,250,.16);padding-top:clamp(16px,2.6vh,24px)}
  .cta-x       {order:5;margin-top:clamp(22px,3.6vh,32px)}
  .lead-x      {order:6;margin-top:clamp(26px,4vh,36px)}

  /* тайминг в две строки: рядом обрезалось «Деловая программ…» */
  .hours{display:grid;gap:clamp(12px,1.8vh,18px)}
  .hours>div{padding:0}
  .hours>div+div{border-left:0;border-top:1px solid rgba(238,244,250,.14);
    padding-top:clamp(12px,1.8vh,18px)}

  /* «До события 70 дней» одной строкой, пульс под ним */
  .pulse-x__val{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45em}

  /* оба действия во всю ширину поля */
  .cta-x{display:flex;flex-direction:column;align-items:stretch;
    gap:clamp(6px,1.2vh,12px);margin-left:0}
  .cta-x .btn-x{width:100%;text-align:center}
  .cta-x .btn-x--ghost{width:auto;align-self:flex-start;padding-left:0;padding-right:2px}
  .cta-x .btn-x--ghost::after{left:0;right:2px}
}

@media (max-width:900px){
  /* 48vw от ширины телефона — это 187px: заголовок финала
     ломался на четыре строки, кнопка была вдвое уже поля */
  .fin__in,.sig-x__in{max-width:none}
  .fin__t,.sig-x__t{text-wrap:pretty}

  /* пять слотов в ряд на телефоне превращаются в полоски */
  .logos-x{--cols:2!important}
  .logos-x .slot{min-height:clamp(62px,8.6vh,84px)}
  /* нечётный хвост тянем на всю ширину, иначе в последнем
     ряду светится пустая ячейка — читается как дыра */
  .logos-x .slot:last-child:nth-child(odd){grid-column:1/-1}

  /* числа: два в ряд тесно, ставим друг под друга */
  .nums{--cols:1!important}

  /* спикеры: в одну колонку портрет 3:4 занимал целый экран
     и сетка переставала читаться как состав */
  .spk{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spk__ph{aspect-ratio:4/5}
  .spk h3{font-size:var(--t-s)}
  .spk figcaption{padding:clamp(13px,1.8vh,18px) clamp(12px,3vw,16px)}
  .spk p{font-size:11px}
}

@media (max-width:900px){
  /* ── КАРТА ────────────────────────────────────────
     16:10 на телефоне давало полосу в 244px, а подпись
     площадки лежала поверх неё сверху и съедала треть.
     Делаем кадр выше и уводим подпись вниз, в затемнение,
     а ссылку на Карты — наверх: они больше не спорят. */
  .loc__map{aspect-ratio:4/3}
  .map__place{top:auto;bottom:clamp(14px,3.4vw,20px);
    left:clamp(14px,3.4vw,20px);max-width:calc(100% - 34px)}
  .map__place b{font-size:var(--t-m)}
  .map__go{top:clamp(13px,3.2vw,18px);bottom:auto;right:clamp(13px,3.2vw,18px)}
  .map__scrim{background:linear-gradient(180deg,rgba(7,7,21,.6),transparent 26%,
    transparent 48%,rgba(7,7,21,.9))}
  .map__lock{font-size:11px;padding:0 24px;text-align:center}

  /* панорама и карта стояли через провал в 64px —
     на узком экране это читалось как обрыв блока */
  .band--top{margin-bottom:clamp(18px,2.6vh,26px)}
  .loc{row-gap:clamp(18px,2.6vh,26px)}
  .loc__info .reg__facts{margin-top:clamp(16px,2.4vh,24px)}

  /* ── ФОРМА ────────────────────────────────────────
     шесть тем в две колонки на 390px рвут строки */
  .chk-grid{grid-template-columns:1fr}
  .f__hint{font-size:12px}
}

/* заголовок фазы программы: название и время не ужимаются,
   рядом в 390px не встают — разводим по строкам */
@media (max-width:900px){
  #agenda .agenda-phase-head{flex-wrap:wrap;gap:clamp(6px,1.2vh,10px) 14px}
  #agenda .agenda-phase-title{flex:1 0 100%}
  #agenda .agenda-phase-line{order:3;flex:1 0 100%;display:none}
  #agenda .agenda-phase-count{order:2}
}

/* ── ЛИПКОЕ ДЕЙСТВИЕ ВНИЗУ ────────────────────────────
   Старая таблица вайрфрейма красила эту полосу в белый —
   на тёмной странице получалась светлая заплатка.
   Переопределяем целиком: тёмное стекло, кнопка во всю
   ширину, учёт безопасной зоны у айфонов. */
@media (max-width:900px){
  .mcta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:linear-gradient(180deg,rgba(7,7,21,0) 0%,rgba(7,7,21,.86) 42%,rgba(7,7,21,.97) 100%);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(238,244,250,.14);
    padding:clamp(11px,1.6vh,16px) var(--x-col)
            calc(clamp(11px,1.6vh,16px) + env(safe-area-inset-bottom,0px));
    /* всплывает только когда первый экран уже позади */
    transform:translateY(115%);
    transition:transform .5s var(--x-ease)}
  .mcta .btn-x{width:100%;text-align:center;
    padding:clamp(15px,2vh,19px) calc(20px + var(--x-bevel)) clamp(15px,2vh,19px) 20px}
  /* подвал не должен уходить под полосу */
  .ft{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

  /* форма и финал показывают свою кнопку — липкая уходит */
  .mcta.is-off{transform:translateY(115%)!important;animation:none!important;
    transition:transform .45s var(--x-ease)}

  @supports (animation-timeline:scroll()){
    .mcta{animation:mctaIn linear both;
      animation-timeline:scroll(root block);
      animation-range:88vh 108vh}
    @keyframes mctaIn{from{transform:translateY(115%)}to{transform:translateY(0)}}
  }
  /* без поддержки скролл-таймлайнов — просто показываем */
  @supports not (animation-timeline:scroll()){
    .mcta{transform:none}
  }
}
@media (prefers-reduced-motion:reduce){
  .mcta{transform:none;animation:none;transition:none}
}
@media (min-width:901px){
  .mcta{display:none}
}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 6 АВГУСТА НА УЗКОМ ЭКРАНЕ
   ═══════════════════════════════════════════════════════════ */
@media (max-width:900px){
  /* Продуктовые направления: три колонки в 390px превращают
     логотипы в марки. Ставим их столбцом. Наведения на тач-
     устройстве нет, поэтому описание стоит на месте — иначе
     оно недостижимо. */
  .prods{grid-template-columns:1fr}
  /* .prod — это grid, flex-direction ему ничего не говорит:
     в первой версии правки строка так и оставалась в две
     колонки, логотип жался, описание шло лентой в два слова */
  .prod{grid-template-columns:1fr;justify-items:start;
    padding:clamp(20px,3vh,28px) 0;
    gap:clamp(12px,1.8vh,18px)}
  .prod::before{display:none}
  .prods img{height:clamp(26px,7vw,38px)}
  .prod:hover img{transform:none}
  .prod__t{position:static;opacity:1;transform:none}

  /* Знаки реестров: на узком экране прижимаем к левому краю
     вместе со всем остальным текстом */
  .certs{justify-content:flex-start;margin-top:clamp(6px,1.6vh,18px)}
  .cert img{height:clamp(40px,10vw,52px)}

}

/* Ни один указатель не умеет наводиться — держим описание
   продукта открытым и на планшете тоже */
@media (hover:none){
  .prod__t{opacity:1;transform:none;padding-right:0}
  .prod:hover img{transform:none}
}