@layer layout {
    .layout-row__heading-only {
        margin-bottom: var(--spacing-lg);
    }

    .layout-row {
        position: relative;
        padding-block: var(--row-padding-top, calc(var(--section-padding) / 2)) var(--row-padding-bottom, calc(var(--section-padding) / 2));
        border-top: var(--row-divider, none);

        &:first-child {
            border-top: none;
            padding-block-start: var(--row-padding-top, var(--section-padding-first, var(--section-padding)));
        }

        &::before {
            content: '';
            position: absolute;
            z-index: 1;
            inset-block: 0;
            inset-inline: max(0px, calc((100% - var(--content-width)) / 2));
            border-inline: var(--container-border, none);
            border-top: var(--row-divider-contained, none);
            pointer-events: none;
        }

        &:first-child::before {
            border-top: none;
        }

        &:first-child:has(.hero--cover),
        &:has(.ticker),
        &.layout-row--flush {
            padding-block: 0;
        }

        body.has-transparent-header &:first-child {
            padding-block-start: 0;
        }

        &:last-child {
            padding-bottom: var(--section-padding-last, var(--spacing-xl));
        }
    }

    .layout-row:first-child:has(.hero--cover) + .layout-row,
    .layout-row.layout-row--flush + .layout-row {
        padding-block-start: var(--section-padding);
    }

    .layout-col--stacked {
        display: flex;
        flex-direction: column;
        gap: var(--col-gap, var(--section-padding));
    }

    @media (min-width: 768px) {
        .layout-row--cols > .container {
            display: flex;
            gap: var(--gutter);

            & > * {
                flex: 1 1 0;
                min-width: 0;
            }
        }

        .layout-row--grid > .container {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            column-gap: var(--grid-gap, 0px);
            padding-inline: 0;
        }

        .layout-row--grid .layout-col {
            padding-inline: var(--grid-col-padding, var(--gutter));
            min-width: 0;
        }

        .layout-col--stacked {
            gap: var(--col-gap, var(--section-padding));
        }


        /* scroll-sync.js drives --scroll-sync-y. On an inner wrapper, not
           .layout-col itself, so the divider border stays full-height. */
        .layout-col__scroll-sync-inner {
            will-change: transform;
            transform: translateY(var(--scroll-sync-y, 0px));
        }

        /* Visual position independent of DOM/pool draw order. */
        .layout-col--order-first {
            order: -1;
        }

        .layout-col[style*="--col-padding"] {
            padding: var(--col-padding);
        }

        .layout-col[style*="--col-radius"] {
            border-radius: var(--col-radius);
        }

        .layout-col {
            position: relative;
        }

        .layout-col--sticky {
            position: sticky;
            align-self: start;
            top: var(--sidebar-top, calc(var(--header-visible, var(--header-height, 0px)) + var(--spacing-md)));
        }

        .layout-col[style*="--col-divider-right"]::after {
            content: '';
            position: absolute;
            inset-block: 0;
            left: 100%;
            width: var(--rule-width, 1px);
            transform: translateX(round(down, calc(var(--grid-gap, 0px) / 2 - 50%), 1px));
            background: var(--color-border);
            pointer-events: none;
        }

        .layout-row--dividers .layout-col:not(:last-child):not(.layout-col--sticky)::after {
            content: '';
            position: absolute;
            inset-block: 0;
            left: 100%;
            width: var(--rule-width, 1px);
            transform: translateX(round(down, calc(var(--grid-gap, 0px) / 2 - 50%), 1px));
            background: var(--color-border);
            pointer-events: none;
        }

        .layout-row--dividers .layout-col--sticky + .layout-col::before {
            content: '';
            position: absolute;
            inset-block: 0;
            right: 100%;
            width: var(--rule-width, 1px);
            transform: translateX(round(down, calc(var(--grid-gap, 0px) / -2 + 50%), 1px));
            background: var(--color-border);
            pointer-events: none;
        }

        .layout-row--dividers.layout-row--cols > .container > *:not(:last-child) {
            position: relative;
            padding-right: var(--gutter);
        }

        .layout-row--dividers.layout-row--cols > .container > *:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 1px;
            background: var(--color-border);
        }
    }

    @media (max-width: 767px) {
        .layout-row--grid > .container {
            display: flex;
            flex-direction: column;
            gap: var(--grid-gap, 0px);
        }

        .layout-row--grid .layout-col {
            min-width: 0;
        }

        .layout-col--mobile-first {
            order: -1;
        }
    }

    .layout-row__surface {
        position: absolute;
        z-index: 0;
        pointer-events: none;
    }

    .layout-row:has(.layout-row__surface) > .container {
        position: relative;
        z-index: 1;
    }

    @media (max-width: 768px) {
        .layout-row__surface {
            display: none;
        }
    }

    .layout-row--surface {
        background: var(--color-surface);
    }

    .layout-row--primary {
        background: var(--color-primary);
        color: var(--color-on-primary);

        a {
            color: var(--color-on-primary);
        }
    }
}