/* Community: /community/ list, /community/<slug>/ detail, and the Groups and
   News lists on masjid pages. Builds on theme.css (tokens, .mo-card,
   .monogram, .panel, .meta-list); only what those don't cover lives here.
   Mobile first: everything is laid out for a 390 px phone, then widened. */

/* ---------- list page sections ---------- */
.cm-section { margin-top: 2rem; }
.cm-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.cm-section-head h2 { font-size: 1.35rem; margin: 0; }
.cm-section-head p { color: var(--muted); margin: .2rem 0 0; font-size: .92rem; }

/* ---------- community card ---------- */
.cm-card .mo-card-body { display: flex; flex-direction: column; gap: .6rem; height: 100%; }
.cm-card-top { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.cm-card .card-title { font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.cm-tagline { color: var(--muted); font-size: .9rem; margin: 0; }
.cm-card .meta-list { margin-top: auto; }
.cm-upcoming {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--forest-600);
    background: var(--sage-100);
    border-radius: 999px;
    padding: .15rem .6rem;
    white-space: nowrap;
}
.cm-upcoming.is-none { color: var(--muted); background: var(--sand); font-weight: 500; }

/* Small text links ("Get it listed", "See the whole market") */
.cm-note {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: .92rem;
    margin-top: 2rem;
}
.cm-note i { color: var(--amber-600); font-size: 1.1rem; flex: 0 0 auto; }

/* ---------- rows (masjid page Groups / News, community page News) ---------- */
.cm-rows { display: grid; }
.cm-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    min-width: 0;
}
.cm-row:first-child { padding-top: 0; }
.cm-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cm-row:hover { text-decoration: none; color: var(--forest); }
.cm-row:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.cm-row .monogram { width: 44px; height: 44px; border-radius: 12px; font-size: 1rem; }
.cm-row strong { display: block; font-family: var(--font-display); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cm-row small { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; }
.cm-row .bi-chevron-right { margin-left: auto; color: var(--muted); flex: 0 0 auto; }
.cm-thumb {
    width: 64px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--sand);
}
.cm-thumb-icon { display: grid; place-items: center; color: var(--amber-600); font-size: 1.2rem; }

/* ---------- detail page ---------- */
.cm-hero-tags .tag { background: rgba(255, 255, 255, .1); color: #fff; }
.cm-hero-tags a.tag:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.cm-tagline-lead { overflow-wrap: anywhere; }
.cm-about p:last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .cm-section { margin-top: 3rem; }
    .cm-section-head h2 { font-size: 1.6rem; }
}