/* ==========================================================================
   ЧБТ — блог. Фирменные вставки статьи:
     .ba       — блок «Так это выглядит в ЧБТ» под статьёй (мини-сценарий из блоков конструктора + текст и кнопки)
     .ba-note  — врезка-подсказка в середине статьи (заметка на полях, без кнопок)
   Подключается из pages/site/blog-post.ejs ПОСЛЕ marketing.css, живёт внутри .m-prose.
   Цвета типов блоков = палитра редактора (builder.css --bld-*), триггер — фирменный синий.
   --ba-c — акцент (верхняя кромка, квадратик, порт, рамка врезки): яркие цвета редактора;
   --ba-c-text — те же оттенки темнее для мелкого текста и фона иконки (контраст ≥ 4.5:1 на белом, WCAG AA).
   ========================================================================== */

.ba, .ba-note {
  --ba-trigger: var(--m-blue);   --ba-trigger-text: var(--m-blue);
  --ba-message: #6366f1;         --ba-message-text: #4338ca;
  --ba-collect: #06b6d4;         --ba-collect-text: #0e7490;
  --ba-condition: #f59e0b;       --ba-condition-text: #b45309;
  --ba-action: #22c55e;          --ba-action-text: #15803d;
  --ba-delay: #8b5cf6;           --ba-delay-text: #6d28d9;
  --ba-ai: #ec4899;              --ba-ai-text: #be185d;
  --ba-handoff: #ef4444;         --ba-handoff-text: #b91c1c;
  --ba-wire: #c7d2fe;
}
.ba-node--trigger, .ba-note--trigger { --ba-c: var(--ba-trigger); --ba-c-text: var(--ba-trigger-text); }
.ba-node--message, .ba-note--message { --ba-c: var(--ba-message); --ba-c-text: var(--ba-message-text); }
.ba-node--collect, .ba-note--collect { --ba-c: var(--ba-collect); --ba-c-text: var(--ba-collect-text); }
.ba-node--condition, .ba-note--condition { --ba-c: var(--ba-condition); --ba-c-text: var(--ba-condition-text); }
.ba-node--action, .ba-note--action { --ba-c: var(--ba-action); --ba-c-text: var(--ba-action-text); }
.ba-node--delay, .ba-note--delay { --ba-c: var(--ba-delay); --ba-c-text: var(--ba-delay-text); }
.ba-node--ai, .ba-note--ai { --ba-c: var(--ba-ai); --ba-c-text: var(--ba-ai-text); }
.ba-node--handoff, .ba-note--handoff { --ba-c: var(--ba-handoff); --ba-c-text: var(--ba-handoff-text); }

/* Лид статьи и запасной CTA (когда данных блока нет) — раньше были inline-стилями в шаблоне */
.m-prose .m-blog-lead { color: var(--m-muted); font-size: 18px; }
.m-prose .m-blog-cta { margin-top: 24px; }

/* ---------- Блок под статьёй ---------- */
.ba {
  margin: 40px 0 8px;
  border: 1px solid var(--m-line);
  border-radius: 16px;
  background: linear-gradient(180deg, #f5f7ff 0%, #ffffff 100%);
  overflow: hidden;
}

/* Холст: сетка как в редакторе + «окно» с тремя точками */
.ba-canvas {
  padding: 14px 18px 16px;
  border-bottom: 1px solid var(--m-line);
  background:
    linear-gradient(#e9edfb 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, #e9edfb 1px, transparent 1px) 0 0 / 22px 22px,
    #f7f9ff;
}
.ba-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; }
.ba-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.ba-bar i:nth-child(1) { background: #f87171; }
.ba-bar i:nth-child(2) { background: #fbbf24; }
.ba-bar i:nth-child(3) { background: #34d399; }
.ba-bar span { margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--m-muted); letter-spacing: .01em; }

/* Цепочка блоков: горизонтально, равной ширины; линии и порты — псевдоэлементами */
.m-prose .ba-flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 22px; }
.m-prose .ba-node {
  position: relative; flex: 1 1 0; min-width: 0; margin: 0;
  background: #fff; border: 1px solid #dfe5f7; border-top: 3px solid var(--ba-c);
  border-radius: 11px; padding: 8px 11px 10px;
  box-shadow: 0 6px 16px rgba(45, 91, 255, .07);
}
.m-prose .ba-node--trigger { background: #eef2ff; }
/* линия к СЛЕДУЮЩЕМУ блоку: принадлежит уже показанному узлу, поэтому её рост виден
   (у ещё невидимого соседа с opacity:0 она бы скрывалась вместе с ним) */
.ba-node::before {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 23px; height: 2px; margin-top: -1px;
  background: var(--ba-wire); border-radius: 2px;
}
.ba-node:last-child::before { display: none; }
/* выходной порт */
.ba-node::after {
  content: ""; position: absolute; top: 50%; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ba-c);
  transform: translate(50%, -50%);
}
.ba-node:last-child::after { display: none; }
.ba-node-type {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
  color: var(--ba-c-text, var(--ba-c)); line-height: 1.2;
}
.ba-node-type::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 3px; background: var(--ba-c); }
.ba-node-label {
  display: block; margin-top: 4px;
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--m-text);
  overflow-wrap: break-word; hyphens: auto;
}
.m-prose .ba-caption { margin: 12px 0 0; font-size: 12.5px; color: var(--m-muted); }
.ba-caption a { font-weight: 600; }

/* Текст и кнопки */
.ba-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 28px; align-items: center;
  padding: 20px 22px 20px;
}
.ba-copy { min-width: 0; }
.m-prose .ba-kicker {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--m-blue);
}
.m-prose .ba-title { margin: 0 0 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; font-weight: 800; }
.m-prose .ba-text { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }
.ba-cta { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ba-cta .m-btn { white-space: nowrap; }
.m-prose .ba-facts { grid-column: 1 / -1; margin: 8px 0 0; font-size: 12.5px; color: var(--m-muted); }

/* ---------- Врезка в середине статьи ---------- */
.m-prose .ba-note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 24px 0; padding: 12px 14px 12px 16px;
  border-left: 3px solid var(--ba-c, var(--m-blue));
  background: #fafbff; border-radius: 0 12px 12px 0;
}
.ba-note-ico {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; margin-top: 1px;
  display: grid; place-items: center; color: #fff; background: var(--ba-c-text, var(--ba-c, var(--m-blue)));
}
.ba-note-ico .m-svg { width: 15px; height: 15px; }
.m-prose .ba-note p { margin: 0; min-width: 0; font-size: 14px; line-height: 1.5; color: #334155; }
.ba-note b { font-weight: 600; color: var(--m-text); }
.ba-note a { font-weight: 600; }

/* ---------- Появление по очереди (только если JS взвёл .is-armed и пользователь не против анимаций) ---------- */
@keyframes ba-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ba-wire-h { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ba-wire-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* Такт .45s: узел n проявляется (.45s), с .35s его линия тянется к соседу (.2s), на .45s появляется узел n+1. */
@media (prefers-reduced-motion: no-preference) {
  .ba.is-armed .ba-node { opacity: 0; }
  .ba.is-armed .ba-node::before { transform: scaleX(0); transform-origin: left center; }
  .ba.is-in .ba-node { animation: ba-pop .45s cubic-bezier(.2, .8, .2, 1) both; }
  .ba.is-in .ba-node::before { animation: ba-wire-h .2s ease-out both; animation-delay: .35s; }
  .ba.is-in .ba-node:nth-child(2) { animation-delay: .45s; }
  .ba.is-in .ba-node:nth-child(3) { animation-delay: .9s; }
  .ba.is-in .ba-node:nth-child(4) { animation-delay: 1.35s; }
  .ba.is-in .ba-node:nth-child(5) { animation-delay: 1.8s; }
  .ba.is-in .ba-node:nth-child(2)::before { animation-delay: .8s; }
  .ba.is-in .ba-node:nth-child(3)::before { animation-delay: 1.25s; }
  .ba.is-in .ba-node:nth-child(4)::before { animation-delay: 1.7s; }
}

/* ---------- Адаптив ---------- */
/* Вертикальная цепочка: для 5 блоков (триггер + 4 шага шаблона) уже с 860px — иначе подписи не помещаются;
   для всех остальных — на телефонах. Браузеры без :has() получат горизонтальную цепочку до 640px. */
@media (max-width: 860px) {
  .m-prose .ba-flow:has(> li:nth-child(5)) { flex-direction: column; gap: 16px; }
  .m-prose .ba-flow:has(> li:nth-child(5)) .ba-node { flex: none; }
  .ba-flow:has(> li:nth-child(5)) .ba-node::before { top: 100%; left: 21px; width: 2px; height: 17px; margin: 0; }
  .ba-flow:has(> li:nth-child(5)) .ba-node::after { top: auto; bottom: 0; right: auto; left: 22px; transform: translate(-50%, 50%); }
  @media (prefers-reduced-motion: no-preference) {
    .ba.is-armed .ba-flow:has(> li:nth-child(5)) .ba-node::before { transform: scaleY(0); transform-origin: center top; }
    .ba.is-in .ba-flow:has(> li:nth-child(5)) .ba-node::before { animation-name: ba-wire-v; }
  }
}
@media (max-width: 640px) {
  .ba-canvas { padding: 12px 14px 14px; }
  .m-prose .ba-flow { flex-direction: column; gap: 16px; }
  .m-prose .ba-node { flex: none; }
  .ba-node::before { top: 100%; left: 21px; width: 2px; height: 17px; margin: 0; }
  .ba-node::after { top: auto; bottom: 0; right: auto; left: 22px; transform: translate(-50%, 50%); }
  .ba-body { grid-template-columns: 1fr; gap: 12px; padding: 18px 16px; }
  .ba-cta { flex-direction: row; flex-wrap: wrap; }
  .ba-cta .m-btn { flex: 1 1 auto; }
  .m-prose .ba-facts { margin-top: 0; }
  .m-prose .ba-note { margin: 20px 0; padding: 10px 12px 10px 14px; }
  @media (prefers-reduced-motion: no-preference) {
    .ba.is-armed .ba-node::before { transform: scaleY(0); transform-origin: center top; }
    .ba.is-in .ba-node::before { animation-name: ba-wire-v; }
  }
}