/* ================================================== интерактивный генплан */
.plan{
  --aside:344px;
  position:relative;
  height:calc(100svh - var(--head-h));
  margin-top:var(--head-h);
  display:grid;grid-template-columns:var(--aside) 1fr;
  background:var(--cream);overflow:hidden
}

/* ---------------------------------------------------------------- aside */
.plan__aside{
  position:relative;z-index:6;display:flex;flex-direction:column;
  background:var(--cream);border-right:1px solid var(--line);overflow:hidden
}
.plan__head{padding:clamp(18px,1.8vw,26px);border-bottom:1px solid var(--line)}
.plan__head h1{font-family:var(--f-display);font-weight:400;font-size:1.6rem;line-height:1.08}
.plan__head p{font-size:.82rem;color:var(--ink-soft);margin-top:8px}
.plan__scroll{flex:1;overflow-y:auto;padding:clamp(14px,1.4vw,20px);
  display:grid;gap:20px;align-content:start;scrollbar-width:thin}
.plan__scroll::-webkit-scrollbar{width:8px}
.plan__scroll::-webkit-scrollbar-thumb{background:rgba(22,24,30,.16);border-radius:8px}

.pgroup__t{font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:11px;display:flex;justify-content:space-between;
  align-items:center;gap:10px}
.pgroup__t button{font-size:.66rem;letter-spacing:.1em;color:var(--amber);text-transform:none;
  font-weight:700}

/* легенда / фильтры по статусу */
.legend{display:grid;gap:6px}
.legend__i{display:flex;align-items:center;gap:11px;padding:7px 11px;border-radius:var(--r-sm);
  border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s,opacity .25s;
  text-align:left;width:100%}
.legend__i:hover{background:rgba(22,24,30,.045)}
.legend__i.is-off{opacity:.36}
.legend__i.is-solo{border-color:var(--ink);background:rgba(22,24,30,.05)}
.legend__sw{width:16px;height:16px;border-radius:5px;flex:none;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.legend__n{font-size:.86rem;font-weight:600;flex:1}
.legend__c{font-size:.78rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* слайдеры-диапазоны */
.rangef{display:grid;gap:10px}
.rangef__v{display:flex;justify-content:space-between;font-size:.8rem;font-weight:600}
.rangef input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:4px;
  border-radius:4px;background:rgba(22,24,30,.18);cursor:pointer}
.rangef input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--ink);border:3px solid var(--cream);
  box-shadow:0 0 0 1px var(--line)}
.rangef input[type=range]::-moz-range-thumb{width:18px;height:18px;border:3px solid var(--cream);
  border-radius:50%;background:var(--ink)}

/* чипы зон */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:100px;border:1px solid var(--line);font-size:.78rem;
  font-weight:600;transition:background .25s,color .25s,border-color .25s}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* точки инфраструктуры */
.poi{display:grid;gap:4px}
.poi__i{display:flex;gap:12px;align-items:center;padding:6px 11px;border-radius:var(--r-sm);
  width:100%;text-align:left;transition:background .25s}
.poi__i:hover{background:rgba(22,24,30,.05)}
.poi__n{width:24px;height:24px;border-radius:50%;background:var(--sage);color:var(--cream);
  display:grid;place-items:center;font-size:.72rem;font-weight:700;flex:none}
.poi__i span:last-child{font-size:.86rem}

.plan__foot{padding:clamp(14px,1.4vw,20px);border-top:1px solid var(--line);display:grid;gap:10px}
.plan__foot small{font-size:.68rem;color:var(--ink-soft)}

/* ---------------------------------------------------------------- map */
.plan__map{position:relative;background:#f6f2cf;overflow:hidden;touch-action:none}
/* мягкая «подложка» из того же генплана — убирает пустые поля по краям */
.plan__map::before{
  content:"";position:absolute;inset:-60px;z-index:0;
  background:url("../img/genplan-sm.webp") center/cover no-repeat;
  filter:blur(42px) saturate(.7);opacity:.55;pointer-events:none}
.plan__svg{position:relative;z-index:1;width:100%;height:100%;display:block;cursor:grab}
.plan__svg.is-drag{cursor:grabbing}
.plan__svg image{image-rendering:auto}

.lot{
  fill:var(--st-free);fill-opacity:.78;stroke:rgba(22,24,30,.6);stroke-width:.3;
  transition:fill-opacity .18s,fill .18s;cursor:pointer;
  vector-effect:non-scaling-stroke
}
.lot:hover{fill-opacity:.95}
.lot[data-s="house"]{fill:var(--st-house)}
.lot[data-s="booked"]{fill:var(--st-booked)}
.lot[data-s="sold"]{fill:var(--st-sold);fill-opacity:.62;cursor:default}
.lot[data-s="stage2"]{fill:var(--st-stage2);fill-opacity:.5}
.lot.is-dim{fill-opacity:.07;stroke-opacity:.18;pointer-events:none}
.lot.is-active{fill-opacity:.95;stroke:#16181e;stroke-width:1.6}
#lots.has-solo .lot:not(.is-dim){fill-opacity:.9}

.poi-mark{cursor:pointer}
.poi-mark circle{fill:var(--ink);stroke:var(--cream);stroke-width:1.6;
  vector-effect:non-scaling-stroke;transition:fill .3s}
.poi-mark:hover circle{fill:var(--amber)}
.poi-mark text{fill:var(--cream);font-size:6.4px;font-weight:700;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;font-family:var(--f-sans)}
.poi-pulse{fill:none;stroke:var(--amber);stroke-width:2;vector-effect:non-scaling-stroke;
  opacity:0}
.poi-mark.is-hi .poi-pulse{animation:poiPulse 1.5s ease-out infinite}
@keyframes poiPulse{0%{r:7;opacity:.9}100%{r:22;opacity:0}}

/* управление картой */
.mapctl{position:absolute;right:16px;bottom:16px;z-index:4;display:grid;gap:8px}
.mapctl button{width:44px;height:44px;border-radius:12px;background:rgba(255,243,226,.94);
  border:1px solid var(--line);display:grid;place-items:center;
  box-shadow:0 6px 18px -10px rgba(22,24,30,.5);transition:background .25s,transform .25s}
.mapctl button:hover{background:#fff;transform:translateY(-1px)}
.maphint{position:absolute;left:16px;top:16px;z-index:4;background:rgba(255,243,226,.92);
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;font-size:.74rem;
  color:var(--ink-soft);box-shadow:0 6px 18px -12px rgba(22,24,30,.5);
  transition:opacity .5s}
.maphint.is-hide{opacity:0;pointer-events:none}

.tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:var(--cream);
  border-radius:10px;padding:8px 12px;font-size:.76rem;white-space:nowrap;line-height:1.35;
  transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .18s}
.tip.is-show{opacity:1}
.tip b{font-size:.86rem;display:block}
.tip i{font-style:normal;opacity:.66}

/* ---------------------------------------------------------------- карточка */
.card{
  position:absolute;right:18px;top:18px;bottom:18px;width:min(374px,42vw);z-index:5;
  background:var(--cream);border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(22,24,30,.7);
  display:flex;flex-direction:column;overflow:hidden;
  transform:translateX(calc(100% + 30px));transition:transform .55s var(--ease)}
.card.is-open{transform:none}
.card__head{padding:22px 22px 18px;border-bottom:1px solid var(--line);position:relative}
.card__close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;transition:background .25s}
.card__close:hover{background:rgba(22,24,30,.07)}
.card__st{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.card__st i{width:9px;height:9px;border-radius:50%;background:var(--c,var(--st-free))}
.card__num{font-family:var(--f-display);font-size:2.1rem;line-height:1.1;margin-top:10px}
.card__zone{font-size:.86rem;color:var(--ink-soft)}
.card__body{flex:1;overflow-y:auto;padding:22px;display:grid;gap:18px;align-content:start}
.card__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv{background:rgba(22,24,30,.04);border-radius:var(--r-md);padding:14px}
.kv small{display:block;font-size:.7rem;color:var(--ink-soft);letter-spacing:.04em}
.kv b{font-family:var(--f-display);font-weight:400;font-size:1.5rem;line-height:1.2;
  display:block;margin-top:4px}
.kv--wide{grid-column:1/-1}
.kv--accent{background:var(--ink);color:var(--cream)}
.kv--accent small{color:rgba(255,243,226,.6)}
.rows{display:grid;gap:0}
.rows div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:.86rem}
.rows div:last-child{border-bottom:0}
.rows span{color:var(--ink-soft)}
.rows b{font-weight:700;white-space:nowrap}
.card__foot{padding:18px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
.card__hint{font-size:.7rem;color:var(--ink-soft);text-align:center}

/* пустое состояние */
.card__empty{padding:26px;text-align:center;color:var(--ink-soft);font-size:.9rem}

/* ---------------------------------------------------------------- моб. */
.plan__toggle{display:none}
@media (max-width:1080px){
  .plan{grid-template-columns:1fr;--aside:0px}
  .plan__aside{
    position:absolute;inset:auto 0 0;z-index:8;height:min(76svh,560px);
    border-right:0;border-top:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0;
    box-shadow:0 -20px 50px -30px rgba(22,24,30,.6);
    transform:translateY(calc(100% - 0px));transition:transform .55s var(--ease)}
  .plan__aside.is-open{transform:none}
  .plan__aside::before{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);
    width:44px;height:4px;border-radius:4px;background:var(--line)}
  .plan__head{padding-top:26px}
  .plan__toggle{display:inline-flex;position:absolute;left:16px;bottom:16px;z-index:7;
    align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:100px;
    background:var(--ink);color:var(--cream);font-size:.74rem;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
    box-shadow:0 10px 26px -14px rgba(22,24,30,.8)}
  .plan__toggle b{background:var(--amber);color:#fff;border-radius:100px;padding:1px 8px;
    font-size:.7rem}
  .card{right:10px;left:10px;top:auto;bottom:10px;width:auto;max-height:min(78svh,600px);
    transform:translateY(calc(100% + 20px))}
  .maphint{left:12px;right:12px;top:12px;text-align:center}
  .mapctl{right:12px;bottom:72px}
}
@media (max-width:520px){
  .card__num{font-size:1.7rem}
  .card__grid{grid-template-columns:1fr 1fr}
}

/* лендинговый блок под картой */
.plan-extra{background:var(--cream-2);padding-block:clamp(48px,6vw,90px)}