.pi-communities,
.pi-community-detail {
    display: grid;
    gap: var(--pi-space-6);
}

.pi-communities__header {
    align-items: center;
    background: transparent;
    display: flex;
    gap: var(--pi-space-4);
    justify-content: space-between;
}

.pi-communities__header p,
.pi-communities-section__head p,
.pi-community-section__head p,
.pi-community-hero__content p,
.pi-community-context p,
.pi-community-card p,
.pi-community-discussion-card p {
    color: var(--pi-text-secondary);
    margin: 0;
}

.pi-communities__header h1 {
    color: var(--pi-text);
    font-size: var(--pi-font-2xl);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--pi-line-tight);
    margin: var(--pi-space-1) 0 0;
    max-width: 720px;
}

.pi-communities-search form {
    display: grid;
    gap: var(--pi-space-4);
}

.pi-communities-search__query {
    width: 100%;
}

.pi-communities-search__query input {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--pi-text);
    outline: 0;
    width: 100%;
}

.pi-communities-filter-panel {
    display: grid;
    gap: var(--pi-space-3);
}

.pi-communities-filter-panel summary {
    justify-self: end;
    list-style: none;
}

.pi-communities-filter-panel summary::-webkit-details-marker {
    display: none;
}

.pi-communities-search__filters {
    align-items: end;
    background: var(--pi-bg-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-lg);
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
    margin-top: var(--pi-space-3);
    padding: var(--pi-space-4);
}

.pi-communities-search__actions {
    display: flex;
    gap: var(--pi-space-2);
    justify-content: flex-end;
}

.pi-communities-section,
.pi-community-section {
    display: grid;
    gap: var(--pi-space-4);
}

.pi-communities-section__head,
.pi-community-section__head {
    align-items: flex-end;
    display: flex;
    gap: var(--pi-space-4);
    justify-content: space-between;
}

.pi-community-section__head--stack {
    align-items: stretch;
    flex-direction: column;
}

.pi-communities-section__head h2,
.pi-community-section__head h2 {
    color: var(--pi-text);
    font-size: var(--pi-font-xl);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--pi-line-tight);
    margin: 0;
}

.pi-community-card-grid {
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-community-card-grid--compact {
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    overflow-x: auto;
    padding-bottom: var(--pi-space-1);
}

.pi-community-card {
    display: grid;
    gap: var(--pi-space-4);
}

.pi-community-card__identity {
    align-items: flex-start;
    display: flex;
    gap: var(--pi-space-3);
    min-width: 0;
}

.pi-community-card h3 {
    font-size: var(--pi-font-lg);
    font-weight: 800;
    line-height: var(--pi-line-tight);
    margin: 0;
}

.pi-community-card h3 a {
    color: var(--pi-text);
    text-decoration: none;
}

.pi-community-card h3 a:hover {
    color: var(--pi-primary);
}

.pi-community-card__meta {
    align-items: center;
    color: var(--pi-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--pi-font-xs);
    gap: var(--pi-space-2);
    margin-top: var(--pi-space-2);
}

.pi-community-card__stats,
.pi-community-about-stats,
.pi-community-context__stats {
    display: grid;
    gap: var(--pi-space-2);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
}

.pi-community-card__stats div,
.pi-community-about-stats div,
.pi-community-context__stats div {
    background: var(--pi-bg-secondary);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-md);
    padding: var(--pi-space-3);
}

.pi-community-card__stats dt,
.pi-community-about-stats dt,
.pi-community-context__stats dt {
    color: var(--pi-text-muted);
    font-size: var(--pi-font-xs);
    margin: 0;
}

.pi-community-card__stats dd,
.pi-community-about-stats dd,
.pi-community-context__stats dd {
    color: var(--pi-text);
    font-size: var(--pi-font-sm);
    font-weight: 800;
    margin: var(--pi-space-1) 0 0;
}

.pi-community-card__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
}

.pi-community-hero {
    background: var(--pi-surface);
    border: 1px solid var(--pi-border-soft);
    border-radius: var(--pi-radius-xl);
    box-shadow: var(--pi-shadow-xs);
    overflow: hidden;
}

.pi-community-hero__banner {
    background:
        radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--pi-primary) 26%, transparent), transparent 30%),
        linear-gradient(135deg, var(--pi-hero-start, #071710), var(--pi-hero-end, #0d2c20));
    height: 148px;
    overflow: hidden;
    position: relative;
}

[data-theme="dark"] .pi-community-hero__banner {
    --pi-hero-start: #04110d;
    --pi-hero-end: #103927;
}

.pi-community-hero__banner span {
    border: 1px solid color-mix(in srgb, var(--pi-primary) 32%, transparent);
    border-radius: 999px;
    position: absolute;
}

.pi-community-hero__banner span:nth-child(1) {
    height: 190px;
    right: 10%;
    top: -70px;
    width: 190px;
}

.pi-community-hero__banner span:nth-child(2) {
    height: 110px;
    right: 28%;
    top: 54px;
    width: 110px;
}

.pi-community-hero__banner span:nth-child(3) {
    border-radius: var(--pi-radius-xl);
    bottom: 24px;
    height: 1px;
    left: 7%;
    width: 42%;
}

.pi-community-hero__body {
    align-items: flex-start;
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0 var(--pi-space-6) var(--pi-space-6);
}

.pi-community-hero__avatar {
    border: 4px solid var(--pi-surface);
    box-shadow: var(--pi-shadow-sm);
    margin-top: -36px;
}

.pi-community-hero__content {
    display: grid;
    gap: var(--pi-space-2);
    padding-top: var(--pi-space-5);
}

.pi-community-hero__meta {
    align-items: center;
    color: var(--pi-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--pi-font-sm);
    gap: var(--pi-space-2);
}

.pi-community-hero h1 {
    color: var(--pi-text);
    font-size: var(--pi-font-2xl);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--pi-line-tight);
    margin: 0;
}

.pi-community-status {
    color: var(--pi-primary);
    font-size: var(--pi-font-sm);
    font-weight: 800;
}

.pi-community-hero__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
    justify-content: flex-end;
}

.pi-community-tabs {
    overflow-x: auto;
}

.pi-community-discussion-grid {
    display: grid;
    gap: var(--pi-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-community-discussion-card {
    display: grid;
    gap: var(--pi-space-3);
}

.pi-community-discussion-card.is-pinned {
    border-color: color-mix(in srgb, var(--pi-warning) 34%, var(--pi-border));
}

.pi-community-discussion-card__head {
    align-items: center;
    color: var(--pi-text-muted);
    display: flex;
    font-size: var(--pi-font-xs);
    justify-content: space-between;
}

.pi-community-discussion-card h3 {
    font-size: var(--pi-font-md);
    font-weight: 800;
    line-height: var(--pi-line-tight);
    margin: 0;
}

.pi-community-discussion-card h3 button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--pi-text);
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-align: left;
}

.pi-community-discussion-card h3 button:hover {
    color: var(--pi-primary);
}

.pi-community-discussion-card footer {
    color: var(--pi-text-muted);
    font-size: var(--pi-font-xs);
}

.pi-community-discussion-card footer a {
    color: var(--pi-text-secondary);
    text-decoration: none;
}

.pi-community-filter-row {
    overflow-x: auto;
}

.pi-community-new-publication {
    display: grid;
    gap: var(--pi-space-4);
}

.pi-community-new-publication summary {
    align-items: center;
    color: var(--pi-text);
    cursor: pointer;
    display: flex;
    font-weight: 800;
    justify-content: space-between;
    list-style: none;
}

.pi-community-new-publication summary::-webkit-details-marker {
    display: none;
}

.pi-community-new-publication form {
    display: grid;
    gap: var(--pi-space-4);
    margin-top: var(--pi-space-4);
}

.pi-checkbox {
    align-items: center;
    color: var(--pi-text-secondary);
    display: flex;
    gap: var(--pi-space-2);
}

.pi-community-new-publication__actions,
.pi-community-post-tools {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--pi-space-2);
    justify-content: flex-end;
}

.pi-community-post-tools {
    margin-top: calc(var(--pi-space-4) * -0.5);
}

.pi-community-feed,
.pi-community-context,
.pi-community-active-members {
    display: grid;
    gap: var(--pi-space-4);
}

.pi-community-event-list {
    display: grid;
    gap: var(--pi-space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pi-community-event-list a {
    color: var(--pi-text);
    display: grid;
    gap: var(--pi-space-1);
    text-decoration: none;
}

.pi-community-event-list span {
    color: var(--pi-primary);
    font-size: var(--pi-font-sm);
    font-weight: 800;
}

.pi-community-event-list small {
    color: var(--pi-text-muted);
}

.pi-community-members-list {
    display: grid;
    gap: var(--pi-space-1);
}

.pi-community-member-row {
    align-items: center;
    border-bottom: 1px solid var(--pi-border-soft);
    display: flex;
    gap: var(--pi-space-3);
    justify-content: space-between;
    padding: var(--pi-space-3) 0;
}

.pi-community-member-row:last-child {
    border-bottom: 0;
}

.pi-community-member-row__person {
    align-items: center;
    color: var(--pi-text);
    display: flex;
    gap: var(--pi-space-3);
    min-width: 0;
    text-decoration: none;
}

.pi-community-member-row__person strong,
.pi-community-member-row__person small {
    display: block;
}

.pi-community-member-row__person small,
.pi-community-member-row__status small {
    color: var(--pi-text-muted);
    font-size: var(--pi-font-xs);
}

.pi-community-member-row__status {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--pi-space-1);
}

.pi-community-about-grid {
    display: grid;
    gap: var(--pi-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pi-community-about-grid h3,
.pi-community-context h2 {
    color: var(--pi-text);
    font-size: var(--pi-font-lg);
    font-weight: 800;
    margin: 0 0 var(--pi-space-3);
}

.pi-community-rules {
    color: var(--pi-text-secondary);
    display: grid;
    gap: var(--pi-space-2);
    margin: 0;
    padding-left: var(--pi-space-5);
}

.pi-community-rules--compact {
    font-size: var(--pi-font-sm);
}

.pi-community-report {
    border-top: 1px solid var(--pi-border-soft);
    display: grid;
    gap: var(--pi-space-1);
    padding: var(--pi-space-3) 0 0;
}

.pi-community-report small,
.pi-muted {
    color: var(--pi-text-muted);
}

.pi-communities-empty {
    min-height: 180px;
}

@media (max-width: 1180px) {
    .pi-community-card-grid,
    .pi-community-discussion-grid,
    .pi-community-event-list,
    .pi-community-about-grid {
        grid-template-columns: 1fr;
    }

    .pi-community-card-grid--compact {
        grid-auto-columns: minmax(260px, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
    }
}

@media (max-width: 760px) {
    .pi-communities__header,
    .pi-communities-section__head,
    .pi-community-section__head {
        align-items: stretch;
        flex-direction: column;
    }

    .pi-communities-search__filters {
        grid-template-columns: 1fr;
    }

    .pi-communities-filter-panel summary {
        justify-self: stretch;
    }

    .pi-communities-search__actions,
    .pi-community-new-publication__actions,
    .pi-community-post-tools {
        justify-content: stretch;
    }

    .pi-communities-search__actions .pi-button,
    .pi-community-new-publication__actions .pi-button,
    .pi-community-post-tools .pi-button,
    .pi-community-post-tools form {
        width: 100%;
    }

    .pi-community-hero__banner {
        height: 112px;
    }

    .pi-community-hero__body {
        align-items: stretch;
        grid-template-columns: 1fr;
        padding: 0 var(--pi-space-4) var(--pi-space-4);
    }

    .pi-community-hero__avatar {
        margin-top: -32px;
    }

    .pi-community-hero__actions {
        justify-content: stretch;
    }

    .pi-community-hero__actions .pi-button,
    .pi-community-hero__actions form {
        width: 100%;
    }

    .pi-community-card__stats,
    .pi-community-about-stats,
    .pi-community-context__stats {
        grid-template-columns: 1fr;
    }

    .pi-community-member-row {
        align-items: stretch;
        flex-direction: column;
    }

    .pi-community-member-row__status {
        align-items: flex-start;
    }
}