/* Карточка садоводства: первый экран с картой, разделы одной страницей, поиск по карточке, контакты, соседние СНТ, лента, интересные места.
   Токены, шапка и подвал — в hm-chrome.css, основа — в hm.css. Цвета только через токены, поэтому тёмная тема работает без отдельных правил. */

/* Первый экран: крошки, название, район, звонок, главные факты; справа — карта или список «Расположение» */
.card-hero .crumbs { padding-top: var(--space-xs); }

.card-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-md); }
.card-hero__head { display: grid; gap: var(--space-lg); align-content: start; min-width: 0; }
.card-hero h1 { max-width: none; font-size: var(--text-display-m); letter-spacing: var(--tracking-tight); line-height: 1.05; }
.status { justify-self: start; padding: var(--space-xs) var(--space-md); border-left: var(--rule-heavy) solid var(--color-error); background: var(--color-paper-2); color: var(--color-ink); font: 700 var(--text-md)/1.3 var(--font-display); }
.meta-row { color: var(--color-ink-2); font: var(--label-weight) var(--text-lg)/1.35 var(--font-display); }
.meta-row a { padding-block: 0.6em; color: var(--color-ink); text-decoration-color: var(--color-accent); }
.card-hero__act { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* Звонок в правление — самая крупная кнопка страницы */
.btn--call { max-width: 100%; min-height: var(--control-h-l); padding-inline: var(--space-lg); font-size: var(--text-lg); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: normal; text-align: center; }
.card-hero__act .btn--quiet { min-height: var(--control-h-l); font-size: var(--text-md); }
/* на телефоне обе кнопки во всю ширину, одна под другой */
@media (max-width: 39.99rem) { .card-hero__act .btn { flex: 1 1 100%; } }

/* Главные факты: подпись над значением; с планшета — по два в ряд */
.hero-facts, .facts-more { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.hero-facts { border-top: var(--rule-heavy) solid var(--color-ink); }
.hero-facts > div, .facts-more > div { min-width: 0; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.hero-facts dt, .facts-more dt { color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.hero-facts dd, .facts-more dd { margin: 0; padding-top: var(--space-2xs); color: var(--color-ink); font: var(--label-weight) var(--text-lg)/1.3 var(--font-display); overflow-wrap: anywhere; }
.hero-facts dd a, .facts-more dd a { padding-block: 0.6em; color: inherit; text-decoration-color: var(--color-accent); }
/* дополнительные факты продолжают список без зазора */
.card-hero__head > .hero-facts + .facts-more { margin-top: calc(-1 * var(--space-lg)); }
.sch .facts-more { margin-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule-2); }
@media (min-width: 40rem) {
  .hero-facts, .facts-more { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
}
@media (min-width: 60rem) {
  .card-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; margin-top: var(--space-lg); }
  .card-hero__head { grid-column: 1 / span 7; }
  .card-hero__head:only-child { grid-column: 1 / -1; max-width: 56rem; }
  .sch { grid-column: 8 / span 5; align-self: center; justify-self: center; width: min(100%, 27rem); }
  .loc { grid-column: 8 / span 5; }
  /* в узкой правой колонке — по одному факту в строке */
  .loc .hero-facts, .loc .facts-more, .sch .facts-more { grid-template-columns: minmax(0, 1fr); }
}

/* Расположение: карта с границей участка; высота задана заранее, чтобы страница не прыгала при загрузке */
.sch, .loc { min-width: 0; }
.sch__h { max-width: none; margin-bottom: var(--space-md); font-size: var(--text-title); line-height: 1.2; }
.sch__box { background: var(--color-paper-2); border-top: var(--rule-heavy) solid var(--color-ink); }
.sch #map { width: 100%; min-height: 20rem; aspect-ratio: 1 / 1; }
@media (min-width: 40rem) and (max-width: 59.99rem) { .sch #map { aspect-ratio: 16 / 10; } }
@media (min-width: 60rem) { .sch #map { aspect-ratio: 4 / 5; } }
/* без скриптов карта не загрузится — пустую рамку не показываем */
html:not(.js) .sch__box { display: none; }

/* Разделы страницы и поиск по карточке — одна полоса под первым экраном */
.tools { margin-top: var(--section-gap-s); }
.tools__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 60rem) {
  .tools__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .onpage { grid-column: 1 / span 6; }
  .sntq { grid-column: 7 / span 6; }
}

/* Якоря разделов сеткой по два — всё видно и без скриптов */
.onpage { border-block: var(--rule-hair) solid var(--color-rule-2); }
.onpage ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.onpage a { display: flex; align-items: center; min-height: 52px; padding-block: var(--space-2xs); color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.2 var(--font-display); text-decoration-color: var(--color-accent); }
.onpage li:nth-child(even) a { padding-left: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule); }
.onpage li:nth-child(n+3) a { border-top: var(--rule-hair) solid var(--color-rule); }

/* Поиск по карточке: без скриптов он не работает, поэтому и не показывается */
.sntq { min-width: 0; }
.sntq .find__hint { margin: 0 0 var(--space-xs); color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.4 var(--font-display); }
.sntq-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html:not(.js) .sntq { display: none; }

/* Окно с ответом поиска */
.sntq-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-md); }
.sntq-backdrop { position: absolute; inset: 0; background: var(--color-paper); background: color-mix(in oklab, var(--color-paper) 85%, transparent); }
.sntq-dialog { position: relative; width: 100%; max-width: 36rem; max-height: 86vh; max-height: 86dvh; overflow: auto; padding: var(--space-xl) var(--space-lg) var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-top: var(--rule-heavy) solid var(--color-ink); background: var(--color-paper); color: var(--color-ink-2); }
.sntq-x { position: absolute; top: var(--space-xs); right: var(--space-xs); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); cursor: pointer; }
.sntq-x:hover { background: var(--color-paper-2); }
.sntq-x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sntq-h { max-width: none; margin: 0 56px var(--space-md) 0; font-size: var(--text-title); line-height: 1.25; overflow-wrap: anywhere; }
.sntq-res { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.sntq-res dt { padding-top: var(--space-sm); color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.sntq-res dd { margin: 0; padding: var(--space-2xs) 0 var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); color: var(--color-ink); font: var(--label-weight) var(--text-lg)/1.35 var(--font-display); overflow-wrap: anywhere; }
.sntq-res a { display: inline-flex; align-items: center; max-width: 100%; min-height: 48px; color: inherit; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.sntq-p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; }
.sntq-p.muted { color: var(--color-muted); }
.sntq-mail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-top: var(--space-lg); }
.sntq-mail input[type=email] { width: 100%; min-width: 0; min-height: var(--control-h); padding: 0 var(--space-md); border: 2px solid var(--color-ink); border-radius: 0; background: var(--color-paper); color: var(--color-ink); font: var(--label-weight) var(--text-md)/1.2 var(--font-display); -webkit-appearance: none; appearance: none; }
.sntq-mail input[type=email]::placeholder { color: var(--color-muted); opacity: 1; }
.sntq-mail button { min-height: var(--control-h); padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: 0; background: var(--color-ink); color: var(--color-paper); font: var(--label-weight) var(--text-sm)/1.2 var(--font-display); cursor: pointer; }
.sntq-mail button:hover { background: var(--color-ink-2); }
.sntq-mail button:disabled { opacity: 0.55; cursor: not-allowed; }
@media (min-width: 40rem) { .sntq-mail { grid-template-columns: minmax(0, 1fr) auto; gap: 0; } }
.sntq-note { margin-top: var(--space-md); color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.5 var(--font-display); }
.sntq-note:empty { display: none; }
.sntq-note.ok { color: var(--color-accent-text); }
.sntq-note.err { padding-left: var(--space-sm); border-left: var(--rule-heavy) solid var(--color-error); }
@media (max-width: 39.99rem) { .sntq-dialog { padding: var(--space-xl) var(--space-md) var(--space-md); } }

/* Разделы */
.sec { margin-top: var(--section-gap-s); }

/* Об СНТ и соседние СНТ: описание читается как статья, рядом на широком экране — соседи с расстоянием */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--section-gap-s); }
.about__text { min-width: 0; }
.about .lead { overflow-wrap: break-word; }
@media (min-width: 60rem) {
  .about__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .about__text { grid-column: 1 / span 7; }
  .about__text:only-child { grid-column: 1 / -1; }
  .near { grid-column: 8 / span 5; }
}
/* соседи едут рядом с описанием, только если экран достаточно высокий, чтобы список помещался целиком */
@media (min-width: 60rem) and (min-height: 46rem) { .near { position: sticky; top: var(--space-lg); } }
.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; }
/* ссылки внутри текста: поле нажатия добирается до 48px без сдвига строк */
.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); }

/* Источник данных: кнопка раскрывает строку; без скриптов строка видна сразу */
.prov { max-width: 44rem; margin-top: var(--space-xs); color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.45 var(--font-display); }
.prov__btn { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 48px; padding: 0; border: 0; background: none; color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; cursor: pointer; }
.prov__btn:hover { text-decoration-color: var(--color-accent); }
.prov__btn .icon { width: 20px; height: 20px; transition: transform var(--dur-short) var(--ease-out); }
.prov.open .prov__btn .icon { transform: rotate(180deg); }
.prov__txt { max-width: 60ch; padding-bottom: var(--space-xs); }
html.js .prov:not(.open) .prov__txt { display: none; }
html:not(.js) .prov__btn { display: none; }

/* Соседние СНТ: название и расстояние на одной линии */
.near { min-width: 0; }
.nb { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); }
.nb__name { 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; }
.nb__name:hover { text-decoration-color: var(--color-accent); }
.nb__d { flex: none; color: var(--color-ink-2); font: var(--label-weight) var(--text-md)/1.3 var(--font-display); white-space: nowrap; }

/* Контакты и реквизиты: подпись над значением на телефоне, рядом — на планшете и шире */
.contacts__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.reqs { margin: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.reqs > div { display: grid; gap: var(--space-2xs); min-width: 0; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.reqs dt { color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.reqs dd { min-width: 0; margin: 0; color: var(--color-ink); font: var(--label-weight) var(--text-md)/1.4 var(--font-display); overflow-wrap: anywhere; }
.reqs dd a { color: inherit; text-decoration-color: var(--color-accent); }
.reqs .big { display: inline-flex; align-items: center; max-width: 100%; min-height: 48px; font-size: var(--text-lg); text-decoration-thickness: 2px; }
.reqs--egrul dd.num { font-size: var(--text-lg); letter-spacing: 0.02em; }
.egrul { display: grid; gap: var(--space-md); align-content: start; min-width: 0; padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); }
.egrul .reqs { border-top: 0; }
.src-note { color: var(--color-ink-2); font: var(--label-weight) var(--text-sm)/1.45 var(--font-display); }
.src-note a { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
@media (min-width: 40rem) {
  .reqs > div { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--space-lg); align-items: baseline; }
  .egrul { padding: var(--space-xl); }
}
@media (min-width: 60rem) {
  .contacts__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .contacts__grid > .reqs { grid-column: 1 / span 5; }
  .contacts__grid > .egrul { grid-column: 6 / span 7; }
  .contacts__grid > .reqs > div { grid-template-columns: minmax(0, 1fr); }
  /* одна колонка вместо двух: собственные контакты или только ЕГРЮЛ */
  .contacts__grid > :only-child { grid-column: 1 / span 8; }
  .contacts__grid > .reqs:only-child > div { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* Лента постов сообщества */
.posts { max-width: 44rem; }
.post { display: grid; gap: var(--space-sm); justify-items: start; padding-block: var(--space-lg); }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); }
.post__pin { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-accent-text); }
.post__pin .icon { width: 20px; height: 20px; }
.post__text { max-width: 65ch; color: var(--color-ink-2); white-space: pre-line; overflow-wrap: anywhere; }
.post__img { max-width: 100%; max-height: 36rem; width: auto; height: auto; }
.post__more { display: inline-flex; align-items: center; min-height: 48px; color: var(--color-ink); font: var(--label-weight) var(--text-sm)/1.3 var(--font-display); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.posts__all { margin-top: var(--space-lg); }

/* Интересные места: группы со значком, расстояние справа */
.poi { display: grid; gap: var(--space-xl); margin-bottom: var(--space-lg); }
.poi__grp { min-width: 0; }
.poi__h { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.poi__h .poi-ic { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-accent-text); }
.poi__rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); padding-block: var(--space-sm); }
.poi__name { grid-column: 1; grid-row: 1; color: var(--color-ink); font: var(--label-weight) var(--text-md)/1.35 var(--font-display); overflow-wrap: anywhere; }
.poi__type { grid-column: 1; grid-row: 2; color: var(--color-muted); font: var(--label-weight) var(--text-sm)/1.35 var(--font-display); }
.poi__d { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--color-ink); font: 700 var(--text-md)/1.3 var(--font-display); white-space: nowrap; }
@media (min-width: 40rem) { .poi { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); } }

/* Полезное: рельс статей */
.useful .rail-head { margin-bottom: var(--space-lg); }
.useful .go { margin-top: var(--space-md); }
span.tile__pic { display: block; }

/* Дополнить страницу и дальше по каталогу: последняя полоса на тёплой бумаге */
.feedback { padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); }
.feedback .well { padding: 0; border: 0; background: none; }
.feedback .well p { max-width: 60ch; color: var(--color-ink); font-size: var(--text-lead); line-height: 1.45; }
.feedback .well a { padding-block: 0.6em; color: var(--color-ink); text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.foot-nav ul { display: flex; flex-wrap: wrap; column-gap: var(--space-xl); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
/* на телефоне — столбиком и на ступень мельче */
@media (max-width: 39.99rem) { .foot-nav ul { flex-direction: column; } .foot-nav .go { font-size: var(--text-md); } }