/* VNISH GLOBAL · v97 · разбор двенадцати замечаний шефа по телефону
 *
 * Всё по списку с реального захода с айфона. Ничего не удалено: тексты уехали
 * на второй слой, картинки и анимации остались на первом, здесь только
 * геометрия и масштаб.
 */

@media (max-width: 760px) {
  /* 1. «talk to an engineer» наезжал на землю: ссылка кончалась на 632px,
        а шар начинался на 560px. Шар опускаем под неё, облака подтягиваем
        к самой земле - между ними был провал в двести пикселей */
  .hero .engineer-link { margin-top: 10px; }

  .global-sphere-stage,
  .global-earth-emission,
  .global-orbit-overlay { top: 648px !important; height: 340px !important; }
  .global-cloud-foundation { top: 872px !important; height: 190px !important; }
  .hero-atmosphere { height: 1030px !important; }
  .hero-proof { margin-top: 300px !important; }

  /* 2. четыре цифры не вставали в строку из-за «300+»: по 130px на ячейку */
  .hero-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; }
  .hero-proof > * { min-width: 0; padding: 12px 4px !important; }
  .hero-proof b, .hero-proof strong { font-size: 22px !important; }
  .hero-proof small, .hero-proof span span { font-size: 7.5px !important; letter-spacing: .04em !important; line-height: 1.2; }

  /* 3. сцена над «start with one miner» уехала вправо: левый край на 245px
        при ширине экрана 390 - половина кадра была за границей */
  /* корень сцены абсолютный: центрируем классикой left:0/right:0/margin:auto,
     transform на сцены Бивиса вешать нельзя - он становится containing block
     для их абсолютных слоёв и композиция рассыпается */
  /* виноват не корень сцены, а её обёртка: .miner-identity сдвинута вправо
     на 178px под десктопную композицию «текст слева, кадр справа» */
  /* дверь - флекс-колонка, но кадр сцены шире колонки (356 при 308) и не
     сжимается: он выпирал вправо на 185px. Прижимаем к ширине колонки */
  .route-door { align-items: stretch; }
  .route-door .miner-identity {
    /* сдвиг делает не left и не transform, а отдельное свойство translate: 50%.
       Оно складывается с раскладкой и на узком экране уносит кадр за экран */
    translate: none !important;
    left: 0 !important;
    right: auto !important;
    /* композиция сцены родная ширина 356: в колонке 308 у неё срезало
       подписи PERFORMANCE и EFFICIENCY. Отдаём кадру всю ширину экрана */
    width: 100vw !important;
    max-width: 100vw !important;
    align-self: stretch;
    margin-inline: calc(50% - 50vw) !important;
  }
  .a08-root {
    left: 0 !important;
    right: 0 !important;
    width: min(320px, 100%) !important;
    margin-inline: auto !important;
  }

  /* после переноса пояснений в резолвере опустели строки, и подписи
     поддержки легли на шаг «04 / BUILD» */
  /* Telegram и WhatsApp в резолвере лежали поверх шага «04 / BUILD»: они
     приколоты absolute под десктопную карточку. На телефоне обе ссылки и так
     живут в нижней панели на каждом экране, поэтому дубль здесь убираем */
  .finder-contract .finder-support { display: none !important; }
  .finder-contract-list li { min-height: 0; }

  /* четыре шага резолвера на 390px стояли в четыре колонки по 70px:
     текст читался по одному слову в строке. Ставим их в столбик */
  .finder-contract-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .finder-contract-list li {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid rgba(247, 243, 234, .07);
    padding-top: 12px;
  }
  .finder-contract-list li small { grid-column: 1; }
  .finder-contract-list li b,
  .finder-contract-list li em { grid-column: 2; }

  /* 4. между шестью карточками стека было по 132px чёрной пустоты */
  .stack-card--02, .stack-card--03, .stack-card--04,
  .stack-card--05, .stack-card--06 { margin-top: 36px !important; }

  /* 5. подписи в презентациях набраны крупнее, чем нужно на 390px */
  .deck-lang b { font-size: 13px !important; }
  .deck-lang small { font-size: 8.5px !important; letter-spacing: .06em !important; }
  .deck-lang-code { font-size: 9px !important; }
  .deck-side-head b { font-size: 12px !important; }
  .deck-cover-inner b { font-size: 22px !important; }
  .deck-cover-inner span, .deck-cover-inner em { font-size: 9px !important; }

  /* 9. на карточке VNISH.Global лого вылезало из своего угла и ложилось
        на заголовок и роль */
  .eco-card { position: relative; overflow: hidden; }
  .eco-card img,
  .eco-card [class*="logo"] {
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain;
  }
  .eco-card > * { position: relative; z-index: 1; }

  /* 10. музей: верхняя половина кадра пустая, режем её и подтягиваем сцену
         к тексту раздела */
  #about .about-museum,
  #about [class*="anim12"],
  #about iframe {
    aspect-ratio: auto !important;
    height: 300px !important;
    object-position: 50% 78%;
  }
  #about iframe { clip-path: inset(38% 0 0 0); margin-top: -108px; }

  /* 11. перед кубком и перед LinkedIn зияли чёрные дыры */
  .authority-artifact, .artifact-stage { margin-top: 8px !important; }
  #authority { padding-bottom: 26px !important; }
  .follow-head, #follow { padding-top: 22px !important; }
  #follow .social-strip, .follow-grid { margin-top: 16px !important; }

  /* 12. футер: гигантский вордмарк, три кнопки ИИ-полосы и разъехавшаяся
         сетка ссылок. Собираем компактно, как на роиасике и ниндзе */
  .footer-brand-mark, .brand--footer img, footer .brand--master img { max-width: 40px !important; }
  footer .giant-word, footer [class*="wordmark"], .footer-wordmark {
    font-size: 34px !important;
    letter-spacing: -.01em !important;
  }
  .ai-strip { padding-block: 22px !important; }
  .ai-strip__actions, .ai-actions { display: grid; gap: 8px; }
  .ai-strip__actions .ai-btn:not(.ai-btn--gold),
  .ai-actions .ai-btn:not(.ai-btn--gold) { font-size: 11px !important; min-height: 40px !important; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 18px !important;
    padding: 34px 0 96px !important;
  }
  .footer-grid a { min-height: 34px !important; font-size: 12px !important; }
  .footer-grid small { font-size: 9px !important; margin-bottom: 4px; }
  .footer-brand { margin-bottom: 6px; }
}