/* ---------- первый экран главной ---------- */
.crumbs:empty{display:none}

.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"title title" "meta viz" "body viz";grid-template-rows:auto auto 1fr;
  column-gap:48px;padding:40px 0 48px;margin-bottom:8px;color:var(--ink)}

/* тот же шрифт и начертание, что у H1 остальных страниц, но крупнее: главный заголовок сайта */
.hero-title{grid-area:title;margin:0 0 32px;max-width:none;font-family:var(--f-serif);font-weight:700;
  font-size:clamp(32px,5.2vw,68px);line-height:1.06;letter-spacing:0;color:var(--ink)}
.hero-title-2{color:var(--muted)}
.hero .pagemeta{grid-area:meta;margin:0 0 20px;padding:0;border:0}

.hero-body{grid-area:body}
/* плейсхолдеры: заметные, до получения текста */
.hero .ph{border:1px dashed var(--muted);color:var(--muted);font-size:16px;line-height:1.45;padding:14px 16px}
.hero-desc{margin:0 0 12px;min-height:96px}
.hero-terms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 24px}
.hero-terms span{display:block;margin-bottom:4px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:0;
  background:var(--ink);color:#fff;font-size:16px;font-weight:600;text-decoration:none;transition:background-color .15s}
.hero-btn:hover{background:#2E2E2E;color:#fff}
.hero-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Десктоп: левая колонка тянется на высоту схемы, текст, цена и срок наверху, кнопка прижата вниз.
   Низ кнопки - на нижней линии сетки схемы (y=420 во viewBox "140 20 580 440"), которая выше низа SVG
   на 40 единиц. Ширина схемы = 7/5 ширины левой колонки (колонки 5fr/7fr), единица viewBox = ширина/580,
   поэтому отступ = 7/5 * 40/580 = 9.6552% ширины левой колонки (проценты полей считаются от нее). */
@media (min-width:901px){
  .hero-body{display:flex;flex-direction:column;align-self:stretch}
  .hero-btn{align-self:flex-start;margin-top:auto;margin-bottom:9.6552%}
}

/* ---------- визуализация: план здания собирается из инженерной структуры ---------- */
.hero-viz{grid-area:viz;min-width:0;
  --viz-main:var(--ink);
  --viz-muted:var(--muted);
  --viz-line:var(--rule);
  --viz-accent:var(--accent);
  --viz-time:10s;               /* масштаб времени: все этапы заданы в долях этой величины (построение ~7 с, вся анимация 15 с) */
  --viz-fill:color-mix(in srgb,var(--viz-accent) 8%,transparent);  /* заливка помещений */
  --viz-ease:cubic-bezier(.45,0,.2,1)}
.viz{display:block;width:100%;height:auto;overflow:visible}
.viz text{font-family:var(--f-text);fill:var(--viz-muted)}

.viz .grid path{stroke:var(--viz-line);stroke-width:1;fill:none}
.viz .guides path{stroke:var(--viz-muted);stroke-width:.75;fill:none;opacity:.55}
.viz .cp circle{fill:var(--bg);stroke:var(--viz-main);stroke-width:1.25}
.viz .cp path{stroke:var(--viz-main);stroke-width:1.25;fill:none}
.viz .outer-contour .dr{stroke:var(--viz-main);stroke-width:1.5;fill:none;stroke-linejoin:miter}
.viz .wall-fill{fill:var(--viz-main)}
.viz .inner-walls path{stroke:var(--viz-main);stroke-width:3;fill:none}
.viz .dimensions path{stroke:var(--viz-muted);stroke-width:.9;fill:none}
.viz .dim-t{font-size:11px;text-anchor:middle;letter-spacing:.02em}
.viz .nodes{fill:var(--viz-main)}
.viz .rn{font-weight:700;font-size:12px;fill:var(--viz-main);text-anchor:middle;letter-spacing:.04em}
.viz .ra{font-size:10.5px;text-anchor:middle}
.viz .pl{font-size:11px;font-style:italic}
.viz .coords text{font-size:10px;font-variant-numeric:tabular-nums}
.viz .room-fills rect{fill:var(--viz-fill);opacity:0}
.viz .acc-line{fill:none;stroke:var(--viz-accent);stroke-width:2}
.viz .acc-pts{fill:var(--viz-accent)}

/* Анимация проигрывается один раз. Линии рисуются через stroke-dashoffset (pathLength="1"),
   остальное - через opacity/transform. Скрытые состояния задает только анимация (fill-mode both),
   поэтому без нее (reduced motion) сразу видна чистая финальная схема.
   У каждого этапа начало --s и длительность --len в долях --viz-time; --d - сдвиг внутри группы. */
@media (prefers-reduced-motion:no-preference){
  .viz .dr{stroke-dasharray:1 1}
  .viz .dr,.viz .cp,.viz .wall-fill,.viz .dim-t,.viz .nodes,.viz .room,.viz .pl,.viz .coords,.viz .accents{
    animation-duration:calc(var(--viz-time) * var(--len));
    animation-delay:calc(var(--viz-time) * (var(--s) + var(--d,0)));
    animation-timing-function:var(--viz-ease);animation-fill-mode:both;animation-name:viz-show}
  .viz .dr{animation-name:viz-draw}
  .viz .room{animation-name:viz-rise}

  /* построение */
  .viz .grid .dr{--s:.06;--len:.10}
  .viz .guides .dr{--s:.13;--len:.08}
  .viz .cp{--s:.14;--len:.05}
  .viz .ext{--s:.20;--len:.13}
  .viz .int{--s:.23;--len:.12}
  .viz .wall-fill{--s:.33;--len:.06}
  .viz .inner-walls .dr{--s:.37;--len:.08}
  .viz .dimensions .dr{--s:.48;--len:.07}
  .viz .dim-t{--s:.53;--len:.05}
  .viz .nodes{--s:.55;--len:.04}
  .viz .room{--s:.57;--len:.05}
  .viz .pl{--s:.60;--len:.04}
  .viz .coords{--s:.62;--len:.04}
  .viz .accents{--s:.65;--len:.07}          /* построение закончено к .72 */

  /* заливки помещений 01-07: по очереди через .08 (0.8 с), каждая за .06 (0.6 с);
     последняя готова к 1.28, пауза .10 (1 с), затем все гаснут за .12 (1.2 с) - конец в 1.50 */
  .viz .room-fills rect{
    animation:
      viz-fill-in calc(var(--viz-time) * .06) ease-out calc(var(--viz-time) * (.74 + .08 * var(--i))) both,
      viz-fill-out calc(var(--viz-time) * .12) ease-in-out calc(var(--viz-time) * 1.38) forwards}
}
@keyframes viz-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes viz-show{from{opacity:0}to{opacity:1}}
@keyframes viz-rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes viz-fill-in{from{opacity:0}to{opacity:1}}
@keyframes viz-fill-out{from{opacity:1}to{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .viz *{animation:none!important}
}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .hero{column-gap:32px}
}
/* Колонки сложились в одну: дата, заголовок, схема, описание, цена и срок, кнопка.
   Блок .hero-body раскрывается (display:contents), и его части встают в общую сетку по своим областям -
   разметка одна на десктоп и мобильную версию. */
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    grid-template-areas:"meta" "title" "viz" "desc" "terms" "btn";padding:16px 0 32px}
  .hero .pagemeta{margin:0 0 14px}
  .hero-title{margin-bottom:24px}
  .hero-body{display:contents}
  .hero-desc{grid-area:desc}
  .hero-terms{grid-area:terms}
  .hero-btn{grid-area:btn;justify-self:start}
  .hero-viz{margin:0 0 28px}
}
/* телефон: меньше сетки, без второстепенных размеров и координат, подписи крупнее */
@media (max-width:640px){
  .hero-btn{width:100%}
  .viz .viz-minor{display:none}
  /* пустые поля viewBox на телефоне не нужны: схема крупнее, лишнее обрезано */
  .hero-viz{overflow:hidden;margin-bottom:24px}
  .viz{width:121%;margin:-.5% 0 -6.7% -10.5%}
  .viz .dim-t{font-size:16px}
  .viz .rn{font-size:17px}
  .viz .ra{display:none}
  .viz .pl{font-size:15px}
  .viz .inner-walls path{stroke-width:3.5}
}
/* «Выберите тип объекта» на телефоне: две колонки вместо одной; линейки те же, что у всех сеток
   (вертикальная - левая граница блока правой колонки, горизонтальная - ::after блока).
   Нечетный последний блок занимает свою ячейку, вторая остается пустой. */
@media (max-width:700px){
  #vyberite-tip-obekta + .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #vyberite-tip-obekta + .grid .card{padding:14px var(--tile-pad) 16px}
  #vyberite-tip-obekta + .grid .card h3{font-size:17px;line-height:1.25;overflow-wrap:break-word}
  #vyberite-tip-obekta + .grid .card .price{margin-top:6px}
}
/* уже 410 px описание уходит в 3 строки и блоки становятся высокими и разными - оставляем только название */
@media (max-width:409px){
  #vyberite-tip-obekta + .grid .card .price{display:none}
}
/* цена и срок друг под другом - только на экранах уже 320 px */
@media (max-width:319px){
  .hero-terms{grid-template-columns:1fr}
}