/**
 * Front-side layout grid, on every render. Scoped to `.cb-content-area` so it
 * cannot bleed into the host page; pure flex, two breakpoints, no framework.
 */

.cb-content-area {
    box-sizing: border-box;
}
.cb-content-area *,
.cb-content-area *::before,
.cb-content-area *::after {
    box-sizing: inherit;
}

.cb-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

/* Caps the inner row, NOT the <section>, so the background still spans
   the viewport. See docs/internals/rendering.md */
.cb-section--centered > .cb-row,
.cb-section--centered > .cb-tabs__nav {
    max-width: var(--cb-row-max-w, none);
    margin-inline: auto;
}

.cb-col {
    flex: 1 1 0;
    min-width: 0;
    /* A flex column, so a block with a max-width can opt into align-self.
       Stretch keeps the full-width default for everything else. */
    display: flex;
    flex-direction: column;
}

/* A preset is a span on a 12-unit grid, carried by flex-grow over a zero
   basis. See docs/internals/rendering.md#column-presets-are-spans */
.cb-col--col-1  { flex-grow: 1; }
.cb-col--col-2  { flex-grow: 2; }
.cb-col--col-3  { flex-grow: 3; }
.cb-col--col-4  { flex-grow: 4; }
.cb-col--col-5  { flex-grow: 5; }
.cb-col--col-6  { flex-grow: 6; }
.cb-col--col-7  { flex-grow: 7; }
.cb-col--col-8  { flex-grow: 8; }
.cb-col--col-9  { flex-grow: 9; }
.cb-col--col-10 { flex-grow: 10; }
.cb-col--col-11 { flex-grow: 11; }
.cb-col--col-12 { flex-basis: 100%; }

/* Basis 0, so the weights alone decide the ratio. Declared after the
   presets, so the shorthand wins when both classes are present. */
.cb-col--weighted { flex: var(--cb-col-grow, 1) 1 0; }

/* Tablet: spans up to a third sit two per row, uneven wide ones take the
   row. Basis only, so custom column weights keep their ratio. */
@media (max-width: 768px) {
    .cb-col--col-1,
    .cb-col--col-2,
    .cb-col--col-3,
    .cb-col--col-4,
    .cb-row:has(> .cb-col--col-1, > .cb-col--col-2, > .cb-col--col-3, > .cb-col--col-4) > .cb-col--col-6 {
        flex-basis: calc((100% - var(--cb-gap-t, var(--cb-gap-d, 1rem))) / 2);
    }
    .cb-col--col-5,
    .cb-col--col-7,
    .cb-col--col-8,
    .cb-col--col-9,
    .cb-col--col-10,
    .cb-col--col-11 { flex-basis: 100%; }
}

@media (max-width: 540px) {
    .cb-col--col-1,
    .cb-col--col-2,
    .cb-col--col-3,
    .cb-col--col-4,
    .cb-col--col-5,
    .cb-col--col-6,
    .cb-col--col-7,
    .cb-col--col-8,
    .cb-col--col-9,
    .cb-col--col-10,
    .cb-col--col-11,
    .cb-col--weighted { flex-basis: 100%; }
}

/* Reverse on mobile: the stacked columns read last to first. A column flow
   rather than `order`, which would need one rule per index. */
@media (max-width: 540px) {
    .cb-section--reverse-mobile > .cb-row {
        flex-direction: column-reverse;
    }
    .cb-section--reverse-mobile > .cb-row > .cb-col {
        flex: none;
        width: 100%;
    }
}

/* Tabs display: one column at a time, picked by a radio. Rules go to 20,
   the column cap. See docs/internals/rendering.md#columns-and-tabs */
.cb-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
/* Sized like the row: the section turns into a flex column once a
   vertical alignment is set, where the bar would otherwise shrink. */
.cb-tabs__nav {
    flex: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: var(--cb-tabs-gap, 1rem);
    border-bottom: 1px solid var(--cb-tabs-line, rgba(0, 0, 0, 0.15));
}
.cb-tabs__tab {
    margin-bottom: -1px;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.cb-section--display-tabs > .cb-row > .cb-col {
    display: none;
    flex: 1 1 100%;
}
.cb-tabs__radio:nth-of-type(1):checked ~ .cb-row > .cb-col:nth-of-type(1),
.cb-tabs__radio:nth-of-type(2):checked ~ .cb-row > .cb-col:nth-of-type(2),
.cb-tabs__radio:nth-of-type(3):checked ~ .cb-row > .cb-col:nth-of-type(3),
.cb-tabs__radio:nth-of-type(4):checked ~ .cb-row > .cb-col:nth-of-type(4),
.cb-tabs__radio:nth-of-type(5):checked ~ .cb-row > .cb-col:nth-of-type(5),
.cb-tabs__radio:nth-of-type(6):checked ~ .cb-row > .cb-col:nth-of-type(6),
.cb-tabs__radio:nth-of-type(7):checked ~ .cb-row > .cb-col:nth-of-type(7),
.cb-tabs__radio:nth-of-type(8):checked ~ .cb-row > .cb-col:nth-of-type(8),
.cb-tabs__radio:nth-of-type(9):checked ~ .cb-row > .cb-col:nth-of-type(9),
.cb-tabs__radio:nth-of-type(10):checked ~ .cb-row > .cb-col:nth-of-type(10),
.cb-tabs__radio:nth-of-type(11):checked ~ .cb-row > .cb-col:nth-of-type(11),
.cb-tabs__radio:nth-of-type(12):checked ~ .cb-row > .cb-col:nth-of-type(12),
.cb-tabs__radio:nth-of-type(13):checked ~ .cb-row > .cb-col:nth-of-type(13),
.cb-tabs__radio:nth-of-type(14):checked ~ .cb-row > .cb-col:nth-of-type(14),
.cb-tabs__radio:nth-of-type(15):checked ~ .cb-row > .cb-col:nth-of-type(15),
.cb-tabs__radio:nth-of-type(16):checked ~ .cb-row > .cb-col:nth-of-type(16),
.cb-tabs__radio:nth-of-type(17):checked ~ .cb-row > .cb-col:nth-of-type(17),
.cb-tabs__radio:nth-of-type(18):checked ~ .cb-row > .cb-col:nth-of-type(18),
.cb-tabs__radio:nth-of-type(19):checked ~ .cb-row > .cb-col:nth-of-type(19),
.cb-tabs__radio:nth-of-type(20):checked ~ .cb-row > .cb-col:nth-of-type(20) {
    display: flex;
}
.cb-tabs__radio:nth-of-type(1):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(1),
.cb-tabs__radio:nth-of-type(2):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(2),
.cb-tabs__radio:nth-of-type(3):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(3),
.cb-tabs__radio:nth-of-type(4):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(4),
.cb-tabs__radio:nth-of-type(5):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(5),
.cb-tabs__radio:nth-of-type(6):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(6),
.cb-tabs__radio:nth-of-type(7):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(7),
.cb-tabs__radio:nth-of-type(8):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(8),
.cb-tabs__radio:nth-of-type(9):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(9),
.cb-tabs__radio:nth-of-type(10):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(10),
.cb-tabs__radio:nth-of-type(11):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(11),
.cb-tabs__radio:nth-of-type(12):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(12),
.cb-tabs__radio:nth-of-type(13):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(13),
.cb-tabs__radio:nth-of-type(14):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(14),
.cb-tabs__radio:nth-of-type(15):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(15),
.cb-tabs__radio:nth-of-type(16):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(16),
.cb-tabs__radio:nth-of-type(17):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(17),
.cb-tabs__radio:nth-of-type(18):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(18),
.cb-tabs__radio:nth-of-type(19):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(19),
.cb-tabs__radio:nth-of-type(20):checked ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(20) {
    border-bottom-color: var(--cb-tabs-accent, currentColor);
    font-weight: 600;
}
.cb-tabs__radio:nth-of-type(1):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(1),
.cb-tabs__radio:nth-of-type(2):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(2),
.cb-tabs__radio:nth-of-type(3):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(3),
.cb-tabs__radio:nth-of-type(4):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(4),
.cb-tabs__radio:nth-of-type(5):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(5),
.cb-tabs__radio:nth-of-type(6):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(6),
.cb-tabs__radio:nth-of-type(7):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(7),
.cb-tabs__radio:nth-of-type(8):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(8),
.cb-tabs__radio:nth-of-type(9):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(9),
.cb-tabs__radio:nth-of-type(10):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(10),
.cb-tabs__radio:nth-of-type(11):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(11),
.cb-tabs__radio:nth-of-type(12):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(12),
.cb-tabs__radio:nth-of-type(13):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(13),
.cb-tabs__radio:nth-of-type(14):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(14),
.cb-tabs__radio:nth-of-type(15):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(15),
.cb-tabs__radio:nth-of-type(16):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(16),
.cb-tabs__radio:nth-of-type(17):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(17),
.cb-tabs__radio:nth-of-type(18):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(18),
.cb-tabs__radio:nth-of-type(19):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(19),
.cb-tabs__radio:nth-of-type(20):focus-visible ~ .cb-tabs__nav > .cb-tabs__tab:nth-child(20) {
    outline: 2px solid var(--cb-tabs-accent, currentColor);
    outline-offset: 2px;
}

/* Accordion display: each column is a panel behind its own checkbox and
   header. See docs/internals/rendering.md#columns-and-tabs */
.cb-accordion__toggle {
    display: none;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.cb-accordion__header {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--cb-accordion-line, rgba(0, 0, 0, 0.15));
    cursor: pointer;
}
.cb-accordion__header::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s ease;
}
.cb-accordion__toggle:checked + .cb-accordion__header::after,
.cb-accordion__header--close::after {
    transform: translateY(25%) rotate(-135deg);
}
.cb-accordion__toggle:focus-visible + .cb-accordion__header,
.cb-accordion__toggle:checked:focus-visible + .cb-accordion__header + .cb-accordion__header--close {
    outline: 2px solid var(--cb-accordion-accent, currentColor);
    outline-offset: 2px;
}

/* Tabs shown as an accordion below: the headers are labels for the tab
   radios, so the open panel follows the tabs rules above. */
.cb-tabs__radio:nth-of-type(1):checked ~ .cb-row > .cb-accordion__header:nth-of-type(1)::after,
.cb-tabs__radio:nth-of-type(2):checked ~ .cb-row > .cb-accordion__header:nth-of-type(2)::after,
.cb-tabs__radio:nth-of-type(3):checked ~ .cb-row > .cb-accordion__header:nth-of-type(3)::after,
.cb-tabs__radio:nth-of-type(4):checked ~ .cb-row > .cb-accordion__header:nth-of-type(4)::after,
.cb-tabs__radio:nth-of-type(5):checked ~ .cb-row > .cb-accordion__header:nth-of-type(5)::after,
.cb-tabs__radio:nth-of-type(6):checked ~ .cb-row > .cb-accordion__header:nth-of-type(6)::after,
.cb-tabs__radio:nth-of-type(7):checked ~ .cb-row > .cb-accordion__header:nth-of-type(7)::after,
.cb-tabs__radio:nth-of-type(8):checked ~ .cb-row > .cb-accordion__header:nth-of-type(8)::after,
.cb-tabs__radio:nth-of-type(9):checked ~ .cb-row > .cb-accordion__header:nth-of-type(9)::after,
.cb-tabs__radio:nth-of-type(10):checked ~ .cb-row > .cb-accordion__header:nth-of-type(10)::after,
.cb-tabs__radio:nth-of-type(11):checked ~ .cb-row > .cb-accordion__header:nth-of-type(11)::after,
.cb-tabs__radio:nth-of-type(12):checked ~ .cb-row > .cb-accordion__header:nth-of-type(12)::after,
.cb-tabs__radio:nth-of-type(13):checked ~ .cb-row > .cb-accordion__header:nth-of-type(13)::after,
.cb-tabs__radio:nth-of-type(14):checked ~ .cb-row > .cb-accordion__header:nth-of-type(14)::after,
.cb-tabs__radio:nth-of-type(15):checked ~ .cb-row > .cb-accordion__header:nth-of-type(15)::after,
.cb-tabs__radio:nth-of-type(16):checked ~ .cb-row > .cb-accordion__header:nth-of-type(16)::after,
.cb-tabs__radio:nth-of-type(17):checked ~ .cb-row > .cb-accordion__header:nth-of-type(17)::after,
.cb-tabs__radio:nth-of-type(18):checked ~ .cb-row > .cb-accordion__header:nth-of-type(18)::after,
.cb-tabs__radio:nth-of-type(19):checked ~ .cb-row > .cb-accordion__header:nth-of-type(19)::after,
.cb-tabs__radio:nth-of-type(20):checked ~ .cb-row > .cb-accordion__header:nth-of-type(20)::after {
    transform: translateY(25%) rotate(-135deg);
}
.cb-tabs__radio:nth-of-type(1):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(1),
.cb-tabs__radio:nth-of-type(2):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(2),
.cb-tabs__radio:nth-of-type(3):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(3),
.cb-tabs__radio:nth-of-type(4):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(4),
.cb-tabs__radio:nth-of-type(5):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(5),
.cb-tabs__radio:nth-of-type(6):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(6),
.cb-tabs__radio:nth-of-type(7):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(7),
.cb-tabs__radio:nth-of-type(8):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(8),
.cb-tabs__radio:nth-of-type(9):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(9),
.cb-tabs__radio:nth-of-type(10):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(10),
.cb-tabs__radio:nth-of-type(11):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(11),
.cb-tabs__radio:nth-of-type(12):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(12),
.cb-tabs__radio:nth-of-type(13):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(13),
.cb-tabs__radio:nth-of-type(14):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(14),
.cb-tabs__radio:nth-of-type(15):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(15),
.cb-tabs__radio:nth-of-type(16):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(16),
.cb-tabs__radio:nth-of-type(17):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(17),
.cb-tabs__radio:nth-of-type(18):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(18),
.cb-tabs__radio:nth-of-type(19):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(19),
.cb-tabs__radio:nth-of-type(20):focus-visible ~ .cb-row > .cb-accordion__header:nth-of-type(20) {
    outline: 2px solid var(--cb-accordion-accent, currentColor);
    outline-offset: 2px;
}

/* The accordion's own rules, scoped to where it applies: everywhere, or from
   a breakpoint down. See docs/internals/rendering.md#display-per-viewport */
.cb-section--display-accordion > .cb-row {
    display: block;
}
.cb-section--display-accordion > .cb-row > .cb-accordion__toggle {
    display: block;
}
.cb-section--display-accordion > .cb-row > .cb-accordion__header {
    display: flex;
}
.cb-section--display-accordion > .cb-row > .cb-col {
    display: none;
    padding-block: var(--cb-accordion-gap, 1rem);
}
.cb-section--display-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-col,
.cb-section--display-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close + .cb-col {
    display: flex;
}
.cb-section--display-accordion > .cb-row > .cb-accordion__header--close,
.cb-section--display-accordion > .cb-row > .cb-accordion__toggle[type="radio"]:checked + .cb-accordion__header {
    display: none;
}
.cb-section--display-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close {
    display: flex;
}
.cb-section--display-accordion > .cb-tabs__nav {
    display: none;
}

@media (width <= 768px) {
    .cb-section--t-accordion > .cb-row {
        display: block;
    }
    .cb-section--t-accordion > .cb-row > .cb-accordion__toggle {
        display: block;
    }
    .cb-section--t-accordion > .cb-row > .cb-accordion__header {
        display: flex;
    }
    .cb-section--t-accordion > .cb-row > .cb-col {
        display: none;
        padding-block: var(--cb-accordion-gap, 1rem);
    }
    .cb-section--t-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-col,
    .cb-section--t-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close + .cb-col {
        display: flex;
    }
    .cb-section--t-accordion > .cb-row > .cb-accordion__header--close,
    .cb-section--t-accordion > .cb-row > .cb-accordion__toggle[type="radio"]:checked + .cb-accordion__header {
        display: none;
    }
    .cb-section--t-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close {
        display: flex;
    }
    .cb-section--t-accordion > .cb-tabs__nav {
        display: none;
    }
}

@media (width <= 540px) {
    .cb-section--m-accordion > .cb-row {
        display: block;
    }
    .cb-section--m-accordion > .cb-row > .cb-accordion__toggle {
        display: block;
    }
    .cb-section--m-accordion > .cb-row > .cb-accordion__header {
        display: flex;
    }
    .cb-section--m-accordion > .cb-row > .cb-col {
        display: none;
        padding-block: var(--cb-accordion-gap, 1rem);
    }
    .cb-section--m-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-col,
    .cb-section--m-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close + .cb-col {
        display: flex;
    }
    .cb-section--m-accordion > .cb-row > .cb-accordion__header--close,
    .cb-section--m-accordion > .cb-row > .cb-accordion__toggle[type="radio"]:checked + .cb-accordion__header {
        display: none;
    }
    .cb-section--m-accordion > .cb-row > .cb-accordion__toggle:checked + .cb-accordion__header + .cb-accordion__header--close {
        display: flex;
    }
    .cb-section--m-accordion > .cb-tabs__nav {
        display: none;
    }
}

/* Slider display: the row scrolls and snaps, --cb-slides-* columns at a
   time. Disjoint ranges, so a range never has to undo another. */
.cb-row {
    --cb-slide-n: var(--cb-slides-d, 1);
    --cb-slide-gap: 1rem;
}
@media (width <= 768px) {
    .cb-row {
        --cb-slide-n: var(--cb-slides-t, var(--cb-slides-d, 1));
    }
}
@media (width <= 540px) {
    .cb-row {
        --cb-slide-n: var(--cb-slides-m, var(--cb-slides-t, var(--cb-slides-d, 1)));
    }
}

.cb-section--display-slider:not(.cb-section--responsive) > .cb-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.cb-section--display-slider:not(.cb-section--responsive) > .cb-row > .cb-col {
    flex: 0 0 calc((100% - (var(--cb-slide-n) - 1) * var(--cb-slide-gap)) / var(--cb-slide-n));
    scroll-snap-align: start;
}
.cb-section--display-slider:not(.cb-section--responsive) > .cb-slider__controls {
    display: flex;
}

@media (width > 768px) {
    .cb-section--responsive.cb-section--display-slider > .cb-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .cb-section--responsive.cb-section--display-slider > .cb-row > .cb-col {
        flex: 0 0 calc((100% - (var(--cb-slide-n) - 1) * var(--cb-slide-gap)) / var(--cb-slide-n));
        scroll-snap-align: start;
    }
    .cb-section--responsive.cb-section--display-slider > .cb-slider__controls {
        display: flex;
    }
}

@media (540px < width <= 768px) {
    .cb-section--t-slider > .cb-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .cb-section--t-slider > .cb-row > .cb-col {
        flex: 0 0 calc((100% - (var(--cb-slide-n) - 1) * var(--cb-slide-gap)) / var(--cb-slide-n));
        scroll-snap-align: start;
    }
    .cb-section--t-slider > .cb-slider__controls {
        display: flex;
    }
}

@media (width <= 540px) {
    .cb-section--m-slider > .cb-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
    }
    .cb-section--m-slider > .cb-row > .cb-col {
        flex: 0 0 calc((100% - (var(--cb-slide-n) - 1) * var(--cb-slide-gap)) / var(--cb-slide-n));
        scroll-snap-align: start;
    }
    .cb-section--m-slider > .cb-slider__controls {
        display: flex;
    }
}

/* Controls are built by slider.js, which also hides the scrollbar once
   they exist: without them it is the only affordance left. */
.cb-slider--enhanced > .cb-row {
    scrollbar-width: none;
}
.cb-slider--enhanced > .cb-row::-webkit-scrollbar {
    display: none;
}
.cb-slider__controls {
    display: none;
    flex: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: var(--cb-slider-gap, 1rem);
}
.cb-slider__controls[hidden] {
    display: none !important;
}
.cb-section--centered > .cb-slider__controls {
    max-width: var(--cb-row-max-w, none);
    margin-inline: auto;
}
.cb-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.cb-slider__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}
.cb-slider__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.cb-slider__dot {
    width: 0.625rem;
    height: 0.625rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.3;
    cursor: pointer;
}
.cb-slider__dot[aria-current="true"] {
    opacity: 1;
}
.cb-slider__arrow:focus-visible,
.cb-slider__dot:focus-visible {
    outline: 2px solid var(--cb-slider-accent, currentColor);
    outline-offset: 2px;
}

/* Order per viewport: ranks become --cb-order-t/m on every sibling of a
   group. See docs/internals/rendering.md#order-per-viewport */
@media (width <= 768px) {
    .cb-content-area--ordered {
        display: flex;
        flex-direction: column;
    }
    .cb-content-area > .cb-section,
    .cb-col > .cb-block {
        order: var(--cb-order-t, 0);
    }
}
@media (width <= 540px) {
    .cb-content-area > .cb-section,
    .cb-col > .cb-block {
        order: var(--cb-order-m, var(--cb-order-t, 0));
    }
}