/* ==========================================================================
   BLOCK: MEMBERS DIRECTORY - the global member listing (our-members)
   Continent <details name="members"> accordions (exclusive open), country
   blocks in a responsive column grid, typed member link lists. Uses
   interpolate-size + ::details-content for the open/close animation where
   supported; content is never gated.
   ========================================================================== */

@scope (.block-members-directory) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: members;
    }

    .m-continent {
        border-block-start: 1px solid var(--border-light);
        /* toggle repositioning (woo.js) lands the summary just below
           the masthead rather than at the very top of the viewport */
        scroll-margin-block-start: calc(var(--header-h) + 16px);
    }
    .m-continent:last-of-type { border-block-end: 1px solid var(--border-light); }

    .m-continent summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        padding-block: clamp(28px, 3.2cqw, 48px);
        transition: color 0.25s;
    }
    .m-continent summary::-webkit-details-marker { display: none; }
    .m-continent summary:hover .m-cname { color: var(--accent-ink); }
    .m-continent summary:focus-visible {
        outline: 2px solid var(--accent-lime);
        outline-offset: 4px;
    }

    .m-cname {
        margin: 0;
        font-weight: 100;
        font-size: clamp(1.8rem, 3.4cqw, 3rem);
        letter-spacing: -0.03em;
        line-height: 1;
    }
    .m-continent[open] .m-cname { font-weight: 800; }
    .m-cname::after {
        content: "+" / "";
        display: inline-block;
        margin-inline-start: 16px;
        font-weight: 100;
        color: var(--accent-ink);
        transition: rotate 0.3s var(--ease-lux);
    }
    .m-continent[open] .m-cname::after { rotate: 45deg; }

    .m-count {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--color-text-muted);
    }

    /* open/close animation - progressive */
    @supports (interpolate-size: allow-keywords) {
        .m-continent { interpolate-size: allow-keywords; }
        .m-continent::details-content {
            block-size: 0;
            overflow: clip;
            transition: block-size 0.45s var(--ease-lux), content-visibility 0.45s allow-discrete;
        }
        .m-continent[open]::details-content { block-size: auto; }
    }

    .m-countries {
        display: grid;
        gap: clamp(36px, 4.4cqw, 72px);
        padding-block: clamp(10px, 1.4cqw, 20px) clamp(40px, 5cqw, 80px);
    }
    @container members (width >= 720px) {
        .m-countries { grid-template-columns: repeat(2, 1fr); }
    }
    @container members (width >= 1100px) {
        .m-countries { grid-template-columns: repeat(3, 1fr); }
    }

    .m-country {
        border-inline-start: 3px solid var(--accent-lime);
        padding-inline-start: clamp(18px, 2.2cqw, 30px);
        display: grid;
        gap: 16px;
        align-content: start;
    }
    .m-country h3 {
        font-weight: 800;
        font-size: clamp(1rem, 1.2cqw, 1.15rem);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .m-country ul { display: grid; gap: 12px; }
    .m-country li {
        font-weight: 400;
        font-size: 0.95rem;
        line-height: 1.6;
    }
    .m-country a { color: var(--text-primary); font-weight: 600; }
    .m-country a:hover { color: var(--accent-ink); }
    .m-name { font-weight: 600; }
    .m-type {
        display: block;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--color-text-muted);
    }
}

/* --------------------------------------------------------- WALL VIEW --
   our-members-wall: every member as a plate. In production each plate
   swaps the set name for the member's logo <img> where one exists in
   MariaDB (logo_url); the typeset name is the universal fallback. */
@scope (.block-members-wall) {
    :scope {
        padding-block: var(--space-lg);
        container-type: inline-size;
        container-name: mwall;
    }
    .w-continent { margin-block-start: clamp(36px, 4.4cqw, 72px); }
    .w-continent:first-of-type { margin-block-start: 0; }
    .w-continent h2 {
        font-weight: 100;
        font-size: clamp(1.8rem, 3.4cqw, 3rem);
        letter-spacing: -0.03em;
        margin-block-end: clamp(18px, 2cqw, 30px);
    }
    .w-continent h2 strong { font-weight: 800; }
    .m-wall {
        display: grid;
        gap: clamp(12px, 1.6cqw, 20px);
        grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    }
    .m-plate {
        display: grid;
        gap: 8px;
        align-content: center;
        min-block-size: 128px;
        padding: clamp(18px, 2cqw, 28px);
        background: #fff;
        border: 1px solid var(--border-light);
        transition: translate 0.3s var(--ease-lux), box-shadow 0.3s;
    }
    @supports (color: light-dark(#000, #fff)) {
        .m-plate { background: light-dark(#fff, #161616); }
    }
    a.m-plate:hover { translate: 0 -5px; box-shadow: var(--shadow-hover); }
    .p-name {
        font-weight: 800;
        font-size: clamp(0.98rem, 1.15cqw, 1.1rem);
        line-height: 1.35;
        color: var(--text-primary);
    }
    .p-meta {
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--color-text-muted);
    }
}