/* Секция «Комплекс»: генплан с зонами корпусов и карточка выбранного корпуса.
   Полигоны рисуются в системе координат 0..100, поэтому картинка может быть
   любой ширины, а разметка не поедет. */

.cx__bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.cx__views { display: flex; gap: 6px; }
.cx__chip {
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--bt-line);
  color: var(--bt-text-2); font-size: 13px; font-weight: 600;
}
.cx__chip:hover { color: var(--bt-text); border-color: var(--bt-text-3); }
.cx__chip.is-on { background: var(--bt-primary); border-color: var(--bt-primary); color: #16150F; }
.cx__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--bt-text-3); }
.cx__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cx-key { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.cx-key--sale { background: rgba(52, 211, 153, .5); border: 1px solid #34D399; }
.cx-key--none { background: transparent; border: 1px solid var(--bt-text-3); }
.cx-key--soon { background: transparent; border: 1px dashed var(--bt-text-3); }

.cx { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }
.cx > * { min-width: 0; }
.cx__map {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bt-line); background: var(--bt-surface);
  aspect-ratio: 1920 / 1274;
}
.cx__map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx--scheme .cx__map {
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(232,133,12,.08), transparent 60%),
    var(--bt-surface-2);
}

/* зоны корпусов */
.cx-zone {
  fill: rgba(52, 211, 153, .16);
  stroke: #34D399; stroke-width: .5; vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill .15s, stroke-width .15s;
}
.cx-zone:hover, .cx-zone:focus-visible { fill: rgba(52, 211, 153, .4); stroke-width: 2; }
.cx-zone:focus-visible { outline: none; stroke: #fff; stroke-width: 3; }
.cx-zone--none { fill: rgba(255, 255, 255, .06); stroke: var(--bt-text-3); }
.cx-zone--none:hover { fill: rgba(255, 255, 255, .16); }
.cx-zone--soon { fill: none; stroke: var(--bt-text-3); stroke-dasharray: 3 2; }
.cx-zone--soon:hover { fill: rgba(255, 255, 255, .1); }
.cx-zone.is-on { fill: rgba(232, 133, 12, .45); stroke: var(--bt-primary); stroke-width: 2.5; }
.cx--scheme .cx-zone { fill: rgba(52, 211, 153, .22); }
.cx--scheme .cx-zone--soon { fill: rgba(255, 255, 255, .04); }
.cx--scheme .cx-zone.is-on { fill: rgba(232, 133, 12, .45); stroke: var(--bt-primary); }
/* блок E стоит на соседнем участке: на схеме он есть, но отделён подписью */
.cx-plot {
  position: absolute; left: 2%; bottom: 3%;
  font-size: 11px; color: var(--bt-text-3); letter-spacing: .04em; text-transform: uppercase;
}

.cx__tags { position: absolute; inset: 0; pointer-events: none; }
.cx-tag {
  position: absolute; transform: translate(-50%, -50%);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: rgba(12, 13, 16, .72); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.cx--scheme .cx-tag { background: rgba(12, 13, 16, .55); }

/* карточка корпуса */
.cx-card {
  padding: 14px; border-radius: 12px; font-size: 13.5px;
  background: var(--bt-surface); border: 1px solid var(--bt-line);
}
.cx-card--empty { color: var(--bt-text-3); }
.cx-card--sale { border-color: var(--bt-primary); }
.cx-card__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; }
.cx-card__st { font-size: 11.5px; color: var(--bt-text-3); }
.cx-card--sale .cx-card__st { color: var(--bt-success); }
.cx-card__p { color: var(--bt-text-2); margin: 2px 0 10px; }
.cx-card__r { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.cx-card__r span { color: var(--bt-text-3); }
.cx-card__note { margin: 10px 0; font-size: 12.5px; color: var(--bt-text-3); line-height: 1.55; }
.cx-card .bt-btn { margin-top: 10px; width: 100%; }

/* корпуса, которых нет на рендере */
.cx__off { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
/* Ширину карточке задаём явно. Без неё картинка внутри задавала flex-basis собственным
   размером в 1920 px, и один корпус из пяти занимал больше места, чем генплан со всеми
   остальными. Часть 3 промта 09. */
.cx-off {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; cursor: pointer; text-align: left;
  background: var(--bt-surface); border: 1px dashed var(--bt-line); border-radius: 12px;
  color: var(--bt-text-2); font: inherit; font-size: 12.5px;
  flex: 0 1 300px; min-width: 190px; max-width: 340px;
}
.cx-off:hover { border-color: var(--bt-text-3); }
.cx-off b { color: var(--bt-text); font-size: 14px; }
.cx-off__n { color: var(--bt-success); }
.cx-off em { font-style: normal; font-size: 11.5px; color: var(--bt-text-3); }
.cx__src { margin-top: 10px; font-size: 11.5px; color: var(--bt-text-3); line-height: 1.55; }

@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; }
  /* палец толще курсора: на телефоне зоны получают запас по обводке */
  .cx-zone { stroke-width: 1.4; }
  .cx-tag { font-size: 10.5px; padding: 2px 6px; }
}


/* Корпус E на генплане не показан: он на соседнем участке. Даём его отдельно,
   со своим рендером, и объясняем это одной строкой, а не оставляем карточку болтаться. */
.cx__offnote { margin-top: 14px; font-size: 12.5px; color: var(--bt-text-3); }
/* Кадр в пропорции 3 на 2, как в ленте проектов: почти квадрат в полный экран корпусу,
   который равноправен с C и D, не полагается. Часть 3 промта 09. */
.cx-off__ph {
  display: block; width: 100%; aspect-ratio: 3 / 2; max-height: 210px; object-fit: cover;
  border-radius: 8px; margin-bottom: 9px;
}
.cx-off.is-on { border-color: var(--bt-primary); background: var(--bt-primary-soft); }

/* подписи корпусов не должны тянуть скролл: они лежат поверх карты */
.cx__tags { overflow: hidden; }


/* Список корпусов под генпланом: только телефон, зона нажатия не меньше 44 px */
.cx__mob { display: none; }
@media (max-width: 700px) {
  .cx__mob { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
  .cx-mob {
    flex: 1 1 56px; min-width: 56px; min-height: 44px; padding: 6px 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border-radius: 10px; cursor: pointer;
    background: var(--bt-surface); border: 1px solid var(--bt-line); color: var(--bt-text-2); font: inherit;
  }
  .cx-mob b { font: 800 15px/1 var(--bt-font-display); }
  .cx-mob span { font-size: 12px; color: var(--bt-text-3); }
  .cx-mob.is-on { background: var(--bt-primary); border-color: var(--bt-primary); color: #16150F; }
  .cx-mob.is-on span { color: rgba(22,21,15,.75); }
  /* Подписи поверх рендера на телефоне только читаются, нажимать в них бесполезно */
  .cx__tags { pointer-events: none; }
  .cx-tag, .cx-card__st, .cx__src, .cx-card__note, .cx-off span, .cx-off em { font-size: 12px; }
}