/* ============================================================
   Dubai Property Lab — Community Detail Page
   Page: /markets/[community-slug]
   ============================================================ */

/* --- Community Header (M3 header variant) --- */

.community-header {
    padding: var(--space-5) 0 var(--space-6);
    border-bottom: 1px solid var(--border);
}

.community-header__breadcrumbs {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.community-header__breadcrumbs a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-default);
}

.community-header__breadcrumbs a:hover {
    color: var(--signal);
}

.community-header__breadcrumbs .separator {
    color: var(--text-muted);
}

.community-header__breadcrumbs .current {
    color: var(--text-primary);
}

.community-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.community-header__title-row h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.community-header__area {
    font-size: 15px;
    color: var(--text-secondary);
}

/* --- KPI Row (M1 — community level) --- */

.community-kpis {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--border);
}

.community-kpis__period {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

/* --- Charts Section (M2 — price + volume) --- */

.community-charts {
    padding: var(--space-6) 0;
}

.community-charts__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.community-charts__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.chart-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.chart-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: var(--space-4);
}

.chart-card__area {
    width: 100%;
    height: 260px;
    position: relative;
}

.chart-card__area svg {
    width: 100%;
    height: 100%;
}

.chart-card__interpretation {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

@media (max-width: 1199px) {
    .community-charts__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Transaction Table Section (M5) --- */

.community-transactions {
    padding: var(--space-6) 0;
}

.community-transactions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

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

.community-transactions__table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.community-transactions__more {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    border-top: 1px solid var(--border);
}

/* --- Projects in Community --- */

.community-projects {
    padding: var(--space-6) 0;
}

.community-projects__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.community-projects__count {
    font-size: 13px;
    color: var(--text-muted);
}

.project-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: background var(--transition-default),
                border-color var(--transition-default);
    cursor: pointer;
}

.project-card:hover {
    background: var(--elevated);
    border-color: rgba(0, 229, 199, 0.15);
}

.project-card__name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--space-1);
    transition: color var(--transition-default);
}

.project-card:hover .project-card__name {
    color: var(--signal);
}

.project-card__developer {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.project-card__tier {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.project-card__tier--p1 { color: var(--signal); }
.project-card__tier--p2a { color: var(--warm); }
.project-card__tier--p2b { color: var(--viz-4); }
.project-card__tier--p3 { color: var(--text-muted); }

.project-card__kpis {
    display: flex;
    gap: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.project-card__kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.project-card__kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.project-card__kpi-value {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-primary);
}

/* --- Related Insights (M6 compact variant) --- */

.community-insights {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
}

.community-insights__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.insight-compact {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    transition: background var(--transition-default);
    cursor: pointer;
}

.insight-compact:hover {
    background: var(--elevated);
}

.insight-compact:hover .insight-compact__title {
    color: var(--signal);
}

.insight-compact__title {
    font-size: 15px;
    font-weight: 600;
    transition: color var(--transition-default);
}

.insight-compact__meta {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

.insight-compact + .insight-compact {
    margin-top: var(--space-3);
}

/* --- Email Signup (M10) — bottom of community page --- */

.community-signup {
    padding: var(--space-6) 0;
}

/* --- Responsive --- */

@media (max-width: 767px) {
    .community-header__title-row h1 {
        font-size: 24px;
    }

    .community-header__breadcrumbs {
        display: none; /* back button handles hierarchy on mobile */
    }

    .community-charts__grid {
        grid-template-columns: 1fr;
    }

    .project-card__kpis {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

    .insight-compact {
        flex-direction: column;
        align-items: flex-start;
    }
}