/* Хаб района (build_districts.py). Дополняет site.css + catalog.css.
   Классы details/summary (FAQ) и h2 наследуются из site.css/catalog.css. */

/* Читаемая колонка (как у статей): hero + интро + «О районе» по центру */
.dh .dh-hero,.dh .cat-hero,.dh .dh-about{max-width:820px;margin-left:auto;margin-right:auto}
.dh .cat-hero p{max-width:none}

.dh-hero{margin:8px 0 4px}
.dh-hero-img{display:block;width:100%;height:auto;border-radius:var(--r);object-fit:cover}

.dh-block{margin:44px 0}

.dh-about{margin:40px 0}
.dh-about p{color:var(--ink);font-size:17px;line-height:1.7;margin:0 0 18px}
.dh-about h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:28px 0 10px;line-height:1.25}
/* фото: естественная пропорция, по центру, ограничение по высоте (порт./гориз.) */
.dh-fig{margin:26px 0}
.dh-fig img{display:block;margin:0 auto;max-width:100%;max-height:560px;width:auto;height:auto;border-radius:var(--r)}

.dh-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:6px}
.dh-facts .cell{background:var(--card);padding:16px 18px}
.dh-facts .k{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.dh-facts .val{color:var(--ink);font-size:16px;line-height:1.35}

.dh-price{color:var(--muted);font-size:15px;margin:-2px 0 18px}

.dh-related{margin:44px 0}
.dh-related ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.dh-related a{color:var(--ink);text-decoration:underline}

@media(max-width:760px){
  .dh-facts{grid-template-columns:1fr 1fr}
}