/*
  Гео-страницы (11 поддоменов по 25 страниц). Собраны на тех же компонентах,
  что утверждённая главная: шапка, первый экран с карточкой заявки, разбор
  карточками, аккордеон вопросов, форма, подвал - всё из site.css и extra.css.

  Здесь только то, чего в шаблоне нет вообще:
    * модификаторы числа колонок для сетки разбора,
    * карточка-ссылка в блоке перелинковки,
    * интерактивный чек-лист документов,
    * строки полного прайса (14 позиций карточками не читаются),
    * список городов и карта раздела перед подвалом.

  Всё собрано на токенах шаблона (--accent, --surface-2, --border, --radius,
  --silk) и его брейкпоинтах (1024 / 768 / 480), чтобы не отличаться от главной.

  ВАЖНО про сетки. Число колонок задаётся классом, а не инлайновым стилем:
  инлайн не перебивается медиазапросом, и на 390 px вёрстка уже ломалась
  (грабля TP-50). По той же причине у каждого модификатора здесь есть свой
  медиазапрос: правило .explain-grid{1fr} из extra.css слабее по специфичности,
  чем .explain-grid.cols-2, и само по себе колонки не схлопнет.
*/

/* ── ЧИСЛО КОЛОНОК В СЕТКЕ РАЗБОРА ── */
.explain-grid.cols-1 { grid-template-columns: 1fr; }
.explain-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.explain-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* В карточке разбора бывает несколько абзацев подряд - в шаблоне такого нет. */
.explain-card p + p { margin-top: 12px; }
.explain-note p + p { margin-top: 12px; }

/* ── ПЕРВЫЙ ЭКРАН ──
   Ценовые плашки под кнопками: на главной такой ряд стоит под прайсом
   и выровнен по центру, здесь колонка левая - выравниваем по левому краю. */
.hero-content .geo-hero-pills {
  justify-content: flex-start;
  margin-top: 26px;
}
.hero-content .geo-hero-pills .hero-badge { margin-bottom: 0; }

/* Значение в карточке-заявке: названия сетевых организаций длиннее шаблонных
   подписей («АО «РЭС» (Региональные электрические сети)») и в одну строку
   не помещаются. */
.geo-fv-pill {
  white-space: normal;
  text-align: right;
  max-width: 62%;
  line-height: 1.35;
}

/* ── КАРТОЧКА-ССЫЛКА В БЛОКЕ ПЕРЕЛИНКОВКИ ──
   Та же карточка разбора, но со ссылкой, прижатой к низу: карточки в гриде
   тянутся до общей высоты, и без margin-top:auto ссылки встают на разных
   уровнях. Приём повторяет .region-card с главной. */
.geo-link-card { display: flex; flex-direction: column; }
.geo-link-card h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.geo-link-card p { font-size: 0.9rem; }
.geo-link-card .region-more { display: block; }
.geo-link-card .region-more:hover { text-decoration: underline; }

/* ── ЧЕК-ЛИСТ ДОКУМЕНТОВ ──
   Строки повторяют пункты списков на главной, но с рабочим переключателем. */
.geo-checklist { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.geo-check {
  display: flex; align-items: flex-start; gap: 14px; cursor: pointer;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  transition: border-color 0.3s var(--silk), transform 0.3s var(--silk);
}
.geo-check:hover { border-color: var(--accent-border); transform: translateY(-2px); }
.geo-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; }
.geo-check span { font-size: 0.9375rem; line-height: 1.6; color: var(--text-2); }
.geo-check input:checked + span { color: var(--text-3); text-decoration: line-through; }

/* ── ПОЛНЫЙ ПРАЙС ──
   Три опорные цены остаются карточками шаблона, остальные 11 позиций идут
   строками: карточками такой список не читается ни на одном экране. */
.geo-pricelist { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
.geo-price-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 24px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.geo-price-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-1); }
.geo-price-val { font-size: 0.9375rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.geo-price-desc { grid-column: 1 / -1; font-size: 0.875rem; line-height: 1.65; color: var(--text-2); }

/* ── ГОРОДА РЕГИОНА ──
   Колонки вынесены сюда из инлайнового columns:4: на 360 px он давал
   горизонтальную прокрутку, а перебить его медиазапросом было нечем. */
.geo-cities {
  columns: 4; column-gap: 28px;
  max-width: 1000px; margin: 0 auto; padding: 0;
  list-style: none;
  font-size: 0.9375rem; line-height: 2;
  color: var(--text-2);
}
.geo-cities li { break-inside: avoid; }

/* ── КАРТА РАЗДЕЛА ──
   Стоит перед подвалом отдельным <nav>: это обвязка, а не содержание.
   Подвал общий с основным сайтом и меняться под гео-сетку не должен. */
.geo-sitemap {
  padding: 56px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
/* Колонки считаются от ширины, а не задаются числом. Жёсткие repeat(4,1fr)
   и repeat(2,1fr) были привязаны к четырём группам; 29.07.2026 добавилась
   пятая («Юрлицам и бизнесу») - и самая высокая группа уезжала в отдельный
   ряд, оставляя 846x254 px пустоты на 1280. Auto-fit переживает изменение
   числа групп без правки CSS. */
.geo-sitemap-grid {
  display: grid;
  /* 180px, а не 210: при 1096 px контейнера и зазоре 32 px в строку помещается
     ровно пять колонок ((1096+32)/(180+32) = 5), то есть все пять групп встают
     в один ряд. С минимумом 210 получалось четыре, и пятая группа уезжала во
     второй ряд одна, оставляя три пустые колонки (замер 29.07.2026). */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
}
.geo-sitemap-label {
  margin-bottom: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.geo-sitemap-links { display: flex; flex-direction: column; gap: 9px; }
.geo-sitemap-links a {
  font-size: 0.875rem; line-height: 1.45; color: var(--text-2);
  transition: color 0.3s var(--silk);
}
.geo-sitemap-links a:hover { color: var(--accent); }

/* ── ДЛИННЫЕ СЛОВА НА УЗКОМ ЭКРАНЕ ──
   Заголовки шаблона рассчитаны на английский: «техприсоединения» кеглем
   clamp(2.6rem, 5vw, 4.2rem) занимает 357 px при 341 px вьюпорта. Колонка грида
   не может стать уже самого длинного слова (min-width:auto), поэтому первый
   экран распирало за край, а .hero{overflow:hidden} это молча обрезал.
   overflow-wrap:anywhere уменьшает и min-content-ширину, а не только переносит
   строку, - без него грид не сожмётся. hyphens:auto ставит перенос по словарю. */
@media (max-width: 768px) {
  .hero-inner > * { min-width: 0; }
  .hero-title, .section-title { overflow-wrap: anywhere; hyphens: auto; }
  .explain-card h3, .geo-price-name, .faq-question { overflow-wrap: break-word; hyphens: auto; }
}

/* ── АДАПТИВ ── */
/* geo.css подключается после extra.css и перебивает его, поэтому правка D8
   (две колонки на планшете вместо одной) продублирована здесь. Одна колонка
   остаётся с 768 px. */
@media (max-width: 1024px) and (min-width: 769px) {
  .explain-grid.cols-2, .explain-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
/* На планшете auto-fit даёт четыре колонки, и пятая группа остаётся в ряду одна
   с тремя пустыми клетками. Три колонки дают 3+2 - пустая клетка одна. */
@media (min-width: 769px) and (max-width: 1180px) {
  .geo-sitemap-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .explain-grid.cols-2, .explain-grid.cols-3 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .geo-cities { columns: 3; }
}
@media (max-width: 768px) {
  .geo-cities { columns: 2; column-gap: 20px; }
  .geo-price-row { padding: 16px 18px; }
  .geo-sitemap { padding: 44px 0; }
}
@media (max-width: 480px) {
  .geo-cities { columns: 1; }
  .geo-sitemap-grid { grid-template-columns: 1fr; gap: 24px; }
  .geo-price-row { grid-template-columns: 1fr; }
  .geo-price-val { justify-self: start; }
}

/* ── ПЕРВЫЙ ЭКРАН ГЕО-СТРАНИЦЫ ──
   На главной акцентная часть заголовка - «на участок», два коротких слова.
   На гео туда уезжает название региона: «в Нижегородской области», «в
   Санкт-Петербурге и Ленинградской области». На кегле главной такой заголовок
   разгоняется на пять строк, левая колонка становится заметно выше правой, и
   карточка заявки съезжает вниз, а на экранах ниже 900 px обрезается.
   Поэтому на гео кегль H1 меньше, а колонки выровнены по верху: так карточка
   стоит на месте независимо от длины названия региона. */
/* Строка «Заявитель» под H1 (AR-77, сигнал аудитории № 3) стилизуется ОДИН раз -
   в extra.css. Здесь была вторая копия правила, и это ровно то, что запрещает
   AR-26а: один компонент - один класс в одном месте. Копия снята 30.07.2026,
   потому что то же правило понадобилось и апексным страницам, а свернуть строку
   на узком экране надо было в одном месте, а не в двух. Дополнительное отличие
   копии было в цвете (`--muted` против токена шаблона `--text-3`) - оставлен
   токен шаблона. */

.hero-geo .hero-title { font-size: clamp(2rem, 3.2vw, 2.85rem); }
.hero-geo .hero-inner { align-items: start; }
.hero-geo .hero-visual { position: sticky; top: 96px; }
@media (max-width: 1024px) {
  .hero-geo .hero-inner { align-items: center; }
  .hero-geo .hero-visual { position: static; }
}