/**
 * RB Core — Shared CSS Reset & Variables
 * All RB plugins can extend these base styles.
 */

/* === Shared filter pills === */
.rb-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.rb-pill {
    padding: 8px 16px; border-radius: 20px; background: var(--rb-pill-bg, #f3f4f6);
    color: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    -webkit-appearance: none; appearance: none; border: 0;
}
.rb-pill:hover { opacity: 0.85; }
.rb-pill--active { background: var(--rb-pill-active-bg, #3b82f6); color: var(--rb-pill-active-color, #fff); }

/* === Shared CTA button === */
.rb-cta-btn {
    display: inline-block; padding: 10px 24px;
    background: var(--rb-cta-bg, #2563eb); color: var(--rb-cta-color, #fff);
    border-radius: 8px; font-size: 14px; font-weight: 600; text-align: center;
    text-decoration: none; cursor: pointer; transition: opacity 0.2s; border: 0;
}
.rb-cta-btn:hover { opacity: 0.9; }

/* === List style: checklist (is-style-rb-check) ===
 * Безмаркерный `<ul>` с пустыми чекбокс-квадратами перед каждым пунктом.
 * Применяется к core/list через className, используется во всех rb-* плагинах
 * для критериев выполнения / шагов проверки / требований.
 */
.wp-block-list.is-style-rb-check,
ul.is-style-rb-check {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.wp-block-list.is-style-rb-check > li,
ul.is-style-rb-check > li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.85rem;
    min-height: 1.4rem;
}
.wp-block-list.is-style-rb-check > li::before,
ul.is-style-rb-check > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.25rem;
    height: 1.25rem;
    box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 4px;
    background: transparent;
    transition: background-color 0.2s, border-color 0.2s;
}
.wp-block-list.is-style-rb-check > li.is-checked::before,
ul.is-style-rb-check > li.is-checked::before {
    background: var(--theme-palette-color-1, currentColor);
    border-color: var(--theme-palette-color-1, currentColor);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 0.9rem;
    background-position: center;
    background-repeat: no-repeat;
}

/* === List styles: общая база (is-style-rb-*) ===
 * Унифицированная геометрия для безмаркерных списков с кастомным ::before.
 * Переменные, которые можно переопределить в скоупе конкретного блока:
 *   --rb-list-size, --rb-list-top, --rb-list-pad, --rb-list-gap.
 * Цвет иконки — наследуется через currentColor или палитру Blocksy.
 */
.wp-block-list[class*="is-style-rb-"],
ul[class*="is-style-rb-"],
ol[class*="is-style-rb-"] {
    --rb-list-size: 1.25rem;
    --rb-list-top: 0.2rem;
    --rb-list-pad: 2rem;
    --rb-list-gap: 0.75rem;
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.wp-block-list[class*="is-style-rb-"] > li,
ul[class*="is-style-rb-"] > li,
ol[class*="is-style-rb-"] > li {
    position: relative;
    padding-left: var(--rb-list-pad);
    margin-bottom: 0.85rem;
    min-height: 1.4rem;
}
.wp-block-list[class*="is-style-rb-"] > li::before,
ul[class*="is-style-rb-"] > li::before,
ol[class*="is-style-rb-"] > li::before {
    position: absolute;
    left: 0;
    top: var(--rb-list-top);
    width: var(--rb-list-size);
    height: var(--rb-list-size);
    box-sizing: border-box;
    line-height: var(--rb-list-size);
    text-align: center;
    font-size: calc(var(--rb-list-size) * 0.95);
    font-weight: 600;
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--rb-list-size) * 0.75);
    transition: background-color 0.2s, border-color 0.2s;
}

/* === rb-check — пустой квадрат-чекбокс === */
.is-style-rb-check > li::before {
    content: "";
    border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 4px;
    background-color: transparent;
}
.is-style-rb-check > li.is-checked::before {
    background-color: var(--theme-palette-color-1, currentColor);
    border-color: var(--theme-palette-color-1, currentColor);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* === rb-checked — все пункты как "отмечено": заполненный квадрат с галочкой ===
 * Аналог rb-check, но без интерактивности — для статичных списков "что уже
 * сделано / включено / в комплекте". Цвет — акцент темы (Blocksy color-1).
 */
.is-style-rb-checked > li::before {
    content: "";
    border-radius: 4px;
    background-color: var(--theme-palette-color-1, currentColor);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* === rb-done — сразу «отмечено»: залитый зелёный кружок с галочкой === */
.is-style-rb-done > li::before {
    content: "";
    border-radius: 50%;
    background-color: var(--theme-palette-color-4, #10b981);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}

/* === rb-plus — плюсы (pros) === */
.is-style-rb-plus > li::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}

/* === rb-minus — минусы (cons) === */
.is-style-rb-minus > li::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>");
}

/* === rb-arrow — стрелка вправо (action / шаги-указания) === */
.is-style-rb-arrow > li::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
    background-size: calc(var(--rb-list-size) * 0.9);
    color: var(--theme-palette-color-1, currentColor);
    opacity: 0.9;
}

/* === rb-dash — тире (минималистичный акцент) === */
.is-style-rb-dash > li::before {
    content: "—";
    color: color-mix(in srgb, currentColor 55%, transparent);
    font-weight: 400;
}

/* === rb-star — звёздочка (highlights / достижения) === */
.is-style-rb-star > li::before {
    content: "";
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23facc15' stroke='%23facc15' stroke-width='1.5' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>");
}

/* === rb-external — внешние ссылки (mask-image + currentColor) ===
 * Иконка external-link перед пунктом. Используется mask-image вместо
 * background-image — SVG-маска окрашивается в currentColor, поэтому
 * иконка автоматически наследует цвет ссылки (темы/Blocksy).
 */
.is-style-rb-external > li::before {
    content: "";
    background-color: var(--theme-palette-color-1, currentColor);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>");
    -webkit-mask-size: calc(var(--rb-list-size) * 0.8);
            mask-size: calc(var(--rb-list-size) * 0.8);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    top: calc(var(--rb-list-top) + 0.05rem);
}
.is-style-rb-external > li a {
    color: var(--theme-palette-color-1, inherit);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.is-style-rb-external > li a:hover {
    text-decoration-thickness: 2px;
}

/* === rb-numbered-pill — нумерованные пилюли (альтернатива ol) === */
.is-style-rb-numbered-pill {
    counter-reset: rb-np;
}
.is-style-rb-numbered-pill > li {
    counter-increment: rb-np;
}
.is-style-rb-numbered-pill > li::before {
    content: counter(rb-np);
    color: var(--theme-palette-color-6, #fff);
    background-color: var(--theme-palette-color-1, #2563eb);
    border-radius: 50%;
    font-size: calc(var(--rb-list-size) * 0.7);
    line-height: var(--rb-list-size);
}

/* === rb-num-* — индастриал нумерация "01." ===
 * Три варианта цветовой схемы цифры:
 *   - rb-num-solid    — цветом текста (currentColor)
 *   - rb-num-accent   — акцентом темы (--theme-palette-color-1)
 *   - rb-num-outline  — контур цифры (text-stroke) цветом акцента темы
 *
 * Specificity селекторов равна базовому .wp-block-list[class*="is-style-rb-"]
 * (0,2,2) — без этого базовые `width: var(--rb-list-size)` и `text-align: center`
 * не дают шириной для "01." и цифры переносятся построчно.
 *
 * font-family: inherit — цифры в шрифте темы (Blocksy). font-variant-numeric:
 * tabular-nums — моноширинные цифры (выравнивание "01/02/10/25") без уродливого
 * системного SFMono. На референсе именно такой вариант.
 */
.is-style-rb-num-solid,
.is-style-rb-num-accent,
.is-style-rb-num-outline {
    --rb-list-pad: 2.8rem;
    counter-reset: rb-num;
}
.is-style-rb-num-solid > li,
.is-style-rb-num-accent > li,
.is-style-rb-num-outline > li {
    counter-increment: rb-num;
    margin-bottom: 0.9rem;
}
.wp-block-list[class*="is-style-rb-num-"] > li::before,
ul[class*="is-style-rb-num-"] > li::before,
ol[class*="is-style-rb-num-"] > li::before {
    content: counter(rb-num, decimal-leading-zero) ".";
    width: auto;
    height: auto;
    top: 0;
    text-align: left;
    line-height: inherit;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-size: inherit;
    font-weight: 700;
    letter-spacing: 0.01em;
    background: none;
}

.is-style-rb-num-solid > li::before {
    color: currentColor;
}
.is-style-rb-num-accent > li::before {
    color: var(--theme-palette-color-1, currentColor);
}
.is-style-rb-num-outline > li::before {
    color: transparent;
    -webkit-text-stroke: 1px var(--theme-palette-color-1, currentColor);
}

/* === Group callouts — 20 цветовых пресетов + layout-модификаторы ===
 * Регистрация: register_block_style('core/group', 'rb-callout-{color}'). 20 штук.
 * Быстрый выбор в Gutenberg → информационные/warning/success блоки.
 * Гамма Tailwind v3 — 20 оттенков, независимых от Blocksy-палитры (Blocksy
 * перекроет если нужно через --rb-callout-accent override).
 */
:root {
    --rb-color-slate:   #64748b;
    --rb-color-gray:    #6b7280;
    --rb-color-zinc:    #71717a;
    --rb-color-stone:   #78716c;
    --rb-color-red:     #ef4444;
    --rb-color-orange:  #f97316;
    --rb-color-amber:   #f59e0b;
    --rb-color-yellow:  #eab308;
    --rb-color-lime:    #84cc16;
    --rb-color-green:   #22c55e;
    --rb-color-emerald: #10b981;
    --rb-color-teal:    #14b8a6;
    --rb-color-cyan:    #06b6d4;
    --rb-color-sky:     #0ea5e9;
    --rb-color-blue:    #3b82f6;
    --rb-color-indigo:  #6366f1;
    --rb-color-violet:  #8b5cf6;
    --rb-color-purple:  #a855f7;
    --rb-color-fuchsia: #d946ef;
    --rb-color-pink:    #ec4899;
}

/*
 * База callout'а (tonal variant по умолчанию):
 *   - accent   — выбранный цвет (переопределяется .is-style-rb-callout-{color})
 *   - bg       — 8% accent (мягкий фон)
 *   - border   — 25% accent (лёгкая рамка)
 *   - text     — 88% accent + 12% text (насыщенный для читабельности на bg)
 *   - icon/link — accent (наследуется через currentColor)
 *
 * Варианты через Additional CSS class:
 *   - .rb-solid   — фон 100% accent, текст белый
 *   - .rb-outline — только рамка, без фона
 *   - .rb-soft    — ещё мягче: bg 4%, border 12% (для длинных блоков)
 */
[class*="is-style-rb-callout-"] {
    --rb-callout-accent:    var(--rb-color-slate);
    --rb-callout-bg:        color-mix(in srgb, var(--rb-callout-accent) 8%, transparent);
    --rb-callout-border:    color-mix(in srgb, var(--rb-callout-accent) 25%, transparent);
    --rb-callout-text:      color-mix(in srgb, var(--rb-callout-accent) 85%, #111827 15%);
    --rb-callout-heading:   var(--rb-callout-accent);
    --rb-callout-icon:      var(--rb-callout-accent);
    padding: var(--rb-callout-padding, 1.25rem 1.5rem);
    border-radius: var(--rb-callout-radius, 10px);
    background-color: var(--rb-callout-bg);
    border: var(--rb-callout-border-width, 1.5px) solid var(--rb-callout-border);
    color: var(--rb-callout-text);
    margin-block: var(--rb-callout-margin-block, 1.25rem);
    font-family: var(--rb-callout-text-font-family, inherit);
    font-size: var(--rb-callout-text-font-size, inherit);
    font-weight: var(--rb-callout-text-font-weight, inherit);
    letter-spacing: var(--rb-callout-text-letter-spacing, normal);
    line-height: var(--rb-callout-text-line-height, inherit);
}

/* Заголовок callout'а — селектор покрывает любой уровень H1-H6 (через
 * .wp-block-heading от core/heading) + первый <strong>/<b>-параграф для
 * лёгкого «полужирного заголовка» без полноценного heading. */
[class*="is-style-rb-callout-"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading):first-of-type,
[class*="is-style-rb-callout-"] > p:first-child > :where(b, strong):only-child {
    color: var(--rb-callout-heading-color, var(--rb-callout-heading));
    text-transform: var(--rb-callout-heading-text-transform, uppercase);
    letter-spacing: var(--rb-callout-heading-letter-spacing, 0.06em);
    font-size: var(--rb-callout-heading-font-size, 0.875em);
    font-weight: var(--rb-callout-heading-font-weight, 700);
    font-family: var(--rb-callout-heading-font-family, inherit);
    line-height: var(--rb-callout-heading-line-height, inherit);
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* Ссылки внутри callout'а наследуют акцент + подчёркивание */
[class*="is-style-rb-callout-"] :where(a) {
    color: var(--rb-callout-heading-color, var(--rb-callout-heading));
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* === Варианты callout'а === */

/* SOLID: сплошной фон-акцент, белый текст (скриншот фиолетового callout) */
[class*="is-style-rb-callout-"].rb-solid {
    --rb-callout-bg:      var(--rb-callout-accent);
    --rb-callout-border:  transparent;
    --rb-callout-text:    #ffffff;
    --rb-callout-heading: #ffffff;
    --rb-callout-icon:    #ffffff;
}
[class*="is-style-rb-callout-"].rb-solid :where(a) {
    color: #ffffff;
    text-decoration: underline;
}

/* OUTLINE: только рамка, без фона */
[class*="is-style-rb-callout-"].rb-outline {
    --rb-callout-bg:     transparent;
    --rb-callout-border: var(--rb-callout-accent);
}

/* SOFT: мягкий (длинные блоки без визуального напряжения) */
[class*="is-style-rb-callout-"].rb-soft {
    --rb-callout-bg:     color-mix(in srgb, var(--rb-callout-accent) 4%, transparent);
    --rb-callout-border: color-mix(in srgb, var(--rb-callout-accent) 12%, transparent);
}

/* 20 цветовых пресетов — переопределяют только --rb-callout-accent */
.is-style-rb-callout-slate   { --rb-callout-accent: var(--rb-color-slate);   }
.is-style-rb-callout-gray    { --rb-callout-accent: var(--rb-color-gray);    }
.is-style-rb-callout-zinc    { --rb-callout-accent: var(--rb-color-zinc);    }
.is-style-rb-callout-stone   { --rb-callout-accent: var(--rb-color-stone);   }
.is-style-rb-callout-red     { --rb-callout-accent: var(--rb-color-red);     }
.is-style-rb-callout-orange  { --rb-callout-accent: var(--rb-color-orange);  }
.is-style-rb-callout-amber   { --rb-callout-accent: var(--rb-color-amber);   }
.is-style-rb-callout-yellow  { --rb-callout-accent: var(--rb-color-yellow);  }
.is-style-rb-callout-lime    { --rb-callout-accent: var(--rb-color-lime);    }
.is-style-rb-callout-green   { --rb-callout-accent: var(--rb-color-green);   }
.is-style-rb-callout-emerald { --rb-callout-accent: var(--rb-color-emerald); }
.is-style-rb-callout-teal    { --rb-callout-accent: var(--rb-color-teal);    }
.is-style-rb-callout-cyan    { --rb-callout-accent: var(--rb-color-cyan);    }
.is-style-rb-callout-sky     { --rb-callout-accent: var(--rb-color-sky);     }
.is-style-rb-callout-blue    { --rb-callout-accent: var(--rb-color-blue);    }
.is-style-rb-callout-indigo  { --rb-callout-accent: var(--rb-color-indigo);  }
.is-style-rb-callout-violet  { --rb-callout-accent: var(--rb-color-violet);  }
.is-style-rb-callout-purple  { --rb-callout-accent: var(--rb-color-purple);  }
.is-style-rb-callout-fuchsia { --rb-callout-accent: var(--rb-color-fuchsia); }
.is-style-rb-callout-pink    { --rb-callout-accent: var(--rb-color-pink);    }

/* 8 пресетов из палитры Blocksy — регистрируются в register.php только при
 * активной теме Blocksy (иначе в CSS fallback'нутся на slate).
 * Тема сама делает palette-swap в dark mode → callout'ы следуют автоматически. */
.is-style-rb-callout-palette-1 { --rb-callout-accent: var(--theme-palette-color-1, var(--rb-color-slate)); }
.is-style-rb-callout-palette-2 { --rb-callout-accent: var(--theme-palette-color-2, var(--rb-color-slate)); }
.is-style-rb-callout-palette-3 { --rb-callout-accent: var(--theme-palette-color-3, var(--rb-color-slate)); }
.is-style-rb-callout-palette-4 { --rb-callout-accent: var(--theme-palette-color-4, var(--rb-color-slate)); }
.is-style-rb-callout-palette-5 { --rb-callout-accent: var(--theme-palette-color-5, var(--rb-color-slate)); }
.is-style-rb-callout-palette-6 { --rb-callout-accent: var(--theme-palette-color-6, var(--rb-color-slate)); }
.is-style-rb-callout-palette-7 { --rb-callout-accent: var(--theme-palette-color-7, var(--rb-color-slate)); }
.is-style-rb-callout-palette-8 { --rb-callout-accent: var(--theme-palette-color-8, var(--rb-color-slate)); }

/* === Icon layout — 5 позиций иконки внутри core/group ===
 * Применяются через Additional CSS class — комбинируется с любым цветовым
 * пресетом и вариантом. Первый дочерний блок интерпретируется как «иконка»
 * (core/image, core/html с SVG, параграф с эмодзи).
 *
 *   rb-icon-left   — слева от контента
 *   rb-icon-right  — справа от контента
 *   rb-icon-top    — сверху, контент снизу
 *   rb-icon-bottom — снизу, контент сверху
 *   rb-icon-bg     — фоном (watermark), контент поверх
 */
.rb-icon-left {
    display: grid;
    grid-template-columns: 2.75rem 1fr;
    gap: 1rem 1.25rem;
    align-items: start;
}
.rb-icon-left > :first-child {
    grid-row: 1 / -1;
    align-self: start;
}

.rb-icon-right {
    display: grid;
    grid-template-columns: 1fr 2.75rem;
    gap: 1rem 1.25rem;
    align-items: start;
}
.rb-icon-right > :first-child {
    order: 2;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
}

.rb-icon-top {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.rb-icon-top > :first-child {
    width: 2.75rem;
    align-self: start;
}

.rb-icon-bottom {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}
.rb-icon-bottom > :first-child {
    width: 2.75rem;
    align-self: end;
}

.rb-icon-bg {
    position: relative;
    overflow: hidden;
    min-height: 6rem;
}
.rb-icon-bg > :first-child {
    position: absolute;
    right: -0.75rem;
    bottom: -0.75rem;
    width: 8rem;
    height: 8rem;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}
.rb-icon-bg > :not(:first-child) {
    position: relative;
    z-index: 1;
}

/* Иконка наследует цвет callout'а (для моно-SVG через stroke=currentColor или fill=currentColor) */
[class*="is-style-rb-callout-"][class*="rb-icon-"] > :first-child {
    color: var(--rb-callout-icon);
}
[class*="is-style-rb-callout-"][class*="rb-icon-"] > :first-child svg {
    width: 100%;
    height: auto;
    display: block;
    color: inherit;
    stroke: currentColor;
}

/* === Sticky column (.is-rb-sticky на core/column) ===
 * Управляется toggle'ом «Залипание при прокрутке» в Inspector → атрибут
 * isSticky → класс .is-rb-sticky (см. rb-blocks/shared/js/column-sticky-toggle.js).
 * Не block style, чтобы можно было комбинировать с цветовыми стилями
 * (.is-style-rb-callout-*) — block styles в Gutenberg radio, один на блок.
 *
 * align-self: flex-start критично — без него parent .wp-block-columns
 * (по умолчанию align-items: stretch) растягивает колонку на всю высоту,
 * и sticky-эффект не работает (нет «свободного» места для скролла).
 * Mobile <783px (WP breakpoint stack columns) sticky выключен — иначе
 * залипшая колонка перекрыла бы основной контент после стека. */
@media (min-width: 783px) {
    .wp-block-column.is-rb-sticky {
        position: sticky;
        top: var(--rb-sticky-offset, 96px);
        align-self: flex-start;
        z-index: var(--rb-sticky-z-index, 5);
    }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .rb-pill, .rb-cta-btn { transition: none; }
    .wp-block-list[class*="is-style-rb-"] > li::before,
    ul[class*="is-style-rb-"] > li::before,
    ol[class*="is-style-rb-"] > li::before { transition: none; }
}

/* === Sticky offset под Blocksy sticky-header ===
 *
 * Use case: sticky-column / sticky-element с position:sticky слипается с
 * sticky-header (top:0). Этот класс даёт колонке отступ сверху равный
 * высоте sticky-header'а Blocksy.
 *
 * Как использовать (per-element opt-in):
 *   1. Выдели нужный блок (Колонку, Группу) в редакторе
 *   2. Inspector → Дополнительно → Дополнительные классы CSS →  is-rb-sticky-fix
 *   3. Сохрани
 *
 * --ct-default-sticky-height: Blocksy выставляет на <body> когда sticky-header
 * активен. Если переменная пустая (sticky-header выключен или Blocksy ещё не
 * прокинул значение) — fallback 80px.
 *
 * --rb-sticky-fix-gap: per-element override воздуха между header и sticky-блоком.
 * По умолчанию 24px. Можно поднять inline:
 *   <div class="is-rb-sticky-fix" style="--rb-sticky-fix-gap:48px">…</div>
 *
 * Breakpoint совпадает с .is-rb-sticky (≥783px) — на mobile колонки stack'ятся
 * и sticky выключается, fix-класс там тоже не нужен.
 *
 * Специфичность 0,2,0 (.wp-block-column.is-rb-sticky-fix) перебивает
 * .wp-block-column.is-rb-sticky сверху без зависимости от !important
 * (на всякий случай оставляем — Blocksy / тема могут писать top: 0 !important
 * на свои sticky классы и затирать наш).
 */
@media (min-width: 783px) {
    .wp-block-column.is-rb-sticky-fix,
    .wp-block-group.is-rb-sticky-fix,
    .is-rb-sticky-fix {
        top: calc(var(--ct-default-sticky-height, 80px) + var(--rb-sticky-fix-gap, 48px)) !important;
    }
}