/* ── Community card initials banner ─────────────────────────────────────── */

.community-discovery-panel,
.community-discovery-card {
    border-radius: 1.25rem;
}

.community-discovery-card {
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.community-discovery-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.12);
}

.community-discovery-card .card-body {
    padding: 1.25rem;
}

.community-location-input-group .input-group-text,
.community-location-input-group .btn,
.community-location-input-group .form-control {
    min-height: 3rem;
}

.community-location-input-group .input-group-text,
.community-location-input-group .form-control {
    background-color: #fff;
}

.community-location-input-group .input-group-text {
    color: #6c757d;
}

.community-location-input-group .btn {
    min-width: 3rem;
}

.community-filter-status {
    min-height: 1.5rem;
}

/* Banner area at the top of each community card, replacing the generic gradient.
   Height matches .card-img-placeholder (180px) for visual consistency with event cards. */
.community-card-banner {
    height: 180px;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Circular initials avatar centered inside the banner */
.community-initials-avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.625rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    user-select: none;
    flex-shrink: 0;
}

/* Ten deterministic palette colors assigned by (char code of first letter) % 10.
   All colors satisfy WCAG AA contrast ratio against white text. */
.community-avatar-color-0 { background-color: #4361ee; }
.community-avatar-color-1 { background-color: #7209b7; }
.community-avatar-color-2 { background-color: #3a0ca3; }
.community-avatar-color-3 { background-color: #e0266b; }
.community-avatar-color-4 { background-color: #d4681a; }
.community-avatar-color-5 { background-color: #0d9e84; }
.community-avatar-color-6 { background-color: #0077b6; }
.community-avatar-color-7 { background-color: #2d6a4f; }
.community-avatar-color-8 { background-color: #c1121f; }
.community-avatar-color-9 { background-color: #5c5470; }