/* ==========================================================================
   BLOCK: COUNTRY DATA -- Data by Country: nested region disclosure
   accordions (native <details>, one open per level via name=) plus the
   Membership Profile stats aside (shares .aside-panel with the library).
   ========================================================================== */

@scope (.block-country-data) {
    :scope {
        padding-block: clamp(44px, 9cqw, 130px);
        container-type: inline-size;
        container-name: countrydata;
    }
    .with-aside { display: grid; gap: clamp(28px, 4cqw, 64px); align-items: start; }
    @container countrydata (width >= 1000px) {
        .with-aside { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
    }

    .region-list {
        border: 1px solid var(--panel-border);
        background: var(--panel-bg);
        color: var(--panel-text);
    }

    details { interpolate-size: allow-keywords; }
    details::details-content {
        block-size: 0;
        overflow: clip;
        transition: block-size 0.4s var(--ease-lux), content-visibility 0.4s allow-discrete;
    }
    details[open]::details-content { block-size: auto; }

    summary {
        list-style: none;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        border-block-end: 1px solid var(--panel-border);
        transition: background 0.25s, color 0.25s;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
        content: "";
        inline-size: 7px;
        block-size: 7px;
        border-inline-end: 2px solid currentColor;
        border-block-end: 2px solid currentColor;
        rotate: 45deg;
        transition: rotate 0.3s var(--ease-lux);
        flex: none;
    }
    details[open] > summary { color: var(--accent-ink); }
    details[open] > summary::after { rotate: 225deg; }
    summary:hover { background: var(--panel-hover); color: var(--accent-ink); }

    /* Tier sizes */
    .region > summary {
        padding: clamp(18px, 2.4cqw, 32px) clamp(20px, 2.6cqw, 36px);
        font-weight: 900;
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.22em;
    }
    .subregion > summary {
        padding: clamp(14px, 1.8cqw, 18px) 26px clamp(14px, 1.8cqw, 18px) 52px;
        font-weight: 700;
        font-size: 0.92rem;
        letter-spacing: 0.08em;
    }
    .country-links { display: grid; }
    .country-links a {
        padding: clamp(11px, 1.5cqw, 15px) 26px clamp(11px, 1.5cqw, 15px) 76px;
        font-weight: 400;
        font-size: 0.98rem;
        border-block-end: 1px solid var(--panel-border);
        transition: background 0.25s, color 0.25s, padding-inline-start 0.25s;
    }
    .country-links a::before { content: "--" / ""; margin-inline-end: 10px; color: var(--accent-lime); }
    .country-links a:hover { background: var(--panel-hover); color: var(--accent-ink); padding-inline-start: 86px; }

    /* Stats aside: shared component -- see block-aside.css. */
}