/**
 * Preset: cards-grid
 *
 * Переменные задаются на .rb-uniblock--cards-grid.
 * Тема переопределяет через --theme-palette-color-N.
 * Индивидуальный блок переопределяет через style_overrides (inline на wrapper).
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid {
    --rbu-columns:      3;
    --rbu-gap:          24px;

    /* card layout */
    --rbu-card-bg:      var(--theme-palette-color-8, #fff);
    --rbu-card-radius:  12px;
    --rbu-card-shadow:  0 1px 4px rgba(0,0,0,.08);
    --rbu-card-padding: 24px;
    /* Граница per-side — дефолт 0 (без рамки). Переопределяется для layout-card
     * ниже. Работает глобально: задай цвет+стиль+ширину(ы) в любом layout. */
    --rbu-card-border-color:        var(--theme-border-color, var(--theme-palette-color-6, #e5e7eb));
    --rbu-card-border-style:        solid;
    --rbu-card-border-width-top:    0;
    --rbu-card-border-width-right:  0;
    --rbu-card-border-width-bottom: 0;
    --rbu-card-border-width-left:   0;

    /* flat layout — padding fallback'ится на --rbu-card-padding если не задан,
     * чтобы UI «Внутренний отступ» (общий) работал и для flat. Хочешь flat без
     * отступов — задай --rbu-flat-padding: 0 в «Стили блока». */
    --rbu-flat-bg:      transparent;

    /* tile layout */
    --rbu-tile-bg-odd:         var(--theme-palette-color-1, #2d7a3a);
    --rbu-tile-bg-even:        var(--theme-palette-color-3, #1a1a2e);
    --rbu-tile-text:           var(--theme-palette-color-8, #ffffff);
    --rbu-tile-blur:           5.2vw;
    --rbu-tile-blur-opacity:   0.4;

    /* cover layout */
    --rbu-cover-min-height:     320px;
    --rbu-cover-overlay:        rgba(0,0,0,.5);
    --rbu-cover-overlay-hover:  rgba(0,0,0,.35);
    --rbu-cover-text:           var(--theme-palette-color-8, #ffffff);
    --rbu-cover-title-size:     1.5rem;

    /* typography — font-family stays from theme */
    --rbu-title-size:        1.1rem;
    --rbu-title-weight:      600;
    --rbu-title-color:       inherit;
    --rbu-title-line-height: 1.3;
    --rbu-text-size:         0.95rem;
    --rbu-text-color:        inherit;
    --rbu-text-line-height:  1.6;

    /* icon */
    --rbu-icon-size:      40px;
    --rbu-icon-color:     var(--theme-palette-color-1, #2d7a3a);
    --rbu-icon-bg:        transparent;
    --rbu-icon-border:    none;
    --rbu-icon-radius:    0;
    --rbu-icon-padding:   0px;
    --rbu-icon-font-size: 1.1rem;

    /* link button */
    --rbu-btn-color:    var(--theme-palette-color-1, #2d7a3a);
    --rbu-btn-size:     0.875rem;
}

/* ── Variables (continued) ──────────────────────────────────────────────── */
.rb-uniblock--cards-grid {
    /* Featured — цвет по умолчанию = акцент темы, переопределяется через --rbu-featured-color */
    --rbu-featured-color:  var(--theme-palette-color-1, #2d7a3a);
    --rbu-bg-overlay:      rgba(0,0,0,.45);

    /* bordered layout — чистый визуал (линии-разделители)
     * divider через color-mix(currentColor) — сам подстраивается под фон wrapper'а:
     * на светлом фоне тонкая тёмная линия, на тёмном — тонкая светлая.
     * 30% даёт заметный но не «кричащий» контраст на любом фоне. */
    --rbu-bordered-divider:    color-mix(in srgb, currentColor 30%, transparent);
    --rbu-bordered-bg:         transparent;
    --rbu-bordered-bg-hover:   var(--theme-palette-color-6, #f3f4f6);
    --rbu-bordered-padding:    32px;
    --rbu-bordered-text-color: var(--theme-palette-color-3, inherit);

    /* .rb-ub-item--has-bg (фоновое изображение) — text/button поверх dark overlay.
     * По дизайну это всегда light-on-dark, поэтому палитра — palette-color-8.
     * Translucent rgba для buttons — semantic (glass-on-dark), не хардкод темы. */
    --rbu-bg-text:             var(--theme-palette-color-8, #ffffff);
    --rbu-bg-btn-bg:           rgba(255,255,255,.2);
    --rbu-bg-btn-border:       rgba(255,255,255,.5);

    /* Метрика (value + unit) — работает в любом layout.
     * value-color = первый акцент Blocksy (тема задаёт фирменный цвет).
     * unit-color = currentColor → наследует от value → единый цвет метрики. */
    --rbu-value-size:        2.25rem;
    --rbu-value-color:       var(--theme-palette-color-1, #2d7a3a);
    --rbu-value-weight:      700;
    --rbu-value-line-height: 1;
    --rbu-value-spacing:     0;
    --rbu-unit-size:         0.38em;
    --rbu-unit-color:        var(--theme-palette-color-3, inherit);
    --rbu-unit-spacing:      0.15em;

    /* numbers (corner counter) */
    --rbu-number-size:   0.75rem;
    --rbu-number-color:  var(--rbu-meta-color, #757575);
    --rbu-number-font:   ui-monospace, SFMono-Regular, Menlo, monospace;
    --rbu-number-offset: 18px;
}

/* ── Defensive reset для wrapper/grid ──────────────────────────────────── */
/* Blocksy и wp-block-library иногда добавляют border/margin к ul в
 * .entry-content. Обнуляем явно на нашем wrapper и grid, чтобы рамка
 * появлялась ТОЛЬКО там, где пользователь её задал через CSS vars на items.
 *
 * Specificity намеренно одинарная (0,1,0 для wrapper, 0,2,0 для grid):
 * theme с одиночным селектором класса перебивается, а наши layout-правила
 * (напр. .rb-uniblock--layout-bordered .rb-ub-grid = 0,3,0) естественно
 * побеждают и рисуют свои рамки (outer frame у bordered). */
.rb-uniblock--cards-grid,
.rb-uniblock--cards-grid .rb-ub-grid {
    border-top-width:    0;
    border-right-width:  0;
    border-bottom-width: 0;
    border-left-width:   0;
    outline: 0;
}

/* ── Item base ──────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    min-height: var(--rbu-item-min-height, auto);
    position: relative;
    /* Reset <a> tag if item_tag = a */
    color: inherit;
    text-decoration: none;

    /* Граница per-side: цвет/стиль общие, толщина задаётся по сторонам.
     * Дефолт ширины = 0 (нет рамки). Задай в sidebar «Граница карточки»
     * только нужные стороны — остальные остаются 0.
     *
     * Reset (border:0 solid transparent) первой строкой нужен чтобы обнулить
     * возможные border-правила темы Blocksy / wp-block-library на <li>.
     * Потом longhand-свойства выставляют значения из CSS vars — это надёжнее
     * shorthand (theme-shorthand может затереть только одно поле из трёх). */
    border: 0 solid transparent;
    border-top-width:    var(--rbu-card-border-width-top);
    border-right-width:  var(--rbu-card-border-width-right);
    border-bottom-width: var(--rbu-card-border-width-bottom);
    border-left-width:   var(--rbu-card-border-width-left);
    border-style:        var(--rbu-card-border-style);
    border-color:        var(--rbu-card-border-color);
}

/* ── Card layout (default) ──────────────────────────────────────────────── */
/* Card — фон, радиус, тень. Граница управляется через общие --rbu-card-border-*
 * в sidebar «Граница карточки». Дефолт — без рамки (0 на всех сторонах).
 * Если нужна только верхняя линия: задай толщину верх, остальные оставь 0. */
.rb-uniblock--cards-grid.rb-uniblock--layout-card .rb-ub-item {
    background:    var(--rbu-card-bg);
    border-radius: var(--rbu-card-radius);
    box-shadow:    var(--rbu-card-shadow);
    padding:       var(--rbu-card-padding);
    flex-direction: row;
    align-items: flex-start;
}

/* ── Flat layout ────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid.rb-uniblock--layout-flat .rb-ub-item {
    background:    var(--rbu-flat-bg);
    border-radius: var(--rbu-card-radius);
    padding:       var(--rbu-flat-padding, var(--rbu-card-padding));
    flex-direction: column;
    align-items: flex-start;
}

/* ── Tile layout ────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-item {
    border-radius: var(--rbu-card-radius);
    padding:       var(--rbu-card-padding);
    color:         var(--rbu-tile-text);
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    position: relative;
}

/* Odd/even solid backgrounds */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-item:nth-child(odd) {
    background: var(--rbu-tile-bg-odd);
}

.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-item:nth-child(even) {
    background: var(--rbu-tile-bg-even);
}

/* Blurred light overlay — decorative белое пятно поверх tile'а.
 * Осознанный #fff (не palette): эффект работает на любой тёмной заливке tile. */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-item::after {
    content: "";
    width: 70%;
    height: 100%;
    position: absolute;
    top: 5px;
    left: 20px;
    background: var(--rbu-tile-blur-bg, #fff);
    opacity: var(--rbu-tile-blur-opacity);
    filter: blur(var(--rbu-tile-blur));
    z-index: 0;
    pointer-events: none;
}

/* Content above blur overlay */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-icon,
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-body {
    position: relative;
    z-index: 1;
}

/* ── Cover image (responsive <img> with srcset) ───────────────────────── */
.rb-uniblock--cards-grid .rb-ub-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    border-radius: inherit;
}

/* ── Cover layout ──────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item {
    min-height:      var(--rbu-cover-min-height);
    border-radius:   var(--rbu-card-radius);
    padding:         var(--rbu-card-padding);
    color:           var(--rbu-cover-text);
    flex-direction:  column;
    justify-content: flex-end;
    align-items:     flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    position: relative;
    transition: transform .8s cubic-bezier(.22,.61,.36,1), box-shadow .8s cubic-bezier(.22,.61,.36,1);
}

/* Hover lift — soft and slow */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
}

/* Dark overlay — always on for readability */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rbu-cover-overlay);
    border-radius: inherit;
    z-index: 0;
    transition: background .8s cubic-bezier(.22,.61,.36,1);
}

.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item:hover::before {
    background: var(--rbu-cover-overlay-hover);
}

/* Content above overlay */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-icon,
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-body {
    position: relative;
    z-index: 1;
}

/* Fallback: no bg_image → tile-style odd/even colors */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item:not(.rb-ub-item--has-bg):nth-child(odd) {
    background: var(--rbu-tile-bg-odd);
}
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item:not(.rb-ub-item--has-bg):nth-child(even) {
    background: var(--rbu-tile-bg-even);
}

/* Cover body — at bottom, fixed layout, no height changes */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-body {
    margin-top: auto;
    padding-bottom: 8px;
}

/* Cover title — fixed box, text pinned to bottom → all cards align */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-title {
    color: var(--rbu-cover-text);
    font-size: var(--rbu-cover-title-size);
    font-weight: 700;
    min-height: 3.9em;
    display: flex;
    align-items: flex-end;
}

/* Reveal — always takes space, only opacity + transform animate */
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}

.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-reveal .rb-ub-text {
    color: var(--rbu-cover-text);
    padding-top: 8px;
    margin-bottom: 10px;
}

.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-item:hover .rb-ub-reveal {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Cover button — inherit theme styles, only reset what's needed */

/* ── Icon positions ─────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--rbu-icon-size);
    height: var(--rbu-icon-size);
    color:  var(--rbu-icon-color);
    background: var(--rbu-icon-bg);
    border: var(--rbu-icon-border);
    border-radius: var(--rbu-icon-radius);
    padding: var(--rbu-icon-padding);
    font-size: var(--rbu-icon-font-size);
    font-weight: 700;
    line-height: 1;
}

.rb-uniblock--cards-grid .rb-ub-icon svg {
    display: block;
    width:  100%;
    height: 100%;
    /* Lucide/Feather = stroke icons; Material = fill icons — support both */
    stroke: currentColor;
    fill:   none;
}

/* icon-left: row direction (card default), icon before body */
.rb-uniblock--cards-grid.rb-uniblock--icon-left .rb-ub-item {
    flex-direction: row;
    align-items: flex-start;
}

/* icon-right: row-reverse, icon after body */
.rb-uniblock--cards-grid.rb-uniblock--icon-right .rb-ub-item {
    flex-direction: row-reverse;
    align-items: flex-start;
}

/* icon-top: column direction, icon above body */
.rb-uniblock--cards-grid.rb-uniblock--icon-top .rb-ub-item {
    flex-direction: column;
}

/* icon-corner: absolute top-right */
.rb-uniblock--cards-grid.rb-uniblock--icon-corner .rb-ub-item {
    flex-direction: column;
}

.rb-uniblock--cards-grid.rb-uniblock--icon-corner .rb-ub-icon {
    position: absolute;
    top:   var(--rbu-card-padding);
    right: var(--rbu-card-padding);
    opacity: .25;
}

/* ── Featured item ──────────────────────────────────────────────────────── */
/* outline не влияет на box-model → не ломает grid в редакторе и на фронте */
.rb-uniblock--cards-grid .rb-ub-item--featured {
    outline:        3px solid var(--rbu-featured-color);
    outline-offset: 2px;
}

/* Auto center-align icon+title when body has only title (no text/link) */
.rb-uniblock--cards-grid .rb-ub-body:has(.rb-ub-title:only-child) {
    justify-content: center;
}
.rb-uniblock--cards-grid .rb-ub-item:has(.rb-ub-body > .rb-ub-title:only-child) {
    align-items: center;
}

/* ── Background image ───────────────────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-item--has-bg {
    background-size:     cover;
    background-position: center;
    background-repeat:   no-repeat;
    color:               var(--rbu-bg-text);
    /* Need padding to be set for the layout — inherit from card/flat/tile */
}

/* Dark overlay */
.rb-uniblock--cards-grid .rb-ub-item--has-bg::before {
    content:       '';
    position:      absolute;
    inset:         0;
    background:    var(--rbu-bg-overlay);
    border-radius: inherit;
    z-index:       0;
}

/* Push content above overlay */
.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-icon,
.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-body {
    position: relative;
    z-index:  1;
}

.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-title,
.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-text {
    color: var(--rbu-bg-text);
}

.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-link {
    color: var(--rbu-bg-text);
}

.rb-uniblock--cards-grid .rb-ub-item--has-bg .rb-ub-link--button {
    background: var(--rbu-bg-btn-bg);
    border:     1px solid var(--rbu-bg-btn-border);
    color:      var(--rbu-bg-text);
}

/* ── Custom bg color only (no image) ────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-item--has-color {
    border-color: transparent !important;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.rb-uniblock--cards-grid .rb-ub-title {
    display: block;
    font-size:   var(--rbu-title-size);
    font-weight: var(--rbu-title-weight);
    color:       var(--rbu-title-color);
    line-height: var(--rbu-title-line-height);
}

.rb-uniblock--cards-grid .rb-ub-text {
    font-size:   var(--rbu-text-size);
    color:       var(--rbu-text-color);
    line-height: var(--rbu-text-line-height);
}

/* Tile: override text colors */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-title,
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-text {
    color: var(--rbu-tile-text);
}

/* ── Link button / text ─────────────────────────────────────────────────── */
/*
 * Базовые свойства кнопки. Позиция задаётся классами .rb-uniblock--btnpos-*
 * ниже — settings.button_placement управляет раскладкой внутри body.
 * width:auto перебивает theme .wp-element-button, который часто width:100%.
 */
.rb-uniblock--cards-grid .rb-ub-link {
    display:         inline-block;
    width:           auto;
    background:      var(--rbu-btn-bg, transparent);
    color:           var(--rbu-btn-color, inherit);
    padding:         var(--rbu-btn-padding, 0);
    border-radius:   var(--rbu-btn-radius, 0);
    font-size:       var(--rbu-btn-size, 0.875rem);
    font-weight:     var(--rbu-btn-weight, 500);
    letter-spacing:  var(--rbu-btn-letter-spacing, 0);
    margin-top:      auto;
    transition:      opacity .15s;
    text-decoration: none; /* сброс браузерного underline на <a> */
}

.rb-uniblock--cards-grid .rb-ub-link:hover {
    opacity: .75;
}

/* ── Button placement (settings.button_placement) ──────────────────────── */
/*
 * 6 вариантов: 3 под контентом (left/center/right) + 3 сбоку (top/center/bottom).
 * На мобайле (≤600) ВСЕ варианты сворачиваются в under-left — нормальный
 * reading-flow: title → text → кнопка под ними, слева.
 *
 * Под контентом (under-*): body — flex-column, link внизу через align-self.
 * Сбоку (side-*): body переключается на grid 2col, link в правой колонке
 * с вертикальным выравниванием (start/center/end).
 */

/* Desktop (≥601px) */
@media (min-width: 601px) {
    /* Under: просто align-self в flex-column body */
    .rb-uniblock--cards-grid.rb-uniblock--btnpos-under-left   .rb-ub-link { align-self: flex-start; }
    .rb-uniblock--cards-grid.rb-uniblock--btnpos-under-center .rb-ub-link { align-self: center; }
    .rb-uniblock--cards-grid.rb-uniblock--btnpos-under-right  .rb-ub-link { align-self: flex-end; }

    /* Side: body → grid 2col, link справа с вертикальным выравниванием */
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-side"]:not(.rb-uniblock--layout-cover) .rb-ub-body {
        display:               grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "value link"
            "title link"
            "text  link";
        gap: 4px 24px;
    }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-side"]:not(.rb-uniblock--layout-cover) .rb-ub-value { grid-area: value; }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-side"]:not(.rb-uniblock--layout-cover) .rb-ub-title { grid-area: title; }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-side"]:not(.rb-uniblock--layout-cover) .rb-ub-text  { grid-area: text;  margin: 0; }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-side"]:not(.rb-uniblock--layout-cover) .rb-ub-link  {
        grid-area:    link;
        margin-top:   0;
        justify-self: end;
    }

    .rb-uniblock--cards-grid.rb-uniblock--btnpos-side-top    .rb-ub-link { align-self: start; }
    .rb-uniblock--cards-grid.rb-uniblock--btnpos-side-center .rb-ub-link { align-self: center; }
    .rb-uniblock--cards-grid.rb-uniblock--btnpos-side-bottom .rb-ub-link { align-self: end; }
}

/* Mobile (≤600px): все варианты = under-left (sensible default для узкого экрана) */
@media (max-width: 600px) {
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-body {
        display:        flex;
        flex-direction: column;
    }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-link,
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-value,
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-title,
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-text {
        grid-area:    unset;
        justify-self: flex-start;
    }
    .rb-uniblock--cards-grid[class*="rb-uniblock--btnpos-"] .rb-ub-link {
        align-self: flex-start;
    }
}

/* ── Button styles (opt-in через settings.button_style) ─────────────────── */
/*
 * 'theme' (default) — Blocksy Customizer рулит фоном/радиусом/тенями. Через
 * .wp-element-button. Style_overrides --rbu-btn-* НЕ действуют на цвет
 * (специфичность темы выше). Хочешь свой цвет — бери 'custom'.
 *
 * 'custom' — filled-кнопка под полный контроль CSS vars. --rbu-btn-bg (фон),
 * --rbu-btn-color (текст), --rbu-btn-padding, --rbu-btn-radius — всё работает.
 *
 * 'underline' — минимал: текст + нижняя черта + стрелка. Цвет через --rbu-btn-color.
 *
 * 'ghost' — прозрачный + обводка. Цвет text+border через --rbu-btn-color.
 *
 * Все три не-theme варианта имеют specificity 0,3,0 — перебивают :where() fallback
 * и theme .wp-element-button (0,1,0).
 */

/* Custom — filled, полный контроль */
.rb-uniblock--cards-grid.rb-uniblock--btn-custom.rb-uniblock--btn-custom .rb-ub-link {
    background:     var(--rbu-btn-bg, var(--rbu-btn-color, var(--theme-palette-color-1)));
    color:          var(--rbu-btn-color, #fff);
    padding:        var(--rbu-btn-padding, 6px 16px);
    border:         0;
    border-radius:  var(--rbu-btn-radius, 4px);
    font-size:      var(--rbu-btn-size, 0.875rem);
    font-weight:    var(--rbu-btn-weight, 500);
    letter-spacing: var(--rbu-btn-letter-spacing, 0);
}

/* Underline — минимал, цвет через --rbu-btn-color */
.rb-uniblock--cards-grid.rb-uniblock--btn-underline.rb-uniblock--btn-underline .rb-ub-link {
    background:     transparent;
    color:          var(--rbu-btn-color, currentColor);
    padding:        var(--rbu-btn-padding, 12px 0);
    border:         0;
    border-bottom:  1px solid var(--rbu-btn-color, currentColor);
    border-radius:  0;
    font-size:      var(--rbu-btn-size, 0.875rem);
    font-weight:    var(--rbu-btn-weight, 500);
    letter-spacing: var(--rbu-btn-letter-spacing, .15em);
    text-transform: uppercase;
}

.rb-uniblock--cards-grid.rb-uniblock--btn-underline.rb-uniblock--btn-underline .rb-ub-link::after {
    content:     '→';
    margin-left: .5em;
    display:     inline-block;
    transition:  transform .2s;
}

.rb-uniblock--cards-grid.rb-uniblock--btn-underline.rb-uniblock--btn-underline .rb-ub-link:hover {
    opacity: 1; /* перебить базовое .rb-ub-link:hover {opacity:.75} */
}

.rb-uniblock--cards-grid.rb-uniblock--btn-underline.rb-uniblock--btn-underline .rb-ub-link:hover::after {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .rb-uniblock--cards-grid.rb-uniblock--btn-underline.rb-uniblock--btn-underline .rb-ub-link::after {
        transition: none;
    }
}

/* Ghost — прозрачный + обводка, цвет через --rbu-btn-color */
.rb-uniblock--cards-grid.rb-uniblock--btn-ghost.rb-uniblock--btn-ghost .rb-ub-link {
    background:     transparent;
    color:          var(--rbu-btn-color, currentColor);
    padding:        var(--rbu-btn-padding, 8px 20px);
    border:         1px solid var(--rbu-btn-color, currentColor);
    border-radius:  var(--rbu-btn-radius, 4px);
    font-size:      var(--rbu-btn-size, 0.875rem);
    font-weight:    var(--rbu-btn-weight, 500);
    letter-spacing: var(--rbu-btn-letter-spacing, 0);
}

/* Tile: button inverted */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-link {
    color: var(--rbu-tile-text);
}

.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-link--button {
    background: var(--rbu-bg-btn-bg);
    color:      var(--rbu-tile-text);
    border:     1px solid var(--rbu-bg-btn-border);
}

/* ── Bordered layout ───────────────────────────────────────────────────── */
/*
 * Чистый визуал: тонкая сетка-таблица между карточками. Прозрачные items,
 * никакого сплошного фона — сквозь карточки виден фон родителя.
 *
 * Приём: gap:0 + border-top/border-left на grid + border-right/border-bottom
 * на каждом item. Верх-лево закрывает grid, право-низ закрывают items.
 * Линии без двойной толщины, работает на любом числе колонок.
 */
.rb-uniblock--cards-grid.rb-uniblock--layout-bordered .rb-ub-grid {
    gap:         0;
    background:  transparent;
    border-top:  1px solid var(--rbu-bordered-divider);
    border-left: 1px solid var(--rbu-bordered-divider);
}

.rb-uniblock--cards-grid.rb-uniblock--layout-bordered .rb-ub-item {
    background:     var(--rbu-bordered-bg);
    padding:        var(--rbu-bordered-padding);
    border-radius:  0;
    border-right:   1px solid var(--rbu-bordered-divider);
    border-bottom:  1px solid var(--rbu-bordered-divider);
    color:          var(--rbu-bordered-text-color);
    flex-direction: column;
    align-items:    stretch;
    transition:     background-color 0.2s ease;
}

.rb-uniblock--cards-grid.rb-uniblock--layout-bordered .rb-ub-item:hover {
    background: var(--rbu-bordered-bg-hover);
}

/* Отключаем анимацию при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .rb-uniblock--cards-grid.rb-uniblock--layout-bordered .rb-ub-item {
        transition: none;
    }
}

/* ── Banner layout ──────────────────────────────────────────────────────── */
/*
 * Горизонтальная карточка во всю ширину: icon | content | CTA-кнопка.
 * Обычно используется с columns=1 как CTA-блок посреди страницы.
 *
 * banner задаёт ТОЛЬКО раскладку item (flex-row, без жёстких body grid'ов —
 * body-layout управляется через settings.button_placement). Для классического
 * banner-вида с кнопкой справа по центру — поставь button_placement=side-center.
 * На мобайле (≤600) item сворачивается в column.
 */
.rb-uniblock--cards-grid.rb-uniblock--layout-banner .rb-ub-item {
    flex-direction: row;
    align-items:    center;
    padding:        var(--rbu-card-padding);
    border-radius:  var(--rbu-card-radius);
    background:     var(--rbu-card-bg);
    gap:            24px;
}

@media (max-width: 600px) {
    .rb-uniblock--cards-grid.rb-uniblock--layout-banner .rb-ub-item {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }
}

/* ── Метрика (value + unit) — layout-агностично ─────────────────────────── */
/*
 * Выводится render'ом, если у item заполнено поле value (и/или unit).
 * <span class="rb-ub-value">7 833<sup class="rb-ub-unit">м³</sup></span>
 * Показывается ПЕРЕД title. Стилизуется через --rbu-value-* / --rbu-unit-*.
 * В любом layout применяются одни правила; layout может переопределить размер
 * (например, в bordered метрика крупнее) через каскад переменных ниже.
 */
.rb-uniblock--cards-grid .rb-ub-value {
    display:     block;
    font-size:   var(--rbu-value-size);
    font-weight: var(--rbu-value-weight);
    color:       var(--rbu-value-color);
    line-height: var(--rbu-value-line-height);
    margin-bottom: var(--rbu-value-spacing);
}

.rb-uniblock--cards-grid .rb-ub-unit {
    font-size:      var(--rbu-unit-size);
    color:          var(--rbu-unit-color);
    font-weight:    500;
    vertical-align: super;
    margin-left:    var(--rbu-unit-spacing);
    line-height:    1;
}

/* В bordered метрика по умолчанию крупнее (можно переопределить) */
.rb-uniblock--cards-grid.rb-uniblock--layout-bordered {
    --rbu-value-size: 3.5rem;
}

/* В bordered без фактоида — title занимает главную роль (больше, жирнее).
 * :not(:has(.rb-ub-value)) включается автоматически, когда поле value скрыто
 * в field_config (RichText не рендерится) или пользователь его не заполнил. */
.rb-uniblock--cards-grid.rb-uniblock--layout-bordered .rb-ub-item:not(:has(.rb-ub-value)) {
    --rbu-title-size:   1.5rem;
    --rbu-title-weight: 700;
    --rbu-text-size:    1rem;
}

/* В tile/cover (тёмный фон) инвертируем цвет unit */
.rb-uniblock--cards-grid.rb-uniblock--layout-tile .rb-ub-unit,
.rb-uniblock--cards-grid.rb-uniblock--layout-cover .rb-ub-unit {
    color: var(--rbu-tile-text, #fff);
}

/* ── Numbers (opt-in через settings.show_numbers = on) ────────────────── */
/*
 * CSS-counter на grid → auto-increment на item → ::after с decimal-leading-zero.
 * Работает для любого layout (bordered/card/flat/tile). Номер позиционируется
 * в правом верхнем углу карточки. Не конфликтует с icon-corner: если оба
 * нужны — задай разные offsets через --rbu-number-offset и --rbu-card-padding.
 */
.rb-uniblock--cards-grid.rb-uniblock--show-numbers .rb-ub-grid {
    counter-reset: rb-ub-counter;
}

.rb-uniblock--cards-grid.rb-uniblock--show-numbers .rb-ub-item {
    counter-increment: rb-ub-counter;
    position: relative;
}

.rb-uniblock--cards-grid.rb-uniblock--show-numbers .rb-ub-item::after {
    /* Префикс "№ " (или любой другой) задаётся через --rbu-number-prefix.
     * Дефолт — пустая строка (без префикса). */
    content: var(--rbu-number-prefix, "") counter(rb-ub-counter, decimal-leading-zero);
    position: absolute;
    top:    var(--rbu-number-offset);
    right:  var(--rbu-number-offset);
    font-size:   var(--rbu-number-size);
    font-family: var(--rbu-number-font);
    color:       var(--rbu-number-color);
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 2;
}

/* В bordered + show-numbers оффсет по умолчанию тянется к внутреннему padding */
.rb-uniblock--cards-grid.rb-uniblock--layout-bordered.rb-uniblock--show-numbers {
    --rbu-number-offset: var(--rbu-bordered-padding);
}