/* Адаптивность сайта — 1440 / 1024 / 768 / 480
   Селекторы дублируются: React сериализует inline-стили с пробелом после двоеточия.

   ВАЖНО: этот файл — единственный источник правил, но он же лежит копией
   внутри каждой страницы — в отдельном style-блоке с пометкой data-inline. Копия
   нужна, чтобы адаптивность не зависела от загрузки внешнего файла:
   встроенный браузер мессенджера, прокси или обрыв связи оставляли сайт
   в десктопной раскладке на телефоне. После правки этого файла ОБЯЗАТЕЛЬНО
   выполнить, иначе страницы разъедутся с источником:

     node scripts/inline-responsive.js
*/
/* overflow-x:hidden здесь ломал position:sticky у шапки.
   Переполнение гасим на секциях (overflow-x:clip не создаёт
   контекст прокрутки и не мешает sticky). */
html,body{max-width:100%}
section, footer, header + div > div{overflow-x:clip}
img,svg,video{max-width:100%}

@media (max-width:1440px){
  [style*="max-width:1320px"],[style*="max-width: 1320px"]{max-width:1180px}
}

@media (max-width:1024px){
  [style*="repeat(3,1fr)"],[style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],[style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"],[style*="repeat(5, 1fr)"],
  [style*="repeat(6,1fr)"],[style*="repeat(6, 1fr)"],
  [style*="minmax(220px,1fr)"],[style*="minmax(220px, 1fr)"],
  [style*="minmax(240px,1fr)"],[style*="minmax(240px, 1fr)"],
  [style*="minmax(300px,1fr)"],[style*="minmax(300px, 1fr)"]{grid-template-columns:1fr 1fr !important}
  section[style]{padding-left:28px !important;padding-right:28px !important}
  [style*="border-radius:26px"],[style*="border-radius: 26px"]{padding:40px 34px !important}
  h1[style]{font-size:38px !important}
  h2[style]{font-size:29px !important}
  [style*="font-size:52px"],[style*="font-size: 52px"]{font-size:38px !important}
  [style*="font-size:44px"],[style*="font-size: 44px"]{font-size:33px !important}
  [style*="font-size:64px"],[style*="font-size: 64px"],
  [style*="font-size:72px"],[style*="font-size: 72px"]{font-size:44px !important}
  a[style],button[style],input[style],textarea[style]{min-height:44px}
  a[style*="font-size:13"],a[style*="font-size: 13"],
  a[style*="font-size:14"],a[style*="font-size: 14"],
  a[style*="font-size:15"],a[style*="font-size: 15"]{min-height:0}
}

@media (max-width:768px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  section[style]{padding-left:24px !important;padding-right:24px !important}
  [style*="border-radius:26px"],[style*="border-radius: 26px"]{padding:34px 22px !important;border-radius:20px !important}
  [style*="padding:0 101px"],[style*="padding: 0 101px"],[style*="padding: 0px 101px"]{padding-left:24px !important;padding-right:24px !important}
  [style*="position:sticky"][style*="top:96px"],
  [style*="position: sticky"][style*="top: 96px"]{position:static !important}
  h1[style]{font-size:30px !important}
  h2[style]{font-size:24px !important}
  h3[style]{font-size:17px !important}
  [style*="font-size:52px"],[style*="font-size: 52px"],
  [style*="font-size:44px"],[style*="font-size: 44px"],
  [style*="font-size:64px"],[style*="font-size: 64px"],
  [style*="font-size:72px"],[style*="font-size: 72px"]{font-size:30px !important}
  [style*="font-size:40px"],[style*="font-size: 40px"],
  [style*="font-size:38px"],[style*="font-size: 38px"],
  [style*="font-size:36px"],[style*="font-size: 36px"],
  [style*="font-size:34px"],[style*="font-size: 34px"]{font-size:25px !important}
  /* Перенос строк нужен горизонтальным рядам. У колоночного флекса
     flex-wrap:wrap отменяет растягивание детей по ширине контейнера —
     они начинают меряться по содержимому и вылезают за экран. */
  [style*="justify-content:space-between"][style*="display:flex"]:not([style*="flex-direction:column"]),
  [style*="justify-content: space-between"][style*="display: flex"]:not([style*="flex-direction: column"]){flex-wrap:wrap;gap:14px}
  [style*="white-space:nowrap"],[style*="white-space: nowrap"]{white-space:normal}
  [style*="aspect-ratio: 16 / 9"],[style*="aspect-ratio: 16 / 11"]{aspect-ratio:16 / 11}
  [style*="display:flex"][style*="gap:40px"],[style*="display: flex"][style*="gap: 40px"],
  [style*="display:flex"][style*="gap:56px"],[style*="display: flex"][style*="gap: 56px"],
  [style*="display:flex"][style*="gap:64px"],[style*="display: flex"][style*="gap: 64px"]{flex-wrap:wrap}
}

@media (max-width:480px){
  section[style]{padding-left:16px !important;padding-right:16px !important}
  [style*="border-radius:26px"],[style*="border-radius: 26px"]{padding:26px 16px !important;border-radius:18px !important}
  [style*="padding:0 101px"],[style*="padding: 0 101px"],[style*="padding: 0px 101px"]{padding-left:16px !important;padding-right:16px !important}
  h1[style]{font-size:25px !important}
  h2[style]{font-size:21px !important}
  [style*="font-size:52px"],[style*="font-size: 52px"],
  [style*="font-size:44px"],[style*="font-size: 44px"],
  [style*="font-size:64px"],[style*="font-size: 64px"],
  [style*="font-size:72px"],[style*="font-size: 72px"]{font-size:26px !important}
  [style*="letter-spacing:0.2em"],[style*="letter-spacing: 0.2em"],
  [style*="letter-spacing:0.22em"],[style*="letter-spacing: 0.22em"]{letter-spacing:0.12em !important}
}

/* Блок автоматизации: на узких экранах схема складывается вертикально */
@media (max-width:1100px){
  [data-screen-label="Автоматизация"] > div > div:last-child{
    flex-wrap:wrap; justify-content:center; gap:20px;
  }
  [data-screen-label="Автоматизация"] svg[width="86"],
  [data-screen-label="Автоматизация"] svg[width="64"]{display:none}
}
@media (max-width:600px){
  [data-screen-label="Автоматизация"] > div{padding:32px 20px !important}
  [data-screen-label="Автоматизация"] [style*="grid-template-columns:repeat(3"]{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

/* ══════════════ НОВЫЕ БЛОКИ ══════════════ */

/* ── Схема автоматизированного цикла ──
   Композиция рассчитана на широкий экран: дрон, сетка сенсоров, ядро
   и экраны интерфейса в одну строку. На узких экранах она складывается
   вертикально, а экраны уменьшаются до ширины контейнера. */
@media (max-width:1100px){
  [data-screen-label="Автоматизация"] > div > div:last-child{
    flex-direction:column; align-items:center; gap:26px;
  }
  /* соединительные линии между этапами теряют смысл в вертикальной раскладке */
  [data-screen-label="Автоматизация"] svg[width="86"],
  [data-screen-label="Автоматизация"] svg[width="64"]{display:none}
  /* блок экранов интерфейса ужимается по месту */
  [data-screen-label="Автоматизация"] > div > div:last-child > div:last-child{
    width:100% !important; max-width:340px;
  }
  [data-screen-label="Автоматизация"] img{max-width:100%; height:auto}
}
@media (max-width:560px){
  [data-screen-label="Автоматизация"] > div > div:last-child > div:last-child{
    max-width:100%;
  }
  /* мелкие накладные окна интерфейса на телефоне только мешают */
  [data-screen-label="Автоматизация"] [style*="position:absolute"][style*="bottom:-"]{
    display:none;
  }
}

/* ── Блок «Полный контур защиты» ──
   Ветвление рубежей 03 и 04 разворачивается в стек, но они обязаны
   остаться визуально парой: без этого читаются как последовательные. */
@media (max-width:768px){
  [data-screen-label="Контур защиты"] [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important; gap:12px !important;
  }
  /* Шкала высот и её направляющая: на телефоне колонка отметок
     разворачивается в строку и висит отдельно от схемы, теряя смысл. */
  [data-scale], [data-scale-line]{display:none !important}
  [data-screen-label="Контур защиты"] h2{font-size:24px !important; line-height:1.2 !important}
}

/* ── Блок «Из чего состоит защита» ── */
@media (max-width:1024px){
  [data-split3]{grid-template-columns:1fr 1fr !important; gap:20px !important}
  /* центральная колонка при двух в ряд занимает всю ширину строки */
  [data-split3] > div:nth-child(2){grid-column:1 / -1; order:-1}
}
@media (max-width:768px){
  [data-split3]{grid-template-columns:1fr !important}
  [data-split3] > div:nth-child(2){grid-column:auto; order:0}
}

/* ── Строки реквизитов ──
   На широком экране подпись слева, значение справа. На телефоне
   колонка в 250 px не оставляет места значению — складываем в столбик. */
@media (max-width:700px){
  [data-req-row]{grid-template-columns:1fr !important; gap:4px !important; padding:11px 0 !important}
}

/* ── Внутренняя рамка блока реквизитов (шесть страниц) ──
   Отступы 44 px по бокам съедают половину ширины телефона: правило
   для контейнеров рассчитано на радиус 26 px и сюда не попадает. */
@media (max-width:560px){
  [style*="border-radius:20px;padding:40px 44px"]{padding:24px 16px !important}
}

/* ── Ссылка на скачивание документа ──
   В строку помещается на широком экране. На телефоне подпись
   переносится в четыре строки и блок выглядит тесным — растягиваем
   на всю ширину карточки и даём тексту дышать. */
@media (max-width:560px){
  [data-doc-link]{display:flex !important; width:100%; padding:16px 18px !important}
  [data-doc-link] > span:nth-child(2){flex:1; min-width:0}
}

/* ── Бейдж «В реестре российского ПО» ──
   В углу карточки он держится, пока заголовок в одну строку. На телефоне
   отступы карточки меньше, заголовок переносится — и бейдж ложится
   поверх текста. Ставим его в поток первым элементом карточки. */
@media (max-width:768px){
  [data-reg-badge]{
    position:static !important; top:auto !important; right:auto !important;
    margin-bottom:20px;
  }
}

/* ── Страница инженерной защиты ── */
@media (max-width:900px){
  /* разрез конструкции и секвенция атаки — горизонтальная прокрутка
     вместо сжатия: чертёж нечитаем, если ужать его по ширине телефона */
  [data-screen-label*="Разрез"], [data-screen-label*="Секвенция"]{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
}

/* ── Траектория цели в блоке «Полный контур защиты» ──
   Отрезки линии и отметки-точки лежат ВНУТРИ карточек рубежей и выведены
   по центру (left:50%). На широком экране содержимое карточки стоит в две
   колонки, и линия идёт в просвете между ними. Как только карточка
   разворачивается на всю ширину, тот же просвет исчезает — линия ложится
   на заголовки и текст и перечёркивает буквы.

   Карточка непрозрачная, поэтому «увести линию под карточку» и «убрать её
   с карточки» — это одно и то же: помеченные data-track отрезки внутри
   карточек убираем. Траектория остаётся в промежутках между карточками —
   схема читается как последовательность рубежей, соединённых линией.
   Гексагоны 01–05, ветвление и подпись «ПАРАЛЛЕЛЬНО» не трогаем.

   Селектор намеренно без привязки к data-screen-label: та же схема
   переиспользована на странице инженерной защиты, где блок подписан
   иначе («Место в контуре»). Атрибут data-track стоит только на этих
   декорациях и больше нигде. */
@media (max-width:900px){
  [data-track]{display:none !important}
}