/* Страница «Объекты и участки» — интерактивная схема проектных зон 1-й очереди. */

.objects-page{background:var(--paper)}
body.zone-open{overflow:hidden}
.home-territory{scroll-margin-top:var(--header-h);background:var(--paper)}
.home-territory .zones-switch{scroll-margin-top:calc(var(--header-h) + 18px)}
/* подписи-подсказки переводятся через вложенный элемент */
.zone-hint b,.objects-page .map-hint b{font-weight:inherit}


/* ---------- hero ---------- */
.zones-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:calc(var(--header-h) + clamp(48px,6vw,86px)) 0 clamp(44px,5vw,68px);
  background:var(--navy-deep);
  color:var(--white);
}
.zones-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background-image:url("../img/optimized/city-masterplan-aerial-1920.webp?v=zones-v1");
  background-image:image-set(
    url("../img/optimized/city-masterplan-aerial-1920.avif?v=zones-v1") type("image/avif"),
    url("../img/optimized/city-masterplan-aerial-1920.webp?v=zones-v1") type("image/webp")
  );
  background-position:center 58%;
  background-size:cover;
  transform:scale(1.025);
}
.zones-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,30,43,.96) 0%,rgba(0,30,43,.86) 52%,rgba(0,30,43,.56) 100%),
    linear-gradient(0deg,rgba(0,25,36,.82) 0%,rgba(0,25,36,.1) 70%);
}
.zones-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.6fr);
  align-items:end;
  gap:clamp(32px,7vw,110px);
}
.zones-hero .eyebrow{color:var(--gold)}
.zones-hero h1{
  max-width:12ch;
  font-size:clamp(3rem,7vw,6.2rem);
  line-height:.92;
}
.zones-hero-grid>p{
  max-width:44ch;
  padding-bottom:8px;
  color:rgba(255,255,255,.66);
  font-size:.95rem;
  line-height:1.72;
}
.zones-totals{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  margin-top:clamp(38px,5vw,64px);
  border:1px solid rgba(253,218,114,.24);
  background:rgba(253,218,114,.24);
}
.zones-totals div{
  padding:22px clamp(16px,2vw,26px) 20px;
  background:rgba(0,30,43,.72);
}
.zones-totals b{
  display:block;
  color:var(--gold);
  font-size:clamp(1.25rem,2.1vw,1.75rem);
  font-weight:400;
  letter-spacing:-.02em;
}
.zones-totals span{
  display:block;
  margin-top:9px;
  color:rgba(255,255,255,.55);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* ---------- секции ---------- */
.zones-section{background:var(--paper)}
.zones-section+.zones-section{padding-top:0}
.zones-head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.6fr);
  align-items:end;
  gap:clamp(24px,5vw,80px);
  margin-bottom:clamp(24px,3vw,38px);
}
.zones-head h2{font-size:clamp(1.9rem,3.6vw,3.1rem)}
.zones-head>p{
  max-width:44ch;
  padding-bottom:6px;
  color:var(--ink-soft);
  font-size:.86rem;
  line-height:1.68;
}

/* ---------- переключатель режимов ---------- */
.zones-switch{
  display:inline-grid;
  grid-template-columns:repeat(2,minmax(170px,1fr));
  margin-bottom:clamp(18px,2.4vw,28px);
  border:1px solid var(--teal-dark);
}
.zones-switch button{
  min-height:54px;
  padding:12px 24px;
  color:var(--teal-dark);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .25s,color .25s;
}
.zones-switch button+button{border-left:1px solid var(--teal-dark)}
.zones-switch button[aria-selected="true"]{background:var(--teal-dark);color:var(--white)}
.zones-switch button:hover:not([aria-selected="true"]){background:color-mix(in srgb,var(--teal-dark) 10%,transparent)}

/* ---------- схема ---------- */
.zone-scheme{
  display:grid;
  align-items:stretch;
  grid-template-columns:minmax(0,1fr) 320px;
  border:1px solid var(--line);
  background:var(--white);
}
.zone-stagewrap{position:relative;min-width:0;background:#f2efe7}
.zone-viewport{
  position:relative;
  overflow:hidden;
  touch-action:none;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  cursor:grab;
}
.zone-viewport.is-panning{cursor:grabbing}
.zone-stage{position:relative;transform-origin:0 0;will-change:transform}
.zone-stage img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none;pointer-events:none}
.zone-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.zone-area{cursor:pointer;outline:none}
.zone-area polygon{
  fill:transparent;
  stroke:transparent;
  stroke-width:5;
  stroke-linejoin:round;
  transition:fill .16s,stroke .16s;
}
.zone-stage.show-outlines .zone-area polygon{
  fill:color-mix(in srgb,var(--zone-color) 16%,transparent);
  stroke:color-mix(in srgb,var(--zone-color) 72%,transparent);
}
.zone-area:hover polygon,
.zone-area.is-hovered polygon,
.zone-area:focus-visible polygon{
  fill:color-mix(in srgb,var(--zone-color) 42%,transparent);
  stroke:var(--zone-color);
  stroke-width:6;
}
.zone-area.is-active polygon{
  fill:color-mix(in srgb,var(--zone-color) 62%,transparent);
  stroke:#fff1b7;
  stroke-width:7;
}
.zone-tip{
  position:absolute;
  z-index:6;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:11px;
  padding:10px 14px;
  background:rgba(0,38,53,.95);
  color:#fff;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-136%);
  transition:opacity .16s,visibility .16s;
  box-shadow:0 10px 26px rgba(0,30,43,.3);
}
.zone-tip.is-visible{opacity:1;visibility:visible}
.zone-tip span{color:var(--gold);font-size:.57rem;font-weight:500;letter-spacing:.14em}
.zone-tip strong{font-size:.68rem;font-weight:400}
.zone-tip small{color:rgba(255,255,255,.5);font-size:.6rem}
.zone-hint{
  position:absolute;
  z-index:4;
  left:18px;
  bottom:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 15px;
  background:rgba(0,38,53,.88);
  color:rgba(255,255,255,.78);
  font-size:.6rem;
  letter-spacing:.02em;
  pointer-events:none;
  backdrop-filter:blur(8px);
}
.zone-hint i{
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 6px rgba(253,218,114,.18);
}
.zone-tools{
  position:absolute;
  z-index:5;
  right:18px;
  bottom:18px;
  display:flex;
  border:1px solid rgba(0,38,53,.16);
  background:rgba(255,255,255,.95);
  box-shadow:0 8px 24px rgba(0,38,53,.12);
}
.zone-tools button{
  width:42px;
  height:42px;
  border-right:1px solid rgba(0,38,53,.13);
  color:var(--navy-deep);
  font-size:.95rem;
  line-height:1;
  transition:background .2s,color .2s;
}
.zone-tools button:last-child{border-right:0}
.zone-tools button:hover,.zone-tools button:focus-visible{background:var(--teal);color:#fff}
.zone-tools button[aria-pressed="true"]{background:var(--navy-deep);color:var(--gold)}

/* индекс справа */
.zone-index{
  position:relative;
  min-width:0;
  min-height:440px;
  border-left:1px solid var(--line);
  background:var(--white);
}
.zone-index-inner{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
}
.zone-index-inner>p{
  margin:0;
  padding:20px 20px 16px;
  border-bottom:1px solid var(--line);
  color:var(--teal-dark);
  font-size:.55rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.zone-index ol{
  flex:1;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,63,87,.24) transparent;
}
.zone-index-all{
  flex:0 0 auto;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 20px;
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--teal);
  color:#fff;
  font-size:.61rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:background .2s,color .2s;
}
.zone-index-all span:last-child{
  color:var(--gold);
  font-size:1.05rem;
  line-height:1;
  transition:transform .2s;
}
.zone-index-all:hover,.zone-index-all:focus-visible{background:var(--navy-deep);color:#fff}
.zone-index-all:hover span:last-child,.zone-index-all:focus-visible span:last-child{transform:translateX(4px)}
.zone-index li+li{border-top:1px solid var(--line)}
.zone-index button{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:12px 16px;
  text-align:left;
  transition:background .2s;
}
.zone-index button::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--zone-color);
  transform:scaleY(0);
  transition:transform .22s;
}
.zone-index button:hover,
.zone-index button:focus-visible,
.zone-index button.is-hovered{background:color-mix(in srgb,var(--zone-color) 8%,#fff)}
.zone-index button:hover::before,
.zone-index button.is-hovered::before,
.zone-index button.is-active::before{transform:scaleY(1)}
.zone-index button.is-active{background:var(--navy-deep)}
.zone-index img{
  width:64px;
  height:42px;
  object-fit:cover;
  background:var(--navy-deep);
}
.zone-index .zone-index-text{min-width:0}
.zone-index strong{
  display:block;
  overflow:hidden;
  color:var(--navy);
  font-size:.72rem;
  font-weight:400;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.zone-index small{
  display:block;
  margin-top:4px;
  color:var(--ink-faint);
  font-size:.56rem;
  letter-spacing:.04em;
}
.zone-index button.is-active strong{color:#fff}
.zone-index button.is-active small{color:rgba(255,255,255,.55)}
.zone-index-number{
  position:absolute;
  z-index:1;
  left:16px;
  top:12px;
  min-width:20px;
  padding:2px 5px;
  background:rgba(0,30,43,.82);
  color:var(--gold);
  font-size:.52rem;
  font-weight:500;
  letter-spacing:.08em;
  text-align:center;
}

/* сноска под схемой */
.zones-note{
  display:flex;
  flex-wrap:wrap;
  gap:8px 32px;
  margin-top:18px;
  color:var(--ink-faint);
  font-size:.66rem;
  line-height:1.6;
}
.zones-note b{color:var(--ink-soft);font-weight:500}

/* ---------- каталог участков ---------- */
.zone-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
}
.zone-card{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  background:var(--white);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .3s;
}
.zone-card:hover,.zone-card:focus-within,.zone-card.is-hovered{transform:translateY(-5px);box-shadow:0 22px 54px rgba(0,43,60,.12)}
.zone-card.is-active{border-color:var(--zone-color);box-shadow:0 22px 54px rgba(0,43,60,.14)}
.zone-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--navy-deep)}
.zone-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.3,1)}
.zone-card:hover .zone-card-media img{transform:scale(1.05)}
.zone-card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,30,43,.58),transparent 54%);
}
.zone-card-media em{
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  padding:8px 13px;
  background:var(--zone-color);
  color:#fff;
  font-size:.58rem;
  font-style:normal;
  font-weight:500;
  letter-spacing:.12em;
}
.zone-card-media b{
  position:absolute;
  z-index:1;
  right:14px;
  bottom:13px;
  color:var(--gold);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.zone-card-body{display:flex;flex:1;flex-direction:column;padding:20px 22px 22px}
.zone-card-cat{color:var(--teal-dark);font-size:.57rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.zone-card h3{margin-top:13px;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.14;letter-spacing:-.03em}
.zone-card-uz{margin-top:7px;color:var(--ink-faint);font-size:.62rem;letter-spacing:.04em}
.zone-card-lead{margin-top:13px;color:var(--ink-soft);font-size:.76rem;line-height:1.62}
.zone-card-figures{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--navy);
  font-size:.68rem;
}
.zone-card-figures b{font-weight:400}
.zone-card-figures span{color:var(--ink-faint);font-size:.62rem}
.zone-card-more{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:20px;
  color:var(--teal-dark);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.zone-card-more::after{content:"";position:absolute;inset:0}
.zone-card-more i{font-size:1rem;font-style:normal;font-weight:300;transition:transform .2s}
.zone-card:hover .zone-card-more i{transform:translateX(4px)}
.zone-card-more:focus-visible{outline-offset:-2px}

/* ---------- выдвижная карточка ---------- */
.zone-scrim{
  position:fixed;
  z-index:110;
  inset:0;
  background:rgba(0,18,26,.58);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s,visibility .32s;
  backdrop-filter:blur(3px);
}
.zone-scrim.is-open{opacity:1;visibility:visible}
.zone-drawer{
  position:fixed;
  z-index:120;
  top:0;
  right:0;
  width:min(620px,94vw);
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(253,218,114,.35) transparent;
  background:var(--navy-deep);
  color:#fff;
  transform:translateX(101%);
  visibility:hidden;
  transition:transform .42s cubic-bezier(.22,.8,.28,1),visibility .42s;
  box-shadow:-24px 0 64px rgba(0,0,0,.4);
}
.zone-drawer.is-open{transform:none;visibility:visible}
.zone-drawer-inner{padding:clamp(24px,3.4vw,44px) clamp(22px,3.4vw,52px) clamp(48px,6vw,72px)}
.zone-drawer-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.zone-drawer-count{color:var(--gold);font-size:.66rem;letter-spacing:.18em}
.zone-drawer-count span{color:rgba(255,255,255,.34)}
.zone-drawer-nav{display:flex;gap:8px}
.zone-drawer-nav button{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:#fff;
  font-size:1rem;
  font-weight:300;
  transition:border-color .18s,color .18s;
}
.zone-drawer-nav button:hover,.zone-drawer-nav button:focus-visible{border-color:var(--gold);color:var(--gold)}
.zone-drawer-hero{
  width:100%;
  aspect-ratio:2.1/1;
  margin:24px 0 0;
  object-fit:cover;
  background:var(--navy-black);
}
.zone-drawer-cat{
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:26px;
  color:var(--gold);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.zone-drawer-cat::before{content:"";width:32px;height:1px;background:currentColor;flex:none}
.zone-drawer h2{margin-top:14px;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.04}
.zone-drawer-uz{margin-top:10px;color:rgba(255,255,255,.44);font-size:.66rem;letter-spacing:.05em}
.zone-drawer-lead{
  max-width:46ch;
  margin-top:18px;
  color:rgba(255,255,255,.74);
  font-size:.88rem;
  line-height:1.68;
}
.zone-drawer-sect{
  margin-top:32px;
  color:var(--gold);
  font-size:.58rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.zone-drawer-rows{margin-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.zone-drawer-rows li{
  padding:13px 2px;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.82);
  font-size:.8rem;
  line-height:1.5;
}
.zone-drawer-rows li.is-figure{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
}
.zone-drawer-rows li.is-figure b{font-weight:400}
.zone-drawer-rows li.is-figure em{
  color:rgba(255,255,255,.44);
  font-size:.64rem;
  font-style:normal;
  letter-spacing:.04em;
  text-align:right;
}
.zone-drawer-rows li.is-empty{color:rgba(255,255,255,.5);font-size:.74rem}
.zone-drawer-rows li.is-project{padding:0}
.zone-drawer-objects a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:52px;
  padding:16px 2px;
  color:white;
  text-decoration:none;
  transition:color .18s,background .18s;
}
.zone-drawer-objects a span:first-child{min-width:0;overflow-wrap:anywhere}
.zone-drawer-objects a span[aria-hidden]{flex:none;color:var(--gold);font-size:1.1rem}
.zone-drawer-objects a:hover{color:var(--gold);background:rgba(255,255,255,.04)}
.zone-drawer-objects a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;color:var(--gold)}
.zone-drawer-cta{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin-top:34px;
  padding:15px 28px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background .2s,color .2s;
}
.zone-drawer-cta:hover{background:var(--gold);color:var(--navy-deep)}
.zone-drawer-project{margin-top:22px;background:var(--gold);color:var(--navy-deep)}
.zone-drawer-project:hover{background:transparent;color:var(--gold)}

@media (max-width:1080px){
  .zone-scheme{grid-template-columns:1fr}
  .zone-index{min-height:0;border-left:0;border-top:1px solid var(--line)}
  .zone-index-inner{position:static}
  .zone-index ol{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:none;
  }
  .zone-index li+li{border-top:0}
  .zone-index li{border-top:1px solid var(--line)}
  .zone-index li:nth-child(even){border-left:1px solid var(--line)}
  .zone-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zones-head{grid-template-columns:1fr;align-items:start;gap:16px}
}

@media (max-width:760px){
  .zones-switch{display:grid;grid-template-columns:1fr 1fr}
  .zones-switch button{min-height:48px;padding:12px 8px;font-size:.58rem;letter-spacing:.08em}
  .zones-hero-grid{grid-template-columns:1fr;gap:26px}
  .zones-hero-grid>p{padding-bottom:0;font-size:.84rem}
  .zones-totals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zone-index ol{grid-template-columns:1fr}
  .zone-index li:nth-child(even){border-left:0}
  .zone-grid{grid-template-columns:1fr}
  .zone-tools{right:12px;bottom:12px}
  .zone-tools button{width:38px;height:38px}
  .zone-hint{left:12px;bottom:12px;padding:9px 12px;font-size:.55rem}
  .zone-area polygon{stroke-width:4}
  .zone-drawer-inner{padding-bottom:64px}
}

@media (prefers-reduced-motion:reduce){
  .zone-drawer,.zone-scrim,.zone-card,.zone-card-media img{transition:none}
}