/* ВЕРА ДЕЛАЕТ — правки уровня сайта поверх дизайн-системы ИСКРА.
   Только то, что чинит реальные дефекты на узких экранах. Ничего декоративного. */

img, svg, video, canvas, iframe { max-width: 100%; }
img, video, canvas { height: auto; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-wrap: break-word; }
main, section, article, aside, header, footer, nav, div { min-width: 0; }
pre, code { max-width: 100%; }

/* Крупная витринная типографика дизайн-системы задана с минимумом 4.5rem.
   Длинные русские слова («подхватить», «превращается») при этом шире экрана 390 px
   и дают горизонтальную прокрутку. На узких экранах опускаем нижнюю границу. */
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(2.6rem, 12.5vw, 4.6rem) !important; letter-spacing: -.05em; }
  .iskra-container, .heroGrid, .storyGrid { min-width: 0; }
}

/* Служебная полоса сайта не должна перекрывать липкие шапки страниц */
.vd-bar + * { scroll-margin-top: 48px; }

/* Верхняя панель страниц-манифестов: бренд + три кнопки не помещаются в 390 px
   и дают горизонтальную прокрутку. Разрешаем перенос. */
@media (max-width: 560px) {
  .topin { flex-wrap: wrap; row-gap: .4rem; }
  .topActions { flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
  .topTitle small { display: block; }
}

/* Декоративные орбиты в героях анимируются и в отдельных кадрах вылезают за экран.
   Обрезаем сцену, а не прячем прокрутку у всей страницы. */
@media (max-width: 560px) {
  .fireStage, .sparkStage, .heroArt { overflow: hidden; max-width: 100%; }
  body { overflow-x: clip; }
}

/* Mobile package v1. Все опубликованные материалы получают один способ
   обращаться с навигацией, touch-targets и намеренно широкими картами. */
@media (max-width: 720px) {
  .vd-bar {
    min-height: 44px;
    gap: 12px !important;
    padding: 6px 10px !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vd-bar::-webkit-scrollbar { display: none; }
  .vd-bar a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .vd-bar .vd-home {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 4px;
    background: #111;
  }

  :where(button, [role="button"], .iskra-btn, .filter, .tab, .nav-tab) {
    min-height: 44px;
    touch-action: manipulation;
  }
  :where(input, select, textarea) { font-size: max(16px, 1em); }
  a { touch-action: manipulation; }

  .topin {
    height: auto !important;
    min-height: 60px;
    padding-block: 7px;
  }
  .topActions { max-width: 100%; }
  :where(h1, h2, h3, .iskra-display, .iskra-heading) {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* На телефоне широкая схема не сжимается до нечитаемого состояния:
     она становится локальным горизонтальным холстом. */
  :where(.filters, .tabs, .lens-tabs, .mock-nav, .timeline, .tableWrap,
         .diagramBar, .flowTabs, .layerTabs, .toc, .projectRail,
         .cardsRail, .chipRail, .scrollRow) {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  :where(.filters, .tabs, .lens-tabs, .mock-nav, .timeline, .flowTabs,
         .layerTabs, .toc, .projectRail, .cardsRail, .chipRail, .scrollRow) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  table {
    display: block;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  :where(dialog, .modal, .modalCard, .modal-card, .drawer, .sheet) {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 430px) {
  .iskra-card { padding: 1rem; }
  .iskra-story-callout { padding: 1.25rem; border-radius: 1.25rem; }
  .iskra-eyebrow { line-height: 1.35; }
}

@media (orientation: landscape) and (max-height: 520px) {
  :where(dialog, .modal, .modalCard, .modal-card, .drawer, .sheet) {
    max-height: calc(100dvh - 12px);
    overflow-y: auto;
  }
  .top { position: relative; }
}