/* ===== lc-steps: оживлённые шаги решений (14.09.2026, доработка v2) =====
Заказчик 14.09.2026: статичные схемы ``
на страницах ai_solution перерисовать и оживить в визуальном языке блока
«ИИ-продавец» (.lcanim, template-parts/service-flow.php, style.css ~6707).
Разбор SVG и вывод новой разметки — фильтр the_content в functions.php
(lc_steps_animate_flow), подключение файла — lc_steps_assets(), тоже
в functions.php, только на страницах, где фильтр реально нашёл и разобрал
схему. Линии между шагами и бегущие точки рисует существующий js/lc-flow.js
по data-pairs="st1:st2,st2:st3,..." — своей анимации не пишем.
.lcanim / .lcan / .lcanim__grid / .lcanim__svg / .lcanim__line / .lcanim__dot
и их состояния (.is-on, @keyframes lcan-in/lcan-draw/lcan-run) — из style.css,
этот файл их не переопределяет, а только добавляет модификатор --steps
и узел .lcasn (число + заголовок + подпись), которого раньше не было.
Пространство имён lcasn проверено (grep style.css/*.css/*.js) — свободно.
.lc-steps / lcstep в style.css блок 8 «Шаги» — другой компонент (нумерованный
список в теле статьи), не путать и не переиспользовать его классы.
Доработка v2 (14.09.2026) по замечанию заказчика к первой версии
(reports/ux/lcsteps-2026-09-14/rsvp-*.png): промежуток между карточками
шагов увеличен (был 30/22px, теперь 36px на ≥992 и 28px на мобильном) —
именно этот пустой зазор и есть видимый отрезок соединителя: линия
рисуется под карточками (`.lcanim__svg` в DOM раньше `.lcanim__grid`,
поэтому там, где сверху лежит непрозрачная карточка `.lcasn`, сама линия
не видна — видна только в зазоре между карточками). Плюс последний шаг —
тёмная карточка `.lcasn--dark`, как узел «ИИ-продавец» в образце
(тот же тёмный фон, что у `.lcan--hub` в style.css — #23334c), номер —
светлый кружок с белой цифрой, подпись — читаемый серо-голубой, контраст
проверен по WCAG (getComputedStyle, см. отчёт): заголовок белым по
#23334c — 12,7:1, подпись #c7d1e0 по #23334c — 8,3:1, номер белым по
кружку #3a4d6b — 8,6:1. Все выше порога 4,5:1 для обычного текста.
ВАЖНО (найдено при проверке v2, getComputedStyle): в style.css есть
`#servicetext li{margin:0 0 11px;padding-left:4px;font-size:18px;
line-height:1.6}` — ID-селектор (специфичность 1,0,1), который перебивает
ЛЮБОЙ селектор из одних классов, включая `.lcanim--steps .lcan.lcasn`
(0,3,0). Поэтому у карточки шага реальный отступ снизу уходил в 11px
вместо заданных 28/36, а слева подмешивался чужой padding-left:4px.
Лечится не !important, а добавлением того же id в свой селектор —
`#servicetext .lcanim--steps .lcan.lcasn` (1,3,0), выше специфичности
чужого правила. .lcanim--steps всегда рендерится внутри #servicetext
(single-ai_solution.php), так что префикс безопасен и не сузит область
применения. См. также la-chatte-theme-edit-gotchas о style-old.css —
тот же класс проблемы, только с другим селектором-перебивалой.
Откат: удалить `wp_enqueue_style('lc-steps', ...)` вызов в functions.php
(или сам файл lc_steps_assets()) — без него браузер просто не запросит
этот файл, разметка .lcanim--steps останется без стилей, что не страшно,
т.к. одновременно откатывается и сам фильтр the_content, возвращающий
исходный . Штатный откат — одна правка в functions.php,
см. комментарий там же. Бэкап этой версии файла — lc-steps.css.bak-2026-09-14-lcsteps2. */
.lcanim--steps{max-width:760px}
/* сетка шагов — просто колонка, а не 4-колоночная сетка hub-схемы */
.lcanim--steps .lcanim__grid{
list-style:none;margin:0;padding:0;
display:flex;flex-direction:column;gap:0;grid-template-columns:1fr
}
/* сам узел шага переопределяет базовую центрированную карточку .lcan
(flex-column, text-align:center) на горизонтальную: круг с номером слева,
заголовок и подпись справа, как в макете заказчика. Зазор между карточками
(margin-bottom) — единственный видимый участок линии-соединителя, поэтому
он больше, чем обычный отступ между блоками: 36px на десктопе (медиа-запрос
ниже), 28px по умолчанию (мобильный и планшет). Селектор с #servicetext —
см. комментарий выше про перебивающее чужое правило `#servicetext li`. */
#servicetext .lcanim--steps .lcan.lcasn{
flex-direction:row;align-items:flex-start;justify-content:flex-start;
text-align:left;width:100%;min-height:0;border-radius:16px;
padding:18px 20px;gap:16px;margin:0 0 28px;
font-size:16px;line-height:1.5;color:#152237
}
#servicetext .lcanim--steps .lcan.lcasn:last-child{margin-bottom:0}
@media (min-width:992px){
#servicetext .lcanim--steps .lcan.lcasn{margin-bottom:36px}
#servicetext .lcanim--steps .lcan.lcasn:last-child{margin-bottom:0}
}
.lcasn__num{
flex:0 0 auto;display:flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;background:#eef2f8;color:#5a6b85;
font-size:17px;font-weight:700;line-height:1
}
.lcasn__body{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding-top:6px;min-width:0}
.lcasn__t{margin:0;font-size:18px;font-weight:600;line-height:1.35;color:#152237}
.lcasn__s{font-size:15px;line-height:1.5;color:#5a6b85}
/* Последний шаг — тёмная карточка-акцент, как узел «ИИ-продавец» в образце.
Фон и цвет текста — те же, что у .lcan--hub из style.css (#23334c), номер —
светлый кружок с белым знаком, чтобы не терялся на тёмном фоне. */
#servicetext .lcanim--steps .lcan.lcasn.lcasn--dark{background:#23334c;border-color:#23334c;color:#fff}
#servicetext .lcanim--steps .lcan.lcasn.lcasn--dark .lcasn__t{color:#fff}
#servicetext .lcanim--steps .lcan.lcasn.lcasn--dark .lcasn__s{color:#c7d1e0}
#servicetext .lcanim--steps .lcan.lcasn.lcasn--dark .lcasn__num{background:#3a4d6b;color:#fff}
@media (max-width:560px){
#servicetext .lcanim--steps .lcan.lcasn{padding:14px 14px;gap:12px;margin-bottom:28px;font-size:15px}
.lcasn__num{width:34px;height:34px;font-size:15px}
.lcasn__t{font-size:16px}
.lcasn__s{font-size:14px}
}
/* Состояние покоя видно без JS: карточки сразу в финальном виде.
js/lc-flow.js при инициализации узла ставит на контейнер класс
.lcanim--js (правка init(), backward-compatible) — только тогда включается
исходное для .lcanim состояние «скрыто до каскадного появления». Если
скрипт не выполнился вовсе (заблокирован, ошибка сети) — класс не появится,
и правило ниже #servicetext .lcanim--steps .lcan.lcasn{opacity:1} останется
единственным действующим на элемент .lcan.lcasn. */
#servicetext .lcanim--steps .lcan.lcasn{opacity:1;transform:none}
#servicetext .lcanim--steps.lcanim--js .lcan.lcasn{opacity:0;transform:translateY(14px)}
#servicetext .lcanim--steps.lcanim--js.is-on .lcan.lcasn{animation:lcan-in .5s cubic-bezier(.2,.7,.3,1) forwards}
@media (prefers-reduced-motion:reduce){
#servicetext .lcanim--steps.lcanim--js .lcan.lcasn{opacity:1;transform:none}
}