/* The distance to whatever follows is a margin and not padding, so it collapses into the next
   block's own instead of adding to it — 124px → 192px. */
.members {
    /* Rows 48px → 92px, the distance the design leaves between two rows of cards and, once a
       group is open, above and below its line. */
    --members-row-gap: clamp(3rem, 3rem + (100vw - 24.375rem) * 0.032885, 5.75rem);

    width: min(100% - 2 * var(--sav-page-margin), var(--sav-content-width));
    margin-block-end: clamp(7.75rem, 7.75rem + (100vw - 24.375rem) * 0.050823, 12rem);
    margin-inline: auto;

    /* On a page the layout already keeps the page margin and would hold the list to the reading
       column, so the list takes the full band there. */
    .page-layout > & {
        max-width: none;
        width: min(100%, var(--sav-content-width));
    }

    /* 48px → 24px under the bar — above the first group, and above the notice that there is
       none. */
    & .contents__bar {
        margin-block-end: clamp(1.5rem, 3rem - (100vw - 24.375rem) * 0.017938, 3rem);
    }

    /* At the right edge of the band at every width, where the shared bar goes there from the
       wide grid on. */
    & .contents__filters {
        margin-inline-start: auto;
    }
}

/* Dense, so the card beside an open group keeps its place in the row above it rather than
   moving below the band the group takes. */
.members__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row dense;
    column-gap: var(--sav-grid-gutter);
    /* The box the switch is positioned in has to hold its card too, or the card is no anchor. */
    position: relative;
    /* The last row carries the distance to a row that never follows. */
    margin: 0 0 calc(-1 * var(--members-row-gap));
    padding: 0;
    list-style: none;

    @media (min-width: 64rem) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Box-less, so card and group are two items of the list while staying one subtree — which is
   what keeps the anchor name of one card from reaching the switch of the next. */
.members__item {
    display: contents;
    anchor-scope: --members-card;
}

/* The distance between two rows belongs to the card and not to the grid: a group unfolds out of
   nothing, and a row gap would stand around it before it holds anything. A margin, since a
   padding would put the switch below the distance instead of below the card. */
.members__card {
    anchor-name: --members-card;
    margin-block-end: var(--members-row-gap);
}

/* A row of its own across the whole band, which is what unfolds it below the row rather than
   between two cards of it. The columns are passed down rather than a box drawn around them: the
   switch stands in one of them, the list it opens across all three. */
.members__sub-group {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;

    /* The box the fold measures, which the browser hands over on its own. */
    &::details-content {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        grid-template-rows: 0fr;

        @media (prefers-reduced-motion: no-preference) {
            transition:
                grid-template-rows var(--sav-duration-unfold) var(--sav-ease-out),
                content-visibility var(--sav-duration-unfold) allow-discrete;
        }
    }

    &[open]::details-content {
        grid-template-rows: 1fr;
    }
}

/* Against its own card and out of the flow, since the row it stands in begins under the tallest
   card of the row above. All three edges come off the card, so it needs no column of its own. */
.members__sub-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    position-anchor: --members-card;
    inset-inline-start: anchor(start);
    inset-inline-end: anchor(end);
    inset-block-start: calc(anchor(end) + 2rem);
    block-size: 2rem;
    /* The marker the user agent draws before a summary; the chevron of the design takes its
       place, at the other end of the row. */
    list-style: none;
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    letter-spacing: normal;
    cursor: pointer;

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

    &:hover {
        color: var(--sav-color-dunkelblau-hover);
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

.members__sub-chevron {
    display: flex;

    & svg {
        inline-size: 2rem;
        block-size: 2rem;
        /* The shared chevron points left; a quarter turn makes the down-caret this needs. */
        rotate: -90deg;

        /* Turned rather than swapped, so the switch says which way the group is going. */
        @media (prefers-reduced-motion: no-preference) {
            transition: rotate var(--sav-duration-fade) var(--sav-ease-out);
        }
    }

    .members__sub-group[open] & svg {
        rotate: 90deg;
    }
}

/* The sub-organisations stand in the columns of the list itself, which is what leaves every card
   its drawn 430px on the wide grid. This is also what the fold shrinks: a grid item stops at its
   own content unless it is told it may be smaller, and a margin, a padding or a border on it
   would be a height no `min-block-size` takes back — so the distances above and below stand in
   its own two ends. */
.members__sub-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    min-block-size: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;

    /* Where the switch stands and how tall it is: the group begins a row's distance below it,
       and the row's own distance is already spent above. */
    &::before {
        content: '';
        grid-column: 1 / -1;
        padding-block-start: 4rem;
    }

    /* The line the group closes with, a row's distance below its last card and above the next
       organisation. */
    &::after {
        content: '';
        grid-column: 1 / -1;
        padding-block-start: var(--members-row-gap);
        border-block-start: 1px solid var(--sav-color-dunkelgrau);
    }
}

/* The darker of the two blues, where a heading otherwise carries the lighter one, and the
   regular cut of the step below body text. */
.members__group-title {
    margin-block-end: 1.5rem;
    color: var(--sav-color-dunkelblau);
    font-size: var(--sav-text-s-size);
    line-height: var(--sav-text-s-line);
    font-weight: var(--sav-font-weight-regular);
    letter-spacing: normal;
}

/* A column rather than a block flow: what the list pulls back and what the button below it
   keeps are added that way instead of collapsing into one another. */
.members__group {
    display: flex;
    flex-direction: column;

    /* 96px → 92px. */
    & + & {
        margin-block-start: clamp(5.75rem, 6rem - (100vw - 24.375rem) * 0.00299, 6rem);
    }

    /* 60px → 92px between the last card of a group and its button, and only where a control
       follows: on a single page the wrapper renders empty, since a stream needs something to
       replace, and the distance would trail under the last card. */
    & .pagination:has(.pagination__nav) {
        margin-block-start: clamp(3.75rem, 3.75rem + (100vw - 24.375rem) * 0.023917, 5.75rem);
    }

    /* The design puts the button at the right edge of the band on a wide screen and across the
       column on a narrow one, so it switches side where the grid does. */
    & .pagination__more {
        align-self: stretch;

        @media (min-width: 64rem) {
            justify-content: flex-end;
        }
    }

    /* An outline button here, where the shared pagination brings a filled one. */
    & .pagination__more .button__link {
        inline-size: 100%;
        background-color: transparent;
        border-color: var(--sav-color-dunkelblau);
        color: var(--sav-color-dunkelblau);
        letter-spacing: normal;

        &:hover,
        &:active {
            background-color: var(--sav-color-dunkelblau);
            color: var(--sav-color-weiss);
        }

        @media (min-width: 64rem) {
            inline-size: auto;
        }
    }
}