/* Коммерческие страницы нового вида (27.10.2026): цены, для СНТ, о нас, контакты, хаб услуг, районы, калькулятор.
   Подключает front matter extra_css: ["pv2-pages.css"] (page-v2.njk). Основа — home-v2.css + page-v2.css; здесь только
   блоки этих страниц. Сначала телефон, компьютер (≥ 900 px) — отдельными блоками @media, как в home-v2.css. */

/* первый экран без формы справа (калькулятор): одна колонка, ниже ростом */
@media (min-width: 900px) {
  .pv2 .hero.solo { grid-template-columns: minmax(0, 1fr); padding-bottom: 56px; }
  .pv2 .hero.solo .left { max-width: 820px; }
  .pv2 .hero .lead a { color: #fdba74; }   /* ссылка в лиде на тёмном первом экране — как в строке .under */
}

/* подпись под таблицей и строка-сноска раздела */
.pg-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.pg-note a { font-weight: 600; }
@media (min-width: 900px) { .pg-note { max-width: 1000px; margin: 16px auto 0; text-align: center; font-size: 15px; } }

/* шаги по порядку (заказ вскладчину, как работаем): номер в кружке, текст — карточкой */
ol.nsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: ns; }
ol.nsteps > li { counter-increment: ns; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 12px 52px; font-size: 15px; line-height: 1.5; min-height: 52px; }
ol.nsteps > li::before { content: counter(ns); position: absolute; left: 12px; top: 11px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.pv2 section > .prose:not(:first-child) { margin-top: 14px; }
@media (min-width: 900px) {
  ol.nsteps { max-width: 820px; margin: 0 auto; gap: 12px; }
  ol.nsteps > li { background: var(--card-bg); border-color: var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); padding: 18px 24px 18px 74px; font-size: 16px; }
  ol.nsteps > li::before { left: 22px; top: 15px; width: 34px; height: 34px; background: var(--navy-2); font-size: 15px; }
  .pv2 section > .prose:not(:first-child) { margin-top: 32px; }
}

/* частые вопросы с якорем #voprosy (ссылки с /dlya-ii и из справочника): на компьютере — карточки в две колонки, как #faq */
@media (min-width: 900px) {
  #voprosy { columns: 2; column-gap: 24px; }
  #voprosy > h2 { column-span: all; margin-bottom: 40px; }
  #voprosy > details { display: block; break-inside: avoid; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); padding: 24px 28px; margin: 0 0 24px; }
  #voprosy > details > summary { font-size: 18px; color: var(--navy-2); padding: 0 0 10px; }
  #voprosy > details > .a { font-size: 15.5px; line-height: 1.6; color: var(--muted); }
}

/* ---------- цены: ставки плашками (.gfacts из page-v2.css), таблицы (.gtable) ---------- */
.gfacts .l { line-height: 1.4; margin-top: 2px; }
.gtable td.num { white-space: nowrap; color: var(--ink); font-weight: 600; }

/* ---------- для СНТ: объявление для чата и кнопка «Скопировать» ---------- */
.adbox { white-space: pre-line; background: var(--surface); border: 1.5px dashed var(--line-strong); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0 0 10px; }
.adcopy { width: 100%; }
@media (min-width: 900px) {
  .adwrap { max-width: 820px; margin: 0 auto; }
  .adbox { background: var(--card-bg); border-color: var(--card-bd); border-radius: var(--card-r); padding: 24px 28px; font-size: 15.5px; }
  .adcopy { width: auto; }
}

/* ---------- о нас: фото машины коллажем и таблица «Своя машина» рядом ---------- */
.trow { display: grid; gap: 12px; }
.trow .photos { margin: 0; }
/* снимок заполняет свою ячейку коллажа: page-v2.css ставит картинкам в picture height: auto — без этого фото висит полосой сверху */
.trow .photos button { position: relative; }
.trow .photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .trow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; max-width: 1100px; margin: 32px auto 0; }
  .trow [data-kv-shared="truck"] { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); }
}

/* ---------- реквизиты: пары «что — значение» строками ---------- */
.req { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px; font-size: 15px; }
.req > div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.req > div:first-child { border-top: 0; }
.req dt { font-size: 13px; color: var(--muted); }
.req dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 900px) {
  .req { max-width: 820px; margin: 0 auto; background: var(--card-bg); border-color: var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); padding: 8px 28px; }
  .req > div { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-color: #edf2f7; }
  .req dt { font-size: 14.5px; }
}

/* ---------- контакты: карточка телефона и мессенджеров на первом экране, карта базы ---------- */
.pv2 .hero .cbox { order: 1; display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 4px 0 16px; }
.cbox .ctel { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--ink); text-decoration: none; }
.cbox .chrs { font-size: 14px; color: var(--muted); margin-top: -4px; }
.cbox .cmsg { display: flex; flex-wrap: wrap; gap: 8px; }
.cbox .cmsg .mg { padding: 10px 14px; border-radius: 10px; font-size: 14px; flex: 1 1 40%; }
.cbox .cmsg .mg i { display: none; }
.cbox .cmore { display: grid; gap: 4px; font-size: 15px; }
.cbox .cmore a { font-weight: 600; overflow-wrap: anywhere; }
.cbox .cnote { font-size: 13.5px; color: var(--muted); }
.kmap { display: none; }
@media (min-width: 900px) {
  .pv2 .hero .cbox { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; padding: 22px 24px; max-width: 640px; margin: 0 0 24px; }
  .cbox .ctel { color: #fff; font-size: 38px; }
  .cbox .chrs, .cbox .cnote { color: rgba(255,255,255,.75); }
  .cbox .cmore { color: rgba(255,255,255,.85); }
  .cbox .cmore a { color: #fdba74; }
  .cbox .cmsg .mg { flex: none; color: #fff; }
  .pv2 .basemap.kmap { display: block; max-width: 1000px; height: 360px; margin: 32px auto 0; border-radius: var(--card-r); border: 1px solid var(--card-bd); background: #eef3f8; overflow: hidden; }
  .pv2 .basemap.kmap[hidden] { display: none; }
}

/* ---------- хаб услуг: плитки услуг (имя и описание — блоками) ---------- */
.svgrid { display: grid; gap: 8px; }
.svgrid .tile { display: block; }
.svgrid .tn { font-weight: 700; font-size: 16px; margin-bottom: 3px; color: var(--ink); }
.svgrid .td { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
@media (min-width: 700px) { .svgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .svgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
  .svgrid .tn { font-size: 17px; margin-bottom: 6px; }
  .svgrid .td { font-size: 14.5px; line-height: 1.5; }
}

/* ---------- районы: округа и места карточками, карта городов и станций, «вашего посёлка нет» ---------- */
.okg { display: grid; gap: 8px; }
.okc { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
a.okc:hover { border-color: var(--accent); }
.okc.hot { background: #FFF7ED; border-color: #FED7AA; }
.okc .oh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.okc .oh > :first-child { font-weight: 700; min-width: 0; }
.okc .oh a { color: var(--accent); text-decoration: none; }
.okc .km { flex: none; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.okc .od { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
/* длинные списки (города, сёла): на телефоне свёрнуты под кнопкой, на компьютере home-v2.js раскрывает details — кнопки не видно */
.pv2 details.more { background: transparent; border: 0; margin: 0; }
.pv2 details.more > summary { justify-content: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--accent); margin: 0 0 10px; }
@media (min-width: 900px) { .pv2 details.more > summary { display: none; } }
#karta .kvs { margin-top: 4px; }
#karta #bigmap { margin: 0; }
@media (min-width: 600px) { .okg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .okg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; }
  .okc { background: var(--card-bg); border-color: var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-sh); padding: 18px 20px; }
  .okc.hot { background: #FFF7ED; border-color: #FED7AA; }
  .okc .od { font-size: 14px; margin-top: 4px; }
  #karta .kvs { max-width: 680px; margin: 0 auto 16px; }
  #karta .legend { justify-content: center; margin-bottom: 16px; }
  #karta #bigmap { max-width: 1200px; height: 520px; margin: 0 auto; border-radius: var(--card-r); border: 1px solid var(--card-bd); }
}
@media (min-width: 900px) and (max-width: 1199px) { .okg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pg-cta { background: #EEF4FA; border: 1px solid #D6E4F2; border-radius: 16px; padding: 18px; display: grid; gap: 14px; }
.pg-cta h2 { font-size: 20px; margin: 0 0 6px; }
.pg-cta p { margin: 0; color: var(--muted); font-size: 15px; }
.pg-cta .row { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-cta .row .btn { flex: 1 1 200px; }
.pg-cta .tel { font-size: 18px; }
@media (min-width: 900px) {
  .pg-cta { max-width: 1000px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 28px 32px; border-radius: var(--card-r); }
  .pv2 .pg-cta h2 { text-align: left; font-size: 26px; color: var(--navy-2); margin: 0 0 8px; }
  .pg-cta .row { flex-direction: column; flex-wrap: nowrap; }
  .pg-cta .row .btn { flex: none; }
}

/* ---------- калькулятор: адрес и карта, объём, рукав, цена, заявка ----------
   На телефоне цена — сразу под картой (нажатие на карту меняет её у пальца); на компьютере — колонка справа от карты. */
.calc-box { display: grid; gap: 12px; grid-template-areas: "addr" "map" "price" "vol" "hose" "order"; }
.calc-addr { grid-area: addr; }
.calc-addr .fld { margin: 0; }
.calc-addr .addr { align-items: center; }
.calc-addr .addr input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; line-height: 1.35; padding: 8px 0; background: transparent; color: var(--ink); }
#calc-map { grid-area: map; height: 300px; border-radius: 14px; border: 1px solid var(--line); background: #EEF3F8; overflow: hidden; }
#calc-map.ph { display: grid; place-items: center; height: auto; min-height: 120px; }
#price-result { grid-area: price; background: var(--soft); border-radius: 12px; padding: 12px 14px; font-size: 14px; color: var(--muted); }
#price-result small { display: block; font-size: 12.5px; }
#price-result b { display: block; font-size: 28px; line-height: 1.1; color: var(--ink); }
#price-result span { display: block; margin-top: 4px; }
.calc-vol { grid-area: vol; } .calc-hose { grid-area: hose; } .calc-order { grid-area: order; }
.calc-vol .vb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.calc-vol .volume-btn { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 6px; font: inherit; cursor: pointer; text-align: center; color: var(--ink); }
.calc-vol .volume-btn b { display: block; font-size: 15px; }
.calc-vol .volume-btn small { display: block; font-size: 12.5px; color: var(--muted); }
.calc-vol .volume-btn.on { border-color: var(--accent); background: var(--soft); color: var(--accent); }
.calc-hose .sel { margin-bottom: 4px; }
.calc-hose .hint { margin: 0; }
.calc-order { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.calc-order .row { display: flex; gap: 8px; }
.calc-order .row input { flex: 1; min-width: 0; }
.calc-order .row .btn { flex: none; }
.calc-order .ok { margin: 10px 0 0; background: #F0F8F3; border: 1px solid #CFE8D8; border-radius: 12px; padding: 10px 12px; font-size: 15px; }
.calc-order .ok[hidden] { display: none; }
.calc-order .consent { text-align: left; }
.calc-order .kv-forget { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; text-decoration: underline dotted; cursor: pointer; }
@media (min-width: 900px) {
  .calc-box { max-width: 1100px; margin: 0 auto; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "addr vol" "map hose" "map price" "map order"; grid-template-rows: auto auto auto 1fr; column-gap: 32px; row-gap: 16px; background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: 20px; box-shadow: var(--card-sh); padding: 28px; }
  #calc-map { height: auto; min-height: 440px; border-radius: var(--card-r); border-color: var(--card-bd); }
  #price-result b { font-size: 32px; color: var(--navy-2); }
  .calc-order { border-color: var(--card-bd); background: #f8fafc; padding: 18px; align-self: start; }
}