.component-accordion {
    container-type: inline-size;
    container-name: accordion-container;

    .header {
        font-size: 4.8rem;
        text-wrap: balance;
    }

    /* Subhead (heading inside the intro copy) — match other headings, not the big h2 size */
    .heading-and-copy .copy :where(h1, h2, h3, h4, h5, h6) {
        font-size: 2.4rem;
    }

    /*
    Restore top spacing above in-copy headings (H3–H6 in the WYSIWYG) for both the intro
    copy and each accordion item's content. The global `p + heading` / `ul + heading` rule
    in core/css/105-headers.css zeroes the heading's top margin when it follows body text.
    Targets .copy, so the accordion item title h3 (in <summary>) is unaffected.
    */
    .copy :where(p, ul, ol) + :where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
        margin-block-start: 1.5rem;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .single-accordion-item > :is(.copy, .header) {
        padding-inline: var(--size-medium);
    }

    .collapse-all {
        background: transparent;
        color: var(--color-brand-navy);
        border: solid 1px var(--color-brand-navy);
        border-radius: 4rem;
        transition: all 250ms ease-in-out;

        &:hover {
            background: var(--color-brand-navy);
            color: var(--color-primary-white);
        }

    }

    :where(& > .component-wrapper) {
        :where(& > .region) {
            :where(& > .content-wrap) {

                display: grid;
                grid-template-columns: 1fr;
                gap: var(--size-small);

                :where(.accordion-items) {
                    width: 100%;

                    :where(& > .accordion-column) {
                        container-type: inline-size;
                        container-name: accordion-column-container;
                    }
                }
            }
        }
    }

    &.columns-2 {
        .content-wrap {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--size-medium);
            justify-content: space-between;
        }

        /* Top-align the heading block with the first question (past the expand/collapse controls). */
        &[data-expand-collapse-available] .heading-and-copy {
            margin-block-start: 9.5rem;
        }

        .heading-and-copy {
            .header,
            .copy {
                padding-inline: 0;
            }
        }
    }
}

.component-accordion {
    :where(& > .component-wrapper) {
        --accordion-icon-width: 4rem;

        :where(& > .region) {
            :where(& > .content-wrap) {

                :where(.accordion-items) {
                    display: grid;
                    column-gap: 10rem;
                    margin-block-start: var(--size-small);
                    max-width: 100%;
                    margin-inline: auto;

                    :where(&[data-columns-count="1"]) {
                        grid-template-columns: 1fr;
                    }

                    :where(&[data-columns-count="2"]) {
                        grid-template-columns: 1fr 1px 1fr;
                    }

                    :where(& > .line) {
                        height: 100%;
                    }


                }
            }
        }
    }
}

@container accordion-container (  inline-size < 100rem) {
    .component-accordion :where(.accordion-items) {
        column-gap: 5rem;
    }

    .component-accordion.columns-2 {
        .content-wrap {
            grid-template-columns: 1fr;
            justify-content: center;
            gap: var(--size-small);
        }

        /* Stacked layout: no heading offset (the items are no longer beside it). */
        &[data-expand-collapse-available] .heading-and-copy {
            margin-block-start: 0;
        }
    }
}

@container accordion-container (  inline-size < 80rem) {
    .component-accordion :where(.accordion-items) {
        column-gap: var(--size-small);
    }
}

@container accordion-container (  inline-size < 70rem) {
    .component-accordion :where(.accordion-items) {
        :where(.accordion-items[data-columns-count="2"]) {
            grid-template-columns: 1fr;
        }

        :where(.accordion-column:first-of-type .single-accordion-item:last-of-type) {
            border-bottom: 1px solid var(--local-primary-color);
        }

        :where(.accordion-items .line) {
            display: none;
        }
    }
}

@media print {
    .component-accordion {
        .collapse-all {
            display: none !important;
        }

        &.columns-2 .content-wrap {
            grid-template-columns: 1fr;
        }

        :where(.accordion-items[data-columns-count="2"]) {
            grid-template-columns: 1fr;
        }

        :where(.accordion-items .line) {
            display: none;
        }
    }
}

@container accordion-container (  inline-size < 50rem) {
    .component-accordion {
        .header,
        .copy,
        summary{
            padding-inline: var(--size-x-small);
        }
    }
}