/* ==========================================================================
   RB HowTo — блок rbhow/section + shared с rb-howto shortcode.
   Все цвета/размеры — из токенов темы (Blocksy --theme-* + WP --wp--preset--*).
   Хардкод запрещён (docs/rb-blocks/css-tokens.md, contract §4.7.11).
   ==========================================================================
   Custom properties --rbhow-* = public contract, DesignCenter переопределяет
   их через wp_add_inline_style() (RB_Blocks\HowTo\DesignTokens). Имена не менять.

   4 пресета (horizontal / horizontal-minimal / vertical / vertical-minimal)
   + mobile horizontal scroll-snap для обоих horizontal.
*/

:root {
    /* Colors — Blocksy chain defaults (contract §4.7.11):
       semantic var темы → palette fallback. */
    --rbhow-card-bg:           var(--theme-palette-color-8);
    --rbhow-text-color:        var(--theme-text-color, var(--theme-palette-color-3));
    --rbhow-text-secondary:    var(--theme-palette-color-4);
    --rbhow-accent:            var(--theme-link-initial-color, var(--theme-palette-color-1));
    --rbhow-num-bg:            var(--rbhow-accent);
    --rbhow-num-color:         var(--theme-palette-color-8);
    --rbhow-line-color:        var(--theme-border-color, var(--theme-palette-color-6));
    --rbhow-pill-bg:           var(--theme-palette-color-5);
    --rbhow-pill-active-bg:    var(--theme-link-initial-color, var(--theme-palette-color-1));
    --rbhow-pill-active-color: var(--theme-palette-color-8);

    /* Geometry — WP spacing / theme presets. */
    --rbhow-gap:               var(--wp--preset--spacing--30);
    --rbhow-card-radius:       var(--theme-border-radius);
    --rbhow-card-padding:      var(--wp--preset--spacing--50);
    --rbhow-card-shadow:       var(--theme-box-shadow);
    --rbhow-num-size:          3em;

    /* Typography — relative; шрифт/размер наследуется от темы. */
    --rbhow-title-size:        1.4em;
    --rbhow-meta-size:         0.87em;
    --rbhow-pill-size:         0.93em;

    /* Semantic status colors — НЕ tied к palette темы, осознанный hex.
       Difficulty — universal success/warning/error (не «оформление блока»).
       В DesignCenter не выносятся. */
    --rbhow-difficulty-easy:   #059669;
    --rbhow-difficulty-medium: #d97706;
    --rbhow-difficulty-hard:   #dc2626;
}

/* Dark theme — palette-swap без хардкода hex. Два селектора:
     [data-ct-dark]     — глобальный Blocksy dark mode.
     .rbhow--theme-dark — per-instance force-dark (атрибут блока).
   DesignCenter публикует overrides также на [data-ct-dark]. */
[data-ct-dark],
.rbhow--theme-dark {
    --rbhow-card-bg:        var(--theme-palette-color-2);
    --rbhow-text-color:     var(--theme-palette-color-8);
    --rbhow-text-secondary: var(--theme-palette-color-7);
    --rbhow-line-color:     var(--theme-palette-color-3);
    --rbhow-pill-bg:        var(--theme-palette-color-3);
}

/* Reset — descendants only. Root наследует font/size от темы (или DesignCenter). */
.rbhow {
    box-sizing: border-box;
    color: var(--rbhow-text-color);
    font-family: var(--rbhow-font-family, inherit);
    font-size: var(--rbhow-root-font-size, inherit);
    line-height: 1.6;
}
.rbhow *, .rbhow *::before, .rbhow *::after {
    box-sizing: border-box; margin: 0; padding: 0; border: 0;
    font: inherit; line-height: inherit;
}
.rbhow a { color: var(--rbhow-accent); text-decoration: none; }
.rbhow a:hover { text-decoration: underline; }
.rbhow img { display: block; max-width: 100%; height: auto; border-radius: 8px; }

/* Header (shortcode режим — в block-контексте скрыт, guide.title пустой) */
.rbhow__header { margin-bottom: var(--rbhow-gap); }
.rbhow__title { font-size: var(--rbhow-title-size); font-weight: 700; color: var(--rbhow-text-color); }
.rbhow__meta { display: flex; gap: 12px; margin-top: 6px; font-size: var(--rbhow-meta-size); }
.rbhow__time { color: var(--rbhow-text-secondary); }
.rbhow__difficulty { font-weight: 600; }
.rbhow__difficulty--easy { color: var(--rbhow-difficulty-easy); }
.rbhow__difficulty--medium { color: var(--rbhow-difficulty-medium); }
.rbhow__difficulty--hard { color: var(--rbhow-difficulty-hard); }

/* Filter (shortcode режим) */
.rbhow__filter { display: flex; flex-wrap: wrap; gap: var(--rbhow-gap); margin-bottom: var(--wp--preset--spacing--40); }
.rbhow__pill {
    background: var(--rbhow-pill-bg); border-radius: 999px;
    color: var(--rbhow-text-color); cursor: pointer; font-size: var(--rbhow-pill-size);
    padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
    transition: background 0.2s, color 0.2s;
}
.rbhow__pill:hover { background: var(--rbhow-accent); color: var(--rbhow-pill-active-color); }
.rbhow__pill--active { background: var(--rbhow-pill-active-bg); color: var(--rbhow-pill-active-color); }

/* Page items */
.rbhow-page__item { margin-bottom: var(--wp--preset--spacing--60); }
.rbhow-page__item:last-child { margin-bottom: 0; }
.rbhow-page__item[data-hidden] { display: none; }

/* ==========================================================================
   Step base — applied to ALL presets. Presets only override layout/chrome.
   ========================================================================== */

/* Все 4 text-элемента имеют одинаковый интерфейс: color + 6 typography через vars.
   Dafault'ы сохранены, пользователь переопределяет через DesignCenter. */

.rbhow__step-num {
    font-family:          var(--rbhow-num-font-family, inherit);
    font-size:            var(--rbhow-num-font-size, 1em);
    font-weight:          var(--rbhow-num-font-weight, 700);
    letter-spacing:       var(--rbhow-num-letter-spacing, normal);
    text-transform:       var(--rbhow-num-text-transform, none);
    line-height:          var(--rbhow-num-line-height, 1);
    font-variant-numeric: tabular-nums;  /* Editorial: выровненные цифры */
}

/* Icon inline SVG внутри step-num — размер относительно контейнера, наследует color.
   Inline SVG node и на фронте (template.php wp_kses), и в editor
   (shared/js/icon-picker.js → RBBlocks.Icon.toReact → React createElement tree).
   currentColor одинаково резолвится в обоих контекстах. */
.rbhow__step-num svg,
.rbhow__step-num .rbhow__step-icon-svg {
    width: 60%;
    height: 60%;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Industrial — square marker, иконка chunkier. */
.rbhow--style-horizontal-industrial .rbhow__step-num svg,
.rbhow--style-vertical-industrial   .rbhow__step-num svg {
    stroke-width: 2;
}
/* Kicker / Title / Desc — полный набор 7 переменных (color + 6 typography).
   DesignCenter группирует их по element, пользователь видит все настройки
   одного text-поля в одной секции. Color через A+ chain — fallback на общий
   --rbhow-text-color / --rbhow-text-secondary. */

.rbhow__step-kicker {
    color:          var(--rbhow-kicker-color, var(--rbhow-text-secondary));
    font-family:    var(--rbhow-kicker-font-family, inherit);
    font-size:      var(--rbhow-kicker-font-size, 0.78em);
    font-weight:    var(--rbhow-kicker-font-weight, 600);
    letter-spacing: var(--rbhow-kicker-letter-spacing, 0.12em);
    text-transform: var(--rbhow-kicker-text-transform, uppercase);
    line-height:    var(--rbhow-kicker-line-height, 1.2);
    margin-bottom:  0.5em;
}
.rbhow__step-title {
    color:          var(--rbhow-title-color, var(--rbhow-text-color));
    font-family:    var(--rbhow-title-font-family, inherit);
    font-size:      var(--rbhow-title-font-size, 1.15em);
    font-weight:    var(--rbhow-title-font-weight, 700);
    letter-spacing: var(--rbhow-title-letter-spacing, inherit);
    text-transform: var(--rbhow-title-text-transform, inherit);
    line-height:    var(--rbhow-title-line-height, inherit);
}
.rbhow__step-desc {
    color:          var(--rbhow-desc-color, var(--rbhow-text-secondary));
    font-family:    var(--rbhow-desc-font-family, inherit);
    font-size:      var(--rbhow-desc-font-size, inherit);
    font-weight:    var(--rbhow-desc-font-weight, inherit);
    letter-spacing: var(--rbhow-desc-letter-spacing, inherit);
    text-transform: var(--rbhow-desc-text-transform, inherit);
    line-height:    var(--rbhow-desc-line-height, inherit);
    margin-top:     0.35em;
}
.rbhow__step-desc p { margin-bottom: 0.5em; }
.rbhow__step-desc p:last-child { margin-bottom: 0; }
.rbhow__step-image { margin-top: var(--wp--preset--spacing--30); }
.rbhow__step-image img { border-radius: var(--rbhow-card-radius); }

/* ==========================================================================
   Preset 1: horizontal — default horizontal timeline.
   Круги с zero-padded номером, dashed line через всю ширину, text снизу.
   Reference: таможня (1-5 circles) + Choose a hosting (01-03 on dark).
   ========================================================================== */

.rbhow--style-horizontal .rbhow__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--wp--preset--spacing--30);
}

/* Connector — dashed линия от правого края текущего круга ЧЕРЕЗ gap ДО левой
   стороны следующего step'а (там где круг). `:not(:last-child)` = последний
   шаг линию не рендерит — значит за ним пустоты нет. */
.rbhow--style-horizontal .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--rbhow-num-size) / 2);
    left: calc(var(--rbhow-num-size) / 2);
    right: calc(-1 * var(--wp--preset--spacing--30));
    height: 0;
    border-top: 1px var(--rbhow-line-style, dashed) var(--rbhow-line-color);
    z-index: 0;
    pointer-events: none;
}

.rbhow--style-horizontal .rbhow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: var(--wp--preset--spacing--30);
}

.rbhow--style-horizontal .rbhow__step-num {
    position: relative;
    z-index: 1;
    width: var(--rbhow-num-size);
    height: var(--rbhow-num-size);
    background: var(--rbhow-num-bg);
    color: var(--rbhow-num-color);
    border-radius: var(--rbhow-num-radius, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}

.rbhow--style-horizontal .rbhow__step-content {
    margin-top: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   Preset 2: horizontal-minimal — крупная typography без круга.
   Reference: Discussion of the idea + Business founded (2010/2014/...).
   ========================================================================== */

.rbhow--style-horizontal-minimal .rbhow__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--wp--preset--spacing--40);
}

.rbhow--style-horizontal-minimal .rbhow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

/* Тонкая линия между step'ами — проходит ЧЕРЕЗ dot-marker (слева-ниже цифры).
   top: 2.88em = num_bottom (2.4em) + dot-offset (0.2em of num-font × 2.4 = 0.48em). */
.rbhow--style-horizontal-minimal .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 2.88em;
    left: 1em;
    right: calc(-1 * var(--wp--preset--spacing--40));
    height: 0;
    border-top: 1px var(--rbhow-line-style, solid) var(--rbhow-line-color);
    z-index: 0;
    pointer-events: none;
}

.rbhow--style-horizontal-minimal .rbhow__step-num {
    position: relative;
    z-index: 1;
    font-size: 2.4em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--rbhow-text-color);
    /* Dot-marker снизу-слева — не на timeline, а отдельный editorial маркер. */
    margin-bottom: 0.5em;
}

.rbhow--style-horizontal-minimal .rbhow__step-num::after {
    content: '';
    position: absolute;
    bottom: -0.2em;  /* чуть ниже baseline — editorial deep cut */
    left: 0;
    width: 0.35em;
    height: 0.35em;
    border-radius: var(--rbhow-num-radius, 50%);
    background: var(--rbhow-accent);
    transform: translate(-50%, 50%);  /* dot center: слева-ниже левого угла цифры */
}

.rbhow--style-horizontal-minimal .rbhow__step-content {
    padding-top: var(--wp--preset--spacing--20);
}

/* horizontal-minimal title — дефолт совпадает с общим (1.15em / 700),
   поэтому override здесь не нужен. Оставлено пустым для ясности архитектуры. */


/* ==========================================================================
   Preset 3: vertical — default vertical timeline.
   Круг слева, vertical line, text справа.
   Reference: Production planning (01/02/03 vertical).
   ========================================================================== */

.rbhow--style-vertical .rbhow__steps {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.rbhow--style-vertical .rbhow__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--rbhow-num-size) 1fr;
    gap: var(--wp--preset--spacing--40);
    align-items: start;
}

/* Vertical line: от центра текущего круга ЧЕРЕЗ gap ДО следующего.
   `:not(:last-child)` — после последнего круга линии нет. */
.rbhow--style-vertical .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--rbhow-num-size) / 2);
    top: calc(var(--rbhow-num-size) / 2);
    bottom: calc(-1 * var(--wp--preset--spacing--40));
    width: 0;
    border-left: 1px var(--rbhow-line-style, solid) var(--rbhow-line-color);
    transform: translateX(-0.5px);
    z-index: 0;
    pointer-events: none;
}

.rbhow--style-vertical .rbhow__step-num {
    position: relative;
    z-index: 1;
    width: var(--rbhow-num-size);
    height: var(--rbhow-num-size);
    background: var(--rbhow-num-bg);
    color: var(--rbhow-num-color);
    border-radius: var(--rbhow-num-radius, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}

/* Вертикальное выравнивание контента относительно круга:
     — Только title (нет kicker и нет description) → title по центру круга.
     — Есть kicker/desc → первый элемент align top круга (естественный flow).
   `:not(:has(...))` работает в Chrome 105+, Safari 15.4+, Firefox 121+. */
.rbhow--style-vertical .rbhow__step-content {
    padding-top: 0;
    padding-bottom: var(--wp--preset--spacing--20);
}
.rbhow--style-vertical .rbhow__step:not(:has(.rbhow__step-kicker)):not(:has(.rbhow__step-desc)) .rbhow__step-content {
    padding-top: calc((var(--rbhow-num-size) - 1.4em) / 2);
}

/* ==========================================================================
   Preset 4: vertical-minimal — outline circle + тонкая линия.
   Минимальный chrome, typography-forward.
   ========================================================================== */

/* Vertical-minimal = вертикальная версия horizontal-minimal:
   крупная typography-цифра слева + dot-marker на вертикальной линии
   между цифрами и контентом справа. Цифра НЕ внутри circle. */

.rbhow--style-vertical-minimal {
    --rbhow-vmin-dot-size: 0.35em;
}

.rbhow--style-vertical-minimal .rbhow__steps {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--50);
    padding-left: 1.2em;  /* место для dot-marker'а и линии слева от цифры */
}

.rbhow--style-vertical-minimal .rbhow__step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--wp--preset--spacing--40);
    align-items: start;
}

/* Крупная цифра слева — как в horizontal-minimal. */
.rbhow--style-vertical-minimal .rbhow__step-num {
    position: relative;
    z-index: 1;
    width: auto;
    height: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    font-size: 1.8em;
    font-weight: var(--rbhow-num-font-weight, 800);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--rbhow-num-color-text, var(--rbhow-text-color));
    flex-shrink: 0;
}

/* Dot-marker слева-ниже цифры (editorial deep cut, идентично horizontal-minimal).
   bottom: -0.2em даёт визуальный промежуток между baseline цифры и dot. */
.rbhow--style-vertical-minimal .rbhow__step-num::after {
    content: '';
    position: absolute;
    bottom: -0.2em;
    left: 0;
    width: var(--rbhow-vmin-dot-size);
    height: var(--rbhow-vmin-dot-size);
    border-radius: var(--rbhow-num-radius, 50%);
    background: var(--rbhow-accent);
    transform: translate(-50%, 50%);
    z-index: 1;
}

/* Vertical solid линия через центр всех dot-marker'ов. top: 1.8em (step font 1em)
   = bottom of num (font-size 1.8em × line-height 1) = dot center. left: 0 =
   левый край step (= левый край num-column = dot center X). */
.rbhow--style-vertical-minimal .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 1.8em;
    bottom: calc(-1 * var(--wp--preset--spacing--50));
    left: 0;
    width: 0;
    border-left: 1px var(--rbhow-line-style, solid) var(--rbhow-line-color);
    transform: translateX(-0.5px);
    z-index: 0;
    pointer-events: none;
}

.rbhow--style-vertical-minimal .rbhow__step-content {
    padding-top: 0;  /* baseline aligned с цифрой благодаря flex-auto */
}

/* ==========================================================================
   Preset 5: horizontal-industrial — process timeline с outline-кругами.
   Референс: таможенная схема (1→5 outline-круги, шаг 3 = active filled accent).
   Структура = horizontal (circles + dashed line), НО:
     - круги outline (transparent fill + border), номер в цвет текста
     - active-шаг получает filled accent (через rbhow/step.active + класс)
     - нет uppercase title, нет monospace — обычная type'пография
   ========================================================================== */

.rbhow--style-horizontal-industrial .rbhow__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--wp--preset--spacing--30);
}

.rbhow--style-horizontal-industrial .rbhow__step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-right: var(--wp--preset--spacing--30);
}

/* Dashed линия от центра текущего круга до следующего (gap = spacing-30).
   `:not(:last-child)` — линия не рисуется после финального круга. */
.rbhow--style-horizontal-industrial .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--rbhow-num-size) / 2);
    left: calc(var(--rbhow-num-size) / 2);
    right: calc(-1 * var(--wp--preset--spacing--30));
    height: 0;
    border-top: 1px var(--rbhow-line-style, dashed) var(--rbhow-line-color);
    z-index: 0;
    pointer-events: none;
}

/* Outline круг: background = card-bg (режет линию), border + text = text-color. */
.rbhow--style-horizontal-industrial .rbhow__step-num {
    position: relative;
    z-index: 1;
    width: var(--rbhow-num-size);
    height: var(--rbhow-num-size);
    background: var(--rbhow-card-bg);
    color: var(--rbhow-text-color);
    border: 2px solid var(--rbhow-text-color);
    border-radius: var(--rbhow-num-radius, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}

/* Active-шаг (rbhow/step.active=true → class .rbhow__step--active на template.php):
   filled accent — как шаг 3 «ТЕКУЩИЙ ЭТАП» на референсе. */
.rbhow--style-horizontal-industrial .rbhow__step--active .rbhow__step-num {
    background: var(--rbhow-accent);
    color: var(--rbhow-num-color);
    border-color: var(--rbhow-accent);
}

.rbhow--style-horizontal-industrial .rbhow__step-content {
    margin-top: var(--wp--preset--spacing--30);
}

/* ==========================================================================
   Preset 6: vertical-industrial — та же структура в вертикальной ориентации.
   Outline circles слева, dashed vertical линия, текст справа, active-state.
   ========================================================================== */

.rbhow--style-vertical-industrial .rbhow__steps {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.rbhow--style-vertical-industrial .rbhow__step {
    position: relative;
    display: grid;
    grid-template-columns: var(--rbhow-num-size) 1fr;
    gap: var(--wp--preset--spacing--40);
    align-items: start;
}

/* Dashed вертикальная линия от центра текущего круга до следующего.
   `:not(:last-child)` — линия останавливается на последнем круге, не висит. */
.rbhow--style-vertical-industrial .rbhow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--rbhow-num-size) / 2);
    top: calc(var(--rbhow-num-size) / 2);
    bottom: calc(-1 * var(--wp--preset--spacing--40));
    width: 0;
    border-left: 1px var(--rbhow-line-style, dashed) var(--rbhow-line-color);
    transform: translateX(-0.5px);
    z-index: 0;
    pointer-events: none;
}

.rbhow--style-vertical-industrial .rbhow__step-num {
    position: relative;
    z-index: 1;
    width: var(--rbhow-num-size);
    height: var(--rbhow-num-size);
    background: var(--rbhow-card-bg);
    color: var(--rbhow-text-color);
    border: 2px solid var(--rbhow-text-color);
    border-radius: var(--rbhow-num-radius, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1em;
    flex-shrink: 0;
}

.rbhow--style-vertical-industrial .rbhow__step--active .rbhow__step-num {
    background: var(--rbhow-accent);
    color: var(--rbhow-num-color);
    border-color: var(--rbhow-accent);
}

.rbhow--style-vertical-industrial .rbhow__step-content {
    padding-top: 0;
    padding-bottom: var(--wp--preset--spacing--20);
}
.rbhow--style-vertical-industrial .rbhow__step:not(:has(.rbhow__step-kicker)):not(:has(.rbhow__step-desc)) .rbhow__step-content {
    padding-top: calc((var(--rbhow-num-size) - 1.4em) / 2);
}

/* ==========================================================================
   Mobile — horizontal presets конвертируются в vertical layout
   (шаги физически не помещаются в ряд). Connecting lines сохраняются, но
   становятся вертикальными. На десктопе пресеты остаются горизонтальными.

   ВАЖНО: правила применяются только на фронте через `:not(.rbhow--editor)`.
   В Gutenberg editor iframe часто ширина <720px (sidebar открыт) — без
   guard mobile-стек срабатывал бы там всегда и пользователь не видел
   desktop-layout вообще.
   ========================================================================== */

@media (max-width: 720px) {
    /* Все правила обёрнуты в `:not(.rbhow--editor)` — editor iframe часто
       <720px (sidebar открыт), пользователь должен видеть desktop-layout. */

    /* Horizontal → vertical column с кругом слева, текстом справа,
       линия теперь вертикальная через `::after` на каждом не-последнем step'е. */
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal .rbhow__steps {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--wp--preset--spacing--40);
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal .rbhow__step {
        display: grid;
        grid-template-columns: var(--rbhow-num-size) 1fr;
        gap: var(--wp--preset--spacing--40);
        align-items: start;
        padding-right: 0;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal .rbhow__step-content {
        margin-top: 0;
        padding-top: calc((var(--rbhow-num-size) - 1.4em) / 2);
    }
    /* Переориентируем connector с horizontal на vertical. */
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal .rbhow__step:not(:last-child)::after {
        top: calc(var(--rbhow-num-size) / 2);
        bottom: calc(-1 * var(--wp--preset--spacing--40));
        left: calc(var(--rbhow-num-size) / 2);
        right: auto;
        width: 0;
        height: auto;
        border-top: 0;
        border-left: 1px var(--rbhow-line-style, dashed) var(--rbhow-line-color);
        transform: translateX(-0.5px);
    }

    /* Horizontal-minimal на mobile = точная копия vertical-minimal.
       Цифра слева, dot-marker слева от цифры, вертикальная линия.
       Позиции dot и линии идентичны vertical-minimal → при переключении
       пресета на mobile кружки стоят на том же самом месте. */
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal {
        --rbhow-vmin-dot-size: 0.35em;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__steps {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--wp--preset--spacing--50);
        padding-left: 1.2em;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__step {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--wp--preset--spacing--40);
        align-items: start;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__step-num {
        font-size: 1.8em;
        line-height: 1;
        margin-bottom: 0;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__step-num::after {
        /* Dot-marker слева-ниже цифры — идентично vertical-minimal. */
        top: auto;
        right: auto;
        bottom: -0.2em;
        left: 0;
        width: var(--rbhow-vmin-dot-size);
        height: var(--rbhow-vmin-dot-size);
        transform: translate(-50%, 50%);
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__step-content {
        padding-top: 0;
    }
    /* Vertical линия через центр dot-markers — identical to vertical-minimal. */
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-minimal .rbhow__step:not(:last-child)::after {
        top: 1.8em;
        bottom: calc(-1 * var(--wp--preset--spacing--50));
        left: 0;
        right: auto;
        width: 0;
        height: auto;
        border-top: 0;
        border-left: 1px var(--rbhow-line-style, solid) var(--rbhow-line-color);
        background: transparent;
        transform: translateX(-0.5px);
    }

    /* Horizontal-industrial → vertical column. */
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-industrial .rbhow__steps {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--wp--preset--spacing--40);
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-industrial .rbhow__step {
        display: grid;
        grid-template-columns: var(--rbhow-num-size) 1fr;
        gap: var(--wp--preset--spacing--40);
        align-items: start;
        padding-right: 0;
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-industrial .rbhow__step-content {
        margin-top: 0;
        padding-top: calc((var(--rbhow-num-size) - 1.4em) / 2);
    }
    .rbhow:not(.rbhow--editor).rbhow--style-horizontal-industrial .rbhow__step:not(:last-child)::after {
        top: calc(var(--rbhow-num-size) / 2);
        bottom: calc(-1 * var(--wp--preset--spacing--40));
        left: calc(var(--rbhow-num-size) / 2);
        right: auto;
        width: 0;
        height: auto;
        border-top: 0;
        border-left: 1px var(--rbhow-line-style, dashed) var(--rbhow-line-color);
        transform: translateX(-0.5px);
    }
}

/* ==========================================================================
   Accessibility — reduced motion: no transitions.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .rbhow__step-num,
    .rbhow__step {
        transition: none !important;
    }
    .rbhow--style-horizontal .rbhow__step:hover .rbhow__step-num,
    .rbhow--style-vertical .rbhow__step:hover .rbhow__step-num {
        transform: none;
    }
}

/* Focus-visible — keyboard users. */
.rbhow__step:focus-within .rbhow__step-num {
    outline: 2px solid var(--rbhow-accent);
    outline-offset: 3px;
}

/* ==========================================================================
   Editor iframe — same visuals, no scroll-snap (редактор уже ограничен шириной).
   ========================================================================== */

.rbhow--editor .rbhow__step-kicker[data-rich-text-placeholder]::after { opacity: 0.4; }
.rbhow--editor .rbhow__step-title[data-rich-text-placeholder]::after  { opacity: 0.4; }
.rbhow--editor .rbhow__step-desc[data-rich-text-placeholder]::after   { opacity: 0.4; }
.rbhow--editor .block-list-appender { margin-top: var(--rbhow-gap); }

/* CSS counter — только в editor (в рендере PHP кладёт sprintf('%02d', $num)).
   .rbhow__step-num в editor пустой, counter(counter, decimal-leading-zero) заполняет. */
.rbhow--editor .rbhow__steps { counter-reset: rbhow-step; }
.rbhow--editor .rbhow__step  { counter-increment: rbhow-step; }
.rbhow--editor .rbhow__step-num:empty::before {
    content: counter(rbhow-step, decimal-leading-zero);
}

/* Editor iframe часто <720px, но мы хотим чтобы пользователь видел реальный
   desktop-layout. Mobile media query уже обёрнут в `:not(.rbhow--editor)` —
   эти правила страхуют display: grid для horizontal пресетов в editor. */
.rbhow--editor.rbhow--style-horizontal .rbhow__steps,
.rbhow--editor.rbhow--style-horizontal-minimal .rbhow__steps,
.rbhow--editor.rbhow--style-horizontal-industrial .rbhow__steps {
    overflow: visible;
    display: grid;
}

/* КРИТИЧНО для editor preview — 100% визуальное сходство с фронтом.

   На фронте template.php рендерит:    .rbhow__steps > .rbhow__step × N
   В editor Gutenberg InnerBlocks добавляет до 2-3 уровней WP-обёрток
   (.block-editor-block-list__layout / .wp-block / .block-editor-block-list__block),
   имена wrapper'ов зависят от версии WP и apiVersion блока.

   Universal fix: любой потомок `.rbhow__steps` который НЕ `.rbhow__step` —
   становится `display: contents` (прозрачный для layout). `.rbhow__step`
   оказывается direct child grid/flex → layout/линии/sibling selectors
   работают идентично фронту.

   `!important` — WP иногда кладёт inline `display:block` / `width:100%` через
   JavaScript. Без !important наши правила проигрывают specificity.

   a11y trade-off: display:contents может скрыть элемент от screen readers —
   только в editor preview (фронт template.php этих wrappers не имеет). */
/* WP в editor может вставить 1-3 уровней wrappers между `.rbhow__steps` и
   `.rbhow__step` (names зависят от WP версии + useBlockProps):
     .block-editor-inner-blocks → .block-editor-block-list__layout →
     .wp-block / .block-editor-block-list__block → .rbhow__step

   Убираем `>` — ловим любой из этих wrappers независимо от глубины. */
.rbhow--editor .rbhow__steps .block-editor-inner-blocks,
.rbhow--editor .rbhow__steps .block-editor-block-list__layout,
.rbhow--editor .rbhow__steps .wp-block,
.rbhow--editor .rbhow__steps .block-editor-block-list__block {
    display: contents;
}