/**
 * Preset: matrix
 *
 * CSS grid таблица, адаптивная. Desktop: repeat(N, 1fr) — классическая
 * табличная раскладка. Mobile (≤600px): block-stack, заголовок колонки
 * выводится над значением через ::before + data-col-label (зеркало <th>
 * в aria-table-pattern).
 *
 * CSS namespace: .rb-uniblock--matrix
 */

/* ── Variables ─────────────────────────────────────────────────────────── */
.rb-uniblock--matrix {
    /* Chain на общие --rbu-* токены (DesignCenter) → Blocksy → hardcoded fallback. */
    --rbu-matrix-cell-padding:  var(--rbu-card-padding, 24px);
    --rbu-matrix-header-color:  var(--rbu-text-secondary, var(--theme-palette-color-3, #57636f));
    --rbu-matrix-divider-color: var(--rbu-line-color, color-mix(in srgb, currentColor 15%, transparent));
    --rbu-matrix-divider-style: var(--rbu-line-style, solid);
    --rbu-matrix-accent-bg:     var(--rbu-accent, var(--theme-palette-color-3, #1a2332));
    --rbu-matrix-accent-text:   var(--rbu-card-bg, var(--theme-palette-color-8, #ffffff));
    --rbu-matrix-badge-color:   var(--rbu-accent, var(--theme-palette-color-1, #e8753d));
}

/* ── Base grid ─────────────────────────────────────────────────────────── */
.rb-uniblock--matrix {
    display: grid;
    grid-template-columns: repeat(var(--rbu-matrix-cols, 3), 1fr);
    /* Reset от темы — чтобы <div role="table"> не получал border от Blocksy */
    border: 0;
    width: 100%;
}

/* display:contents — header и row сами не создают бокс, их children занимают
 * ячейки родительского grid. Это даёт real table-like раскладку без <table>. */
.rb-uniblock--matrix .rb-ub-matrix-header,
.rb-uniblock--matrix .rb-ub-matrix-row {
    display: contents;
}

/* ── Column header ─────────────────────────────────────────────────────── */
.rb-uniblock--matrix .rb-ub-matrix-col-header {
    padding:         var(--rbu-matrix-cell-padding);
    font-size:       1.2rem;
    font-weight:     600;
    letter-spacing:  .12em;
    text-transform:  uppercase;
    color:           var(--rbu-matrix-header-color);
    border-bottom:   1px var(--rbu-matrix-divider-style) var(--rbu-matrix-divider-color);
    border-top:      2px solid var(--rbu-matrix-header-color); /* верхняя акцент-линия таблицы */
    position:        relative;
}

/* Первая ячейка header — не получает top-accent (визуально «лейбл шапки») */
.rb-uniblock--matrix .rb-ub-matrix-col-header:first-child {
    font-size:       0.8rem;
}

.rb-uniblock--matrix .rb-ub-matrix-badge {
    position:       absolute;
    top:            12px;
    right:          var(--rbu-matrix-cell-padding);
    font-size:      0.65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color:          var(--rbu-matrix-badge-color);
}

/* ── Cells ─────────────────────────────────────────────────────────────── */
.rb-uniblock--matrix .rb-ub-matrix-cell {
    padding:       var(--rbu-matrix-cell-padding);
    border-bottom: 1px var(--rbu-matrix-divider-style) var(--rbu-matrix-divider-color);
    font-size:     1rem;
    line-height:   1.5;
}

/* Последняя строка — без нижней линии (более чистый low-edge) */
.rb-uniblock--matrix .rb-ub-matrix-row:last-child .rb-ub-matrix-cell {
    border-bottom: 0;
}

/* ── Row-label (первая cell каждой строки) ────────────────────────────── */
.rb-uniblock--matrix.rb-uniblock--matrix-rowlabel-caps-meta .rb-ub-matrix-cell--rowlabel {
    color:          var(--rbu-matrix-header-color);
    font-size:      0.8rem;
    font-weight:    500;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.rb-uniblock--matrix.rb-uniblock--matrix-rowlabel-bold .rb-ub-matrix-cell--rowlabel {
    font-weight: 700;
}

/* ── Highlight column (fullheight, не per-cell — непрерывная полоса) ──── */
/* Фон подсветки на col-header */
.rb-uniblock--matrix.rb-uniblock--matrix-hl-accent-bg .rb-ub-matrix-col-header--highlight {
    background:     var(--rbu-matrix-accent-bg);
    color:          var(--rbu-matrix-accent-text);
    /* font-size:      1.2rem; */
    font-weight:    700;
    text-transform: none;
    letter-spacing: normal;
    border-top-color: var(--rbu-matrix-accent-bg);
}

.rb-uniblock--matrix.rb-uniblock--matrix-hl-accent-bg .rb-ub-matrix-col-header--highlight .rb-ub-matrix-badge {
    color: var(--rbu-matrix-badge-color);
    top:   8px;
}

/* Легкий фон на cells подсвеченной колонки — не такой же как у header,
 * чтобы header оставался акцентом */
.rb-uniblock--matrix.rb-uniblock--matrix-hl-accent-bg .rb-ub-matrix-cell--highlight {
    background: color-mix(in srgb, var(--rbu-matrix-accent-bg) 6%, transparent);
}

/* Subtle-bg: лёгкий фон на всей колонке */
.rb-uniblock--matrix.rb-uniblock--matrix-hl-subtle-bg .rb-ub-matrix-col-header--highlight,
.rb-uniblock--matrix.rb-uniblock--matrix-hl-subtle-bg .rb-ub-matrix-cell--highlight {
    background: color-mix(in srgb, var(--rbu-matrix-accent-bg) 8%, transparent);
}

/* Border-side: боковые обводки */
.rb-uniblock--matrix.rb-uniblock--matrix-hl-border-side .rb-ub-matrix-col-header--highlight,
.rb-uniblock--matrix.rb-uniblock--matrix-hl-border-side .rb-ub-matrix-cell--highlight {
    border-left:  2px solid var(--rbu-matrix-accent-bg);
    border-right: 2px solid var(--rbu-matrix-accent-bg);
}

.rb-uniblock--matrix.rb-uniblock--matrix-hl-border-side .rb-ub-matrix-header .rb-ub-matrix-col-header--highlight {
    border-top: 2px solid var(--rbu-matrix-accent-bg);
}

.rb-uniblock--matrix.rb-uniblock--matrix-hl-border-side .rb-ub-matrix-row:last-child .rb-ub-matrix-cell--highlight {
    border-bottom: 2px solid var(--rbu-matrix-accent-bg);
}

/* ── Numbered rows (01, 02, …) — counter через ::before первой cell ──── */
.rb-uniblock--matrix.rb-uniblock--matrix-numbered {
    counter-reset: rb-ub-matrix-counter;
}

.rb-uniblock--matrix.rb-uniblock--matrix-numbered .rb-ub-matrix-row {
    counter-increment: rb-ub-matrix-counter;
}

.rb-uniblock--matrix.rb-uniblock--matrix-numbered .rb-ub-matrix-cell--rowlabel::before {
    content: counter(rb-ub-matrix-counter, decimal-leading-zero) " / ";
    color:   var(--rbu-matrix-badge-color);
    font-weight: 600;
}

/* ── Mobile stack ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rb-uniblock--matrix {
        display:  block;
        border-top: 2px solid var(--rbu-matrix-header-color);
    }

    /* Header скрываем — его info переносится через data-col-label в каждой cell */
    .rb-uniblock--matrix .rb-ub-matrix-header {
        display: none;
    }

    /* Row становится блоком-карточкой */
    .rb-uniblock--matrix .rb-ub-matrix-row {
        display:        block;
        padding:        var(--rbu-matrix-cell-padding) 0;
        border-bottom:  1px var(--rbu-matrix-divider-style) var(--rbu-matrix-divider-color);
    }

    .rb-uniblock--matrix .rb-ub-matrix-row:last-child {
        border-bottom: 0;
    }

    /* Cell — блок с лейблом колонки сверху (кроме первой = row-label) */
    .rb-uniblock--matrix .rb-ub-matrix-cell {
        display:       block;
        padding:       8px var(--rbu-matrix-cell-padding);
        border:        0;
        background:    transparent; /* сбрасываем highlight-bg на мобиле */
    }

    .rb-uniblock--matrix .rb-ub-matrix-cell:not(.rb-ub-matrix-cell--rowlabel)::before {
        content:        attr(data-col-label);
        display:        block;
        font-size:      0.7rem;
        font-weight:    600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color:          var(--rbu-matrix-header-color);
        margin-bottom:  4px;
    }

    /* Row-label на мобиле — жирная крупная строка-заголовок карточки */
    .rb-uniblock--matrix .rb-ub-matrix-cell--rowlabel {
        font-size:   1.15rem;
        font-weight: 700;
        text-transform: none;
        letter-spacing: normal;
        color:        inherit;
        padding-bottom: 12px;
    }

    /* Highlight на мобиле — badge перед cell'ом в highlight-колонке */
    .rb-uniblock--matrix .rb-ub-matrix-cell--highlight::after {
        content:       attr(data-col-label);
        display:       none; /* badge через col-label не нужен, info уже в ::before */
    }
}