/**
 * FAQ column layout.
 *
 * assets/css/faq.css is the UI team's file and is not edited, so the override lives here — the same
 * arrangement as brands-extras.css beside brands.css.
 *
 * **Why the layout moved out of their file.** faq.css:5-11 lays out two columns with
 * `column-count: 2; column-fill: balance`. Column balancing is implementation-defined — the spec
 * leaves the algorithm to the browser — so Safari put five questions in the left column where Chrome
 * puts four. Both engines are correct; no combination of `break-inside` or `column-gap` makes them
 * agree. templates/blocks/faq-section.php now splits the questions into two real
 * `.faq_accordion__col` stacks, and all this sheet does is sit them side by side.
 *
 * **Two children, two cells, one row** — which is why there is no row-gap here to reason about, and
 * why `column-gap` is left to faq.css's own `gap` (20px, stepping to 12px at 1439.98px). This sheet
 * never mirrors their breakpoints, so the two cannot drift apart.
 *
 * **The column count is `--cols-2`, not `--single`.** faq.css hangs one column off
 * `.faq_accordion--single`, but faq.js keys the open-first behaviour off that same class and is not
 * ours to change — so `--single` keeps meaning "open the first panel" and the layout follows a class
 * of its own. The two rules below are what completes that split: without them a FAQ that is one
 * column but does not open its first panel would fall through to faq.css's base `column-count: 2`
 * and lose the list width, which is the combination the new argument exists to make possible.
 */

/* faq.css's base rule is column-count: 2, cancelled by the UI team only on --single. */
.faq_accordion:not(.faq_accordion--cols-2) {
    column-count: 1;
}

/* faq.css:16-24 hangs the list's width and its last-card margin off --single too. Follow the column
   count instead, so a one-column FAQ looks the same whether or not its first panel opens. Purely
   additive: the UI team's --single rules still apply everywhere they always did. */
.sec-faq-list .faq_accordion:not(.faq_accordion--cols-2) {
    max-width: 1280px;
    margin: 0 auto;
}

.sec-faq-list .faq_accordion:not(.faq_accordion--cols-2) .accordion_in:last-child {
    margin-bottom: 0;
}

/* Above 1200px only — faq.css:95-99 already drops to one column below that, where the two stacks
   simply follow one another and the layout is unchanged. */
@media (min-width: 1200px) {
    .faq_accordion.faq_accordion--cols-2 {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        /* A grid container is not a block container, so multicol no longer applies to it. Belt and
           braces, and it documents that the column-count above is deliberately overridden. */
        column-count: auto;
    }
}