/* Area pages (properties/area_views.py, roadmap stage 5.3). */
.ar-title { font-size: clamp(1.5rem, 4.5vw, 2.1rem); font-weight: 800; color: #121824; margin-bottom: 6px; }
.ar-lead { color: #5b6472; font-size: 1rem; margin-bottom: 22px; }
.ar-h2 { font-size: 1.2rem; font-weight: 800; color: #121824; margin: 32px 0 14px; }

.ar-stat {
    height: 100%;
    padding: 16px 18px;
    border: 1px solid #e6ebe8;
    border-radius: 14px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ar-stat-accent { border-color: #cdebdc; background: #f2faf6; }
.ar-stat-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #8a93a0; }
.ar-stat-value { font-size: 1.5rem; font-weight: 800; color: #121824; line-height: 1.2; }
.ar-stat-note { font-size: 0.82rem; color: #5b6472; }

.ar-source {
    font-size: 0.82rem;
    color: #5b6472;
    background: #f8faf9;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 10px 14px;
}

.ar-card, .ar-pro, .ar-state {
    display: flex;
    height: 100%;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    color: #121824;
    overflow: hidden;
}

.ar-card { flex-direction: column; }
.ar-card:hover, .ar-pro:hover, .ar-state:hover { border-color: #008751; }
.ar-card img { width: 100%; height: 150px; object-fit: cover; }
.ar-card-blank {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: #f1f3f5;
    color: #b6bec8;
    font-size: 1.8rem;
}

.ar-card-body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
.ar-card-body strong { font-size: 0.95rem; line-height: 1.3; }
.ar-card-price { font-weight: 800; color: #008751; }
.ar-card-meta { font-size: 0.82rem; color: #5b6472; }

.ar-pro, .ar-state { align-items: center; gap: 12px; padding: 12px 14px; }
.ar-state { flex-direction: column; align-items: flex-start; gap: 2px; }
.ar-pro img, .ar-pro-initial { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 30%; flex-shrink: 0; }
.ar-pro-initial { display: inline-flex; align-items: center; justify-content: center; background: #008751; color: #fff; font-weight: 800; }
.ar-pro span { display: flex; flex-direction: column; min-width: 0; }

.ar-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ar-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid #dfe4ea;
    background: #fff;
    color: #121824;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}

.ar-links a:hover { border-color: #008751; color: #008751; }
.ar-links a span { font-size: 0.76rem; color: #8a93a0; }

@media (max-width: 575.98px) {
    .ar-stat-value { font-size: 1.3rem; }
}