@layer components {
    .community-members {
        grid-column: 1 / -1;
        display: grid;
        gap: var(--space-24);
        padding-inline: var(--space-16);
        margin-block-end: var(--space-40);
    }

    .community-members__hero {
        display: grid;
        gap: var(--space-10);
        max-width: 52rem;
    }

    .community-members__hero h1 {
        margin: 0;
        color: var(--color-text-strong);
        font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
    }

    .community-members__hero p,
    .community-members__empty {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-base);
        line-height: var(--leading-relaxed);
    }

    .community-members__tabs {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        padding-bottom: var(--space-16);
        border-bottom: 1px solid var(--color-border);
    }

    .community-members__tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: var(--space-40);
        padding: 0 var(--space-14);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-round);
        background: var(--color-card-bg);
        color: var(--color-text);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-extrabold);
        line-height: var(--leading-none);
        text-decoration: none;
        transition: border-color .18s ease, background-color .18s ease, color .18s ease;
    }

    .community-members__tab:hover,
    .community-members__tab:focus-visible {
        border-color: color-mix(in oklch, var(--color-brand-primary) 54%, var(--color-card-border));
        background: var(--color-card-bg-hover);
        color: var(--color-text-strong);
        outline: none;
    }

    .community-members__tab--active {
        border-color: color-mix(in oklch, var(--color-brand-primary) 64%, var(--color-card-border));
        background: color-mix(in oklch, var(--color-brand-primary) 18%, var(--color-card-bg));
        color: var(--color-text-strong);
    }

    .community-members__list {
        display: grid;
        gap: var(--space-10);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .community-members__item {
        min-width: 0;
    }

    .community-members__link {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: var(--space-14);
        min-width: 0;
        min-height: 5.75rem;
        padding: var(--space-14);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-corner);
        background: var(--color-card-bg);
        color: var(--color-text);
        text-decoration: none;
        box-shadow: 0 var(--space-8) var(--space-24) var(--color-shadow-soft);
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }

    .community-members__link:hover,
    .community-members__link:focus-visible {
        border-color: color-mix(in oklch, var(--color-brand-primary) 58%, var(--color-card-border));
        background: var(--color-card-bg-hover);
        color: var(--color-text-strong);
        outline: none;
        box-shadow: 0 var(--space-12) var(--space-32) var(--color-shadow-medium);
        transform: translateY(calc(var(--space-2) * -1));
    }

    .community-members__identity {
        display: grid;
        grid-template-columns: 4rem minmax(0, 1fr);
        align-items: center;
        gap: var(--space-12);
        min-width: 0;
    }

    .community-members__avatar {
        display: grid;
        place-items: center;
        width: 4rem;
        height: 4rem;
        overflow: hidden;
        border: var(--space-2) solid var(--color-brand-primary);
        border-radius: var(--radius-round);
        background: var(--color-brand-primary);
    }

    .community-members__avatar-image {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
    }

    .community-members__user {
        display: grid;
        gap: var(--space-4);
        min-width: 0;
    }

    .community-members__name {
        overflow-wrap: anywhere;
        color: var(--color-text-strong);
        font-size: var(--text-lg);
        line-height: var(--line-height-title);
    }

    .community-members__meta {
        overflow-wrap: anywhere;
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-normal);
    }

    .community-members__stats {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-8);
        padding-left: calc(4rem + var(--space-12));
    }

    .community-members__stat {
        display: inline-flex;
        align-items: center;
        gap: var(--space-6);
        min-height: 1.875rem;
        padding: 0 var(--space-10);
        border: 1px solid var(--color-card-border);
        border-radius: var(--radius-round);
        background: var(--color-bg-surface-soft);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
        font-weight: var(--font-weight-bold);
        line-height: var(--leading-none);
    }

    .community-members__stat-icon {
        position: static;
        display: block;
        width: var(--space-14);
        height: var(--space-14);
        fill: currentColor;
    }

    @media (max-width: 760px) {
        .community-members__link {
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-12);
            padding: var(--space-12);
        }

        .community-members__identity {
            grid-template-columns: 3.5rem minmax(0, 1fr);
        }

        .community-members__avatar {
            width: 3.5rem;
            height: 3.5rem;
        }

        .community-members__stats {
            grid-column: 1 / -1;
            padding-left: 0;
        }
    }
}