/* Блок «Заявка + карта» для главной v4 — шорткод [ts_contact_v4].
   Форк blocks/contact/ (соты): карта здесь обычная, векторная, собрана из
   геометрии OSM скриптом migration/tools/vecmap/build.py.

   Раскладка: карта лежит фоном во всю ширину окна, форма — карточка справа,
   оформленная как всплывающее окно: скруглённая, с многослойной тенью.
   Сверху и снизу карта растворяется дугой — на неё наезжают соседние блоки
   и подвал, поэтому кромок у неё быть не должно.

   Карта серая целиком, единственное цветное пятно — здание БЦ.
   Все классы с префиксом tsc4-. */

.tsc4{
  --ink:#1b1b1d;
  --ink-2:#5c5c63;
  --ink-3:#8e8e96;
  --bg:#f7f6f4;
  --card:#ffffff;
  --line:rgba(27,27,29,.10);
  --line-2:rgba(27,27,29,.18);
  --accent:#e95c0c;

  /* Палитра карты. Все тона — оттенки одного тёплого серого: карта не должна
     спорить с оранжевым пятном здания. */
  --m-ground:#eae7e1;
  --m-green:#dadfd0;
  --m-water:#ccd4d6;
  --m-build:#d2cdc2;
  --m-road:#ffffff;
  --m-cas:#ded8ce;
  --m-rail:#b9b5ac;

  /* Высота секции: во весь экран, но не выше, чем карточке нужно. */
  --h:min(100vh,980px);

  /* Вертикальный ритм — те же значения, что на главной v4 (home-v4.css):
     надрубрика → --sp-lbl → заголовок → --sp-txt → лид. Объявлены здесь
     своими, а не унаследованы, чтобы блок можно было поставить на любую
     страницу отдельным шорткодом. */
  --sp-lbl:14px;
  --sp-txt:16px;

  position:relative;
  /* Свой контекст наложения: иначе карточка формы (z-index) всплывала бы
     над подвалом, который по замыслу наезжает на карту снизу. */
  isolation:isolate;
  max-width:none;width:100%;margin:0;padding:0;
  min-height:var(--h);
  display:flex;align-items:center;
  background:var(--bg);
  font-family:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;color:var(--ink);
  overflow:hidden;
}
/* Тема Archi красит теги section и figure в тёмный — на светлом блоке это
   давало чёрные прямоугольники. Селектор из класса и тега весит больше.
   Самой секции при этом фон нужен: на нём «всплывашка» и читается как
   поднятая — поэтому перебиваем не в прозрачность, а в свой тон. */
section.tsc4{background:var(--bg)}
.tsc4 figure,.tsc4 form{background:transparent}
.tsc4,.tsc4 *,.tsc4 *::before,.tsc4 *::after{box-sizing:border-box}
.tsc4 h2{margin:0;color:var(--ink);text-transform:none;letter-spacing:-.02em;font-family:inherit}
.tsc4 p{margin:0}
.tsc4 a{color:inherit;text-decoration:none}

/* ── Карта: левая половина окна ─────────────────────────────────────────── */

/* Карта — фон всей секции, во всю ширину окна.
   container-type:size нужен ниже: полотно карты вписывается «на заполнение»
   через единицы cqw/cqh, а не object-fit (это не заменяемый элемент). */
.tsc4__map{
  position:absolute;inset:0;
  container-type:size;
  overflow:hidden;
  z-index:0;
}

/* Полотно: перекрывает рамку целиком, пропорции карты сохранены.
   max() даёт поведение object-fit:cover — берём ту сторону, которой не хватает.

   По горизонтали полотно не центрируется, а ставится так, чтобы здание БЦ
   всегда оказывалось в одной и той же доле экрана (--t). Иначе чем выше
   секция, тем шире полотно и тем сильнее обрезаются бока — здание уезжало
   к левому краю. clamp не даёт полотну отойти от края и открыть пустоту. */
.tsc4-stage{
  --sw:max(100cqw,100cqh*1600/940);
  --sh:max(100cqh,100cqw*940/1600);
  --bx:.24;   /* где здание стоит в кадре карты */
  --t:.24;    /* где оно должно стоять на экране */
  position:absolute;top:50%;transform:translateY(-50%);
  width:var(--sw);height:var(--sh);
  left:clamp(calc(100cqw - var(--sw)),calc(100cqw*var(--t) - var(--sw)*var(--bx)),0px);
}

/* Маски висят на КАДРЕ, а не на полотне. Полотно вписано «на заполнение» и
   выше кадра — если маску повесить на него, прозрачный край окажется за
   обрезом, и внизу карта не сойдёт на нет, а оборвётся на половине плотности.

   Слоёв три, и они перемножаются вложенностью (mask-composite не нужен):
   две дуги задают наклон схода, а прямая кромка гарантирует, что у самого
   верха и низа плотность падает до нуля по всей ширине. Одними дугами так
   не выходит: чтобы сход был наклонным, эллипс должен быть узким, а узкий
   эллипс не достаёт до дальнего угла. */
.tsc4-paint{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(150% 60% at 84% -32%,transparent 0 52%,#000 100%);
          mask-image:radial-gradient(150% 60% at 84% -32%,transparent 0 52%,#000 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.tsc4-paint__in{
  position:absolute;inset:0;
  -webkit-mask-image:radial-gradient(150% 60% at 16% 132%,transparent 0 52%,#000 100%);
          mask-image:radial-gradient(150% 60% at 16% 132%,transparent 0 52%,#000 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.tsc4-paint__edge{
  position:absolute;inset:0;
  background:var(--m-ground);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.tsc4-svg{display:block;width:100%;height:100%}

/* Слои карты */
.tsc4-m-green{fill:var(--m-green)}
.tsc4-m-water{fill:var(--m-water)}
.tsc4-m-stream{fill:none;stroke:var(--m-water);stroke-width:2;stroke-linecap:round}
.tsc4-m-build{fill:var(--m-build)}

.tsc4-m-road{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tsc4-m-road--cas{stroke:var(--m-cas)}
.tsc4-m-road--ink{stroke:var(--m-road)}
.tsc4-m-s.tsc4-m-road--cas{stroke-width:2.8}
.tsc4-m-s.tsc4-m-road--ink{stroke-width:1.7}
.tsc4-m-m.tsc4-m-road--cas{stroke-width:4.6}
.tsc4-m-m.tsc4-m-road--ink{stroke-width:3.2}
.tsc4-m-l.tsc4-m-road--cas{stroke-width:6.6}
.tsc4-m-l.tsc4-m-road--ink{stroke-width:4.8}

/* Железная дорога — классическая «шпальная» штриховка: тёмная линия,
   поверх неё светлый пунктир. */
.tsc4-m-rail{fill:none;stroke:var(--m-rail);stroke-width:2.4}
.tsc4-m-rail2{fill:none;stroke:var(--m-ground);stroke-width:1.4;stroke-dasharray:4.5 5}

/* Здание БЦ — единственное цветное пятно на карте. */
.tsc4-m-bc2{fill:var(--accent);opacity:.34}
.tsc4-m-bc{fill:var(--accent);stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round}

/* ── Метки поверх карты ─────────────────────────────────────────────────── */

/* Метки лежат во втором таком же полотне, рядом с замаскированным: обе
   копии .tsc4-stage считаются одними и теми же формулами, поэтому совпадают
   до пикселя. Маска на метки при этом не действует — карта растворяется
   по краям, подписи остаются чёткими. */
.tsc4-stage--marks{pointer-events:none;z-index:1}
.tsc4-mark{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}

.tsc4-mark__dot{
  display:block;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2.5px solid #8f8b84;
  box-shadow:0 1px 3px rgba(20,18,15,.22);
}
/* Подпись стоит на белой плашке, а не просто светится по фону: серый текст
   на светло-бежевой карте читался плохо — правка пользователя 02.09.2026.
   Плашка той же породы, что карточка адреса БЦ, только мельче: то же
   скругление и та же двухслойная тень, поэтому карта не рассыпается
   на разные приёмы. */
.tsc4-mark__t{
  position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);
  font-size:12px;line-height:1.25;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-align:center;
  background:#fff;border-radius:9px;padding:4px 9px;
  box-shadow:0 1px 3px rgba(20,18,15,.1),0 8px 20px -12px rgba(20,18,15,.45);
}
/* Вторая строка была #84807a — на белом это 3,4:1, ниже нормы. */
.tsc4-mark__t i{display:block;font-style:normal;font-weight:400;font-size:11px;color:#6d6963}
.tsc4-mark--left .tsc4-mark__t{left:auto;right:calc(100% + 8px);top:50%;transform:translateY(-50%);text-align:right}
.tsc4-mark--right .tsc4-mark__t{left:calc(100% + 8px);right:auto;top:50%;transform:translateY(-50%);text-align:left}

/* Указатель на дальний ориентир: до МКАД 3,6 км, до шоссе Энтузиастов 2,6 —
   в кадр они не попадают, а сказать про них надо. Рисуем как на схеме
   проезда: стрелка в сторону объекта и расстояние по прямой.

   Угол приходит из данных переменной --tsc4-a (0 — вверх, по часовой),
   поэтому поворачивается только сама стрелка: подпись должна остаться
   горизонтальной, иначе её не прочесть. */
.tsc4-edge{position:absolute;transform:translate(-50%,-50%);white-space:nowrap}
.tsc4-edge__arr{
  display:block;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 3px rgba(20,18,15,.16),0 6px 16px -8px rgba(20,18,15,.4);
  transform:rotate(var(--tsc4-a,0deg));
}
/* Само остриё — треугольник из бордюров, вершиной вверх. Внутри кружка,
   который уже повёрнут, поэтому своих поворотов не требует. */
.tsc4-edge__arr::before{
  content:'';position:absolute;left:50%;top:50%;
  width:0;height:0;margin:-5px 0 0 -4px;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-bottom:8px solid var(--accent);
}
.tsc4-edge__t{
  position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);
  font-size:12px;line-height:1.25;font-weight:600;letter-spacing:.01em;
  color:var(--ink);text-align:left;
  background:#fff;border-radius:9px;padding:4px 9px;
  box-shadow:0 1px 3px rgba(20,18,15,.1),0 8px 20px -12px rgba(20,18,15,.45);
}
.tsc4-edge__t i{display:block;font-style:normal;font-weight:400;font-size:11px;color:#6d6963}
.tsc4-edge--left .tsc4-edge__t{left:auto;right:calc(100% + 8px);text-align:right}

/* Подпись массива зелени — без точки, вразрядку, как на бумажных картах.
   Цвет поднят с #96938c: на фоне карты он давал 2,8 при норме 4,5, и рядом
   с белыми плашками меток читался совсем никак. Разрядка и отсутствие
   плашки оставлены — по ним видно, что это фон, а не точка на карте. */
.tsc4-area{
  position:absolute;transform:translate(-50%,-50%);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#6f6c66;text-align:center;white-space:nowrap;
}

/* Точка БЦ: кружок с пульсирующим кольцом и карточка с адресом. */
.tsc4-bc{position:absolute;transform:translate(-50%,-50%)}
.tsc4-bc__pin{
  display:block;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(233,92,12,.5);
}
.tsc4-bc__pin::after{
  content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;
  margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid var(--accent);
  animation:tsc4-pulse 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes tsc4-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(3.6);opacity:0}
  100%{transform:scale(3.6);opacity:0}
}
@media (prefers-reduced-motion:reduce){.tsc4-bc__pin::after{animation:none;opacity:0}}

.tsc4-bc__card{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  background:#fff;border-radius:12px;padding:9px 14px;
  box-shadow:0 2px 6px rgba(20,18,15,.08),0 14px 30px -14px rgba(20,18,15,.35);
  text-align:right;white-space:nowrap;
}
.tsc4-bc__card b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3}
/* Адрес: var(--ink-3) на белой карточке — 3,25 при норме 4,5. */
.tsc4-bc__card i{display:block;font-style:normal;font-size:11.5px;color:#6a6a72}

/* Обязательная ссылка на источник — у кромки рамки, а не полотна: полотно
   шире рамки и уезжает под обрез. Отступ снизу больше наезда подвала (64px),
   иначе он её накроет. */
.tsc4__src{
  position:absolute;right:20px;bottom:84px;z-index:2;
  font-size:10.5px;letter-spacing:.02em;color:#a3a099;
}
.tsc4__src a{text-decoration:underline;text-underline-offset:2px}

/* ── Правая половина: форма как всплывающее окно ────────────────────────── */

/* Поля сверху и снизу разные, а в сумме те же 140px — высота этой коробки
   не меняется, значит и её положение по центру секции тоже. Меняется только
   место карточки внутри: она поднимается на 20px. Так надо потому, что снизу
   на секцию наезжает подвал (-64px), и зазор под карточкой выходил вдвое
   меньше верхнего — форма читалась приклеенной к подвалу. */
.tsc4__side{
  position:relative;z-index:3;
  width:100%;max-width:1170px;margin:0 auto;padding:50px 15px 90px;
  display:flex;justify-content:flex-end;
}

.tsc4-card{
  position:relative;
  width:min(620px,100%);
  background:var(--card);
  border-radius:24px;
  padding:40px 44px 34px;
  border:1px solid rgba(27,27,29,.05);
  /* Тень в три слоя — так карточка читается именно как поднятое окно,
     а не как блок с рамкой. */
  box-shadow:
    0 1px 2px rgba(20,18,15,.06),
    0 14px 30px -12px rgba(20,18,15,.16),
    0 60px 100px -40px rgba(20,18,15,.42);
}
/* Второй «лист» из-под карточки (намёк на стопку окон) убран 31.08.2026:
   он выглядывал над верхней кромкой белой полосой и читался не приёмом,
   а второй карточкой, забытой под формой. Карточку теперь поднимает
   только тень. */

/* Карточка прижата к правому краю сетки, поэтому чем уже окно, тем глубже она
   наезжает на карту. Сужаем её ступенями — наезд остаётся в пределах 40-50px. */
@media (max-width:1279px){.tsc4-card{width:min(560px,100%);padding:34px 36px 30px}}
@media (max-width:1119px){.tsc4-card{width:min(500px,100%)}}

/* Отступы — двумя классами: сбросы `.tsc4 p{margin:0}` и `.tsc4 h2{margin:0}`
   выше весят больше одиночного класса и обнуляли их молча, из-за чего
   надрубрика, заголовок и лид в карточке слипались в один блок. */
.tsc4-card__label{
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.tsc4-card__title{font-size:clamp(26px,2.4vw,36px);font-weight:700;line-height:1.1}
.tsc4-card__lead{font-size:14.5px;color:var(--ink-2)}
.tsc4 .tsc4-card__label{margin-bottom:var(--sp-lbl)}
.tsc4 .tsc4-card__title{margin-bottom:var(--sp-txt)}
.tsc4 .tsc4-card__lead{margin-bottom:20px}

/* Транспорт: то, что не поместилось на карту (метро стоит слишком далеко
   от здания, чтобы попасть в кадр вместе с ним). */
.tsc4-card__facts{
  display:flex;flex-wrap:wrap;gap:12px 30px;
  margin-bottom:24px;padding:15px 0 0;border-top:1px solid var(--line);
}
.tsc4-fact{display:flex;flex-direction:column;gap:1px}
.tsc4-fact b{font-size:17px;font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.01em}
.tsc4-fact span{font-size:11.5px;line-height:1.3;color:var(--ink-3)}

.tsc4-form{display:flex;flex-direction:column;gap:14px}
.tsc4-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tsc4-field{display:block}
.tsc4-field__l{
  display:block;font-size:11.5px;letter-spacing:.02em;
  color:var(--ink-3);margin-bottom:6px;
}
/* Вес .tsc4 .tsc4-form … — выше, чем у правил темы для CF7
   (.wpcf7 input[type=text] — серый фон, margin-bottom:20px; .wpcf7 textarea{height:175px}). */
.tsc4 .tsc4-form .tsc4-field input,.tsc4 .tsc4-form .tsc4-field textarea{
  display:block;width:100%;height:auto;margin:0;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line-2);background:var(--bg);
  font-family:inherit;font-size:14px;line-height:1.4;color:var(--ink);
  resize:vertical;transition:border-color .2s,background .2s,box-shadow .2s;
}
.tsc4 .tsc4-form .tsc4-field input:focus,.tsc4 .tsc4-form .tsc4-field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
  box-shadow:0 0 0 3px rgba(233,92,12,.12);
}
.tsc4 .tsc4-form .tsc4-field input::placeholder,.tsc4 .tsc4-form .tsc4-field textarea::placeholder{color:var(--ink-3)}

/* Тема красит и раздувает любые кнопки — сбрасываем и для :hover, и для :focus. */
.tsc4 button.tsc4-btn,
.tsc4 button.tsc4-btn:hover,
.tsc4 button.tsc4-btn:focus{
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:15px 24px;margin:6px 0 0;
  border:0;border-radius:12px;
  background:var(--accent);color:#fff;
  font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.02em;
  text-transform:none;line-height:1;cursor:pointer;
  box-shadow:0 10px 22px -12px rgba(233,92,12,.85);
  transition:background .2s,box-shadow .2s,transform .12s;
}
.tsc4 button.tsc4-btn:hover{background:#d24f06;box-shadow:0 14px 26px -12px rgba(233,92,12,.9)}
.tsc4 button.tsc4-btn:active{transform:translateY(1px)}

.tsc4-form__law{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.tsc4-form__law a{text-decoration:underline;text-underline-offset:2px}
.tsc4-form__note{font-size:11.5px;color:var(--ink-3);opacity:.8}

/* Форма стала настоящей CF7 (26.10.2026): обёртки полей, подсказки,
   строка ответа. Разметка полей та же, что у прежнего макета. */
.tsc4 .wpcf7{margin:0}
.tsc4 .tsc4-form .hidden-fields-container{display:none}
.tsc4 .tsc4-form .wpcf7-form-control-wrap{display:block;position:relative}
.tsc4 .tsc4-form .wpcf7-not-valid-tip{display:block;margin-top:5px;font-size:11.5px;line-height:1.3;color:#c2410c}
.tsc4 .tsc4-form .tsc4-field .wpcf7-not-valid{border-color:#c2410c}
.tsc4 .tsc4-form .wpcf7-response-output{
  margin:0;padding:11px 14px;border:1px solid var(--line-2);border-radius:12px;
  font-size:13px;line-height:1.4;color:var(--ink);background:var(--bg);
}
.tsc4 .tsc4-form.sent .wpcf7-response-output{border-color:#2f9e5b;background:#eef8f1}
.tsc4 .tsc4-form.invalid .wpcf7-response-output,
.tsc4 .tsc4-form.unaccepted .wpcf7-response-output,
.tsc4 .tsc4-form.failed .wpcf7-response-output,
.tsc4 .tsc4-form.spam .wpcf7-response-output{border-color:#e9a37a;background:#fdf3ec}
.tsc4 .tsc4-form.submitting button.tsc4-btn{opacity:.6;cursor:progress}

.tsc4-card__contacts{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  margin-top:24px;padding-top:20px;border-top:1px solid var(--line);
  font-size:14px;font-weight:600;
}
.tsc4-card__contacts a{transition:color .2s}
.tsc4-card__contacts a:hover{color:var(--accent)}

/* ── Узкие экраны ───────────────────────────────────────────────────────── */

/* Половина окна перестаёт работать раньше, чем кончается место под форму:
   карта уходит наверх широкой полосой, карточка встаёт под ней. */
@media (max-width:1023px){
  .tsc4{display:block;min-height:0;padding:0}
  /* Полоса не ниже 440px: при более низкой полотно обрезается так сильно,
     что верхние метки уходят за кадр. */
  .tsc4__map{position:relative;width:100%;height:min(56vh,440px);inset:auto}
  /* Карточку формы карта тут не подпирает — здание можно ставить ближе
     к середине полосы. */
  .tsc4-stage{--t:.45}
  .tsc4-paint{
    -webkit-mask-image:radial-gradient(190% 62% at 82% -36%,transparent 0 50%,#000 100%);
            mask-image:radial-gradient(190% 62% at 82% -36%,transparent 0 50%,#000 100%);
  }
  .tsc4-paint__in{
    -webkit-mask-image:radial-gradient(190% 62% at 18% 136%,transparent 0 50%,#000 100%);
            mask-image:radial-gradient(190% 62% at 18% 136%,transparent 0 50%,#000 100%);
  }
  /* Снизу карточка наезжает на карту — источник уводим к верхней кромке,
     там карта как раз растворяется и надпись ничего не перекрывает. */
  .tsc4__src{top:14px;right:16px;bottom:auto}
  .tsc4__side{padding:0 15px 60px;justify-content:center;margin-top:-46px}
  .tsc4-card{width:min(620px,100%);padding:32px 28px 28px}
  /* Карта тут полоса во всю ширину, а не половина окна: кадр обрезается
     по бокам, метки сходятся и подписи налезают друг на друга. Оставляем
     только главные — остальное всё равно продублировано строкой фактов
     в карточке формы. */
  .tsc4-minor{display:none}
  /* На широкой полосе места справа хватает — подпись платформы возвращаем
     вправо: слева она наехала бы на карточку адреса. */
  .tsc4-mark--left .tsc4-mark__t{left:calc(100% + 10px);right:auto;text-align:left}
  /* Сбоку карточка адреса упирается в край полосы — ставим её над точкой. */
  .tsc4-bc__card{
    right:auto;left:50%;top:auto;bottom:calc(100% + 12px);
    transform:translateX(-50%);text-align:center;
  }
}
@media (max-width:600px){
  .tsc4__map{height:min(52vh,400px)}
  .tsc4-card{padding:26px 20px 22px;border-radius:20px}
  .tsc4-form__row{grid-template-columns:1fr}
  .tsc4-card__contacts{gap:6px 18px;font-size:13.5px}
  .tsc4-mark__t,.tsc4-edge__t{font-size:11px;padding:3px 7px;border-radius:8px}
  .tsc4-edge__arr{width:19px;height:19px}
  .tsc4-area{font-size:10.5px;letter-spacing:.1em}
}