/* =============================================
   COMMUNITY DETAIL PAGE (single-community.php)
   Hero uses the shared .page-hero component (page-hero.css). Past-event
   cards reuse .event-card/.events-past__grid from events.css verbatim —
   that stylesheet is enqueued alongside this one as a dependency.
   ============================================= */

/* ---------- Highlights ---------- */
.community-highlights { padding-block: var(--space-16); }
.community-highlights__block {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    align-items: start;
}

.community-highlights__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.community-highlights__tag {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-bg);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.community-highlights__heading { margin-bottom: var(--space-4); }
.community-highlights__body { color: var(--color-text-secondary); margin-bottom: var(--space-8); line-height: 1.75; }

.community-highlights__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}
.community-highlight__title { font-size: var(--text-md); font-weight: 700; margin-bottom: var(--space-2); }
.community-highlight__body { font-size: var(--text-sm); color: var(--color-text-secondary); }

.community-highlights__closing { margin-bottom: var(--space-6); }
.community-highlights__closing-heading { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.community-highlights__closing-body { color: var(--color-text-secondary); }

.community-highlights__media { position: sticky; top: var(--space-8); }
.community-highlights__image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
}
.community-highlights__image--placeholder { background: var(--color-surface-mid); }

@media (max-width: 1024px) {
    .community-highlights__block { grid-template-columns: 1fr; gap: var(--space-8); }
    .community-highlights__media { position: static; order: -1; }
    .community-highlights__grid { grid-template-columns: 1fr; }
}

/* ---------- Our past events ---------- */
.community-events { padding-block: var(--space-16); background: var(--color-surface); }
.community-events__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.community-events__see-all {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-primary);
    font-weight: 600;
    font-size: var(--text-sm);
    white-space: nowrap;
}
.community-events__see-all:hover { color: var(--color-primary-mid); }