/* Указатели каталога: район /rayon/…, садоводческий массив /massiv/…, станция /Станция-….
   Первый экран — крошки, заголовок, подводка и крупные цифры; дальше списки СНТ строками под волосяными линиями, как «Соседние СНТ» в карточке.
   Токены, шапка и подвал — в hm-chrome.css, основа (.crumbs, .rows, .opens, .head-block, .lead, .go) — в hm.css. Цвета только через токены. */

/* Первый экран */
.hub-hero .crumbs { padding-top: var(--space-xs); }
/* страница «не найдено» — без крошек: отступ сверху вместо строки крошек */
.hub-hero--bare { padding-top: var(--space-xl); }
.hub-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-md); }
.hub-hero h1 { max-width: none; font-size: var(--text-display-m); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.hub-hero__text { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.hub-hero .lead { color: var(--color-ink-2); overflow-wrap: break-word; }
/* ссылка внутри подводки: зона нажатия выше строки, не сдвигая текст */
.hub-hero .lead a { padding-block: 0.6em; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.hub-hero .lead a:hover { color: var(--color-accent-text); }
/* вторая строка подводки — «Ближайшая станция» / «Садоводческий массив»: короткая, гротеском */
.hub-hero .lead.hub-also { color: var(--color-ink-2); font: var(--label-weight) var(--text-lg)/1.35 var(--font-display); }

/* Крупные цифры: всего садоводств и действующих */
.hub-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--gap-columns); align-content: start; margin: 0; padding-top: var(--space-md); border-top: var(--rule-heavy) solid var(--color-ink); }
.hub-fig { display: grid; align-content: start; gap: var(--space-2xs); min-width: 0; margin: 0; }
.hub-fig__n { color: var(--color-accent-text); font: var(--display-weight) var(--text-display-m)/0.95 var(--font-display); letter-spacing: var(--tracking-tight); }
.hub-fig__t { color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); overflow-wrap: break-word; }

@media (min-width: 60rem) {
  .hub-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .hub-hero h1 { grid-column: 1 / -1; }
  .hub-hero__text { grid-column: 1 / span 8; }
  .hub-figs { grid-column: 9 / span 4; }
}

/* Разделы */
.hub-sec { margin-top: var(--section-gap-s); }
.hub-sec .head-block { margin-bottom: var(--space-lg); }
/* подпись над списком без своего заголовка («Крупнейшие садоводческие массивы района:») */
.hub-over { margin-bottom: var(--space-md); padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); color: var(--color-ink); font: 700 var(--text-title)/1.25 var(--font-display); }

/* Список садоводств: строки под линейками; на широком экране — две-три колонки, порядок — по строкам, как в старом списке */
.hub-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-columns); }
.hub-list > li { min-width: 0; }
.hub-list a { display: block; padding-block: var(--space-sm); color: var(--color-ink); font: var(--label-weight) var(--text-lg)/1.3 var(--font-display); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.16em; overflow-wrap: anywhere; }
.hub-list a:hover { text-decoration-color: var(--color-accent); }
/* председатель — второй строкой под названием */
.hub-list .pred { display: block; margin-top: calc(-1 * var(--space-xs)); padding-bottom: var(--space-sm); color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.35 var(--font-display); overflow-wrap: anywhere; }
/* «ликвидировано» — метка после названия; пробел перед словом — внутри метки, чтобы подчёркивание ссылки не тянулось до неё */
.hub-list .st { display: inline-block; margin-left: var(--space-xs); padding: 0 var(--space-xs); border-left: var(--rule-heavy) solid var(--color-error); background: var(--color-paper-2); color: var(--color-ink); font: var(--label-weight) var(--text-xs)/1.6 var(--font-display); white-space: nowrap; }
@media (min-width: 40rem) { .hub-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75rem) { .hub-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Крупнейшие массивы района: название — ссылка во всю строку, число садоводств справа */
.hub-mx { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-columns); }
.hub-mx > li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-width: 0; }
.hub-mx a { flex: 1 1 auto; min-width: 0; padding-block: var(--space-md); color: var(--color-ink); font: var(--label-weight) var(--text-lg)/1.3 var(--font-display); text-decoration-color: var(--color-rule-2); text-underline-offset: 0.16em; overflow-wrap: anywhere; }
.hub-mx a:hover { text-decoration-color: var(--color-accent); }
.hub-mx .num { flex: none; color: var(--color-ink-2); font: var(--label-weight) var(--text-md)/1.3 var(--font-display); }
@media (min-width: 40rem) { .hub-mx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .hub-mx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Другие районы — как «По районам» на главной: строка во всю ширину колонки, под ней полоса доли от крупнейшего района */
.hub-dist { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.hub-dist > li { min-width: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.hub-dist a { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: var(--space-md); min-height: 64px; padding-block: var(--space-md); color: var(--color-ink); text-decoration: none; }
.hub-dist a::after { content: ""; position: absolute; left: 0; bottom: -1px; inline-size: calc(var(--share, 0) * 100%); block-size: 4px; background: var(--color-accent); }
.hub-dist__name { overflow-wrap: break-word; font: var(--label-weight) var(--text-lg)/1.25 var(--font-display); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.16em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.hub-dist a:hover .hub-dist__name { text-decoration-color: var(--color-accent); }
.hub-dist__n { color: var(--color-ink-2); font: var(--label-weight) var(--text-md)/1.25 var(--font-display); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
@media (min-width: 40rem) { .hub-dist { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-2, 9), auto); grid-auto-flow: column; } }
@media (min-width: 75rem) { .hub-dist { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--rows-3, 6), auto); } }

/* Паспорт массива или станции — как описание в карточке СНТ: колонка текста до 44rem, разделы под тяжёлой линейкой */
.desc { max-width: 44rem; }
.desc h2 { max-width: none; margin-bottom: var(--space-lg); padding-top: var(--space-lg); border-top: var(--rule-heavy) solid var(--color-ink); }
.desc h2.desc__over { margin-bottom: var(--space-xs); color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); letter-spacing: normal; }
.desc h2.desc__over + h2 { padding-top: 0; border-top: 0; }
.desc h3 { margin: var(--space-xl) 0 var(--space-sm); }
.desc h4 { margin: var(--space-lg) 0 var(--space-xs); color: var(--color-ink); font: 700 var(--text-lg)/1.3 var(--font-display); }
.desc p { margin-bottom: var(--space-md); color: var(--color-ink-2); overflow-wrap: break-word; }
.desc ul, .desc ol { margin: 0 0 var(--space-md); padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.desc li { padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); overflow-wrap: break-word; }
.desc ol { counter-reset: desc-step; }
.desc ol > li { counter-increment: desc-step; }
.desc ol > li::before { content: counter(desc-step) ". "; color: var(--color-ink); font-weight: 700; }
.desc a { padding-block: 0.7em; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.desc em { color: var(--color-ink-2); }

/* Ссылки внизу страницы: «← Все СНТ Ленинградской области», «Садовый журнал» */
.hub-end { display: flex; flex-wrap: wrap; column-gap: var(--space-xl); row-gap: var(--space-2xs); margin-top: var(--section-gap-s); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
.hub-end .go { overflow-wrap: anywhere; }