/**
 * Numbered list: a few principles or steps as divided rows, a big number on
 * the left and a title with a short text on the right. Static, always open;
 * a collapsible list is accordion--numbered, a step path is process.
 *
 * globalClass: numbered-list   (the list)
 *              numbered-item   (each row)
 *
 * Structure:
 *   .numbered-list.gb-container
 *     .numbered-item.gb-container
 *       p.numbered-item-number                 "01"
 *       .numbered-item-body.gb-container > h3.numbered-item-title + p
 *
 * Tuning: --numbered-line (2px solid border color), --numbered-number-width (40px)
 *
 * Chain animations: the list animates as one block (it usually sits in a
 * text column that animates as a whole).
 *
 * Hers Klub, 11/2026. Candidate for the base theme.
 */

:root {
    --numbered-line: 2px solid var(--border-clr);
    --numbered-number-width: 40px;
}

.numbered-list {
    border-bottom: var(--numbered-line);
}

.numbered-item,
.numbered-item > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: flex;
    align-items: baseline;
    gap: 20px;
}

.numbered-item {
    padding: 22px 0;
    border-top: var(--numbered-line);
}

.numbered-item-number {
    flex: 0 0 var(--numbered-number-width);
    margin: 0;
    font-family: var(--title-font);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-clr);
}

.numbered-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.numbered-item-body > * {
    margin: 0;
}

h3.numbered-item-title {
    margin-bottom: 6px;
    font-family: var(--main-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}