@charset "UTF-8";
/*
 * Сторінка об'єкта. Еталон — Object.dc.html.
 *
 * У макеті все розставлено абсолютними координатами (експорт із Figma).
 * Тут це дві колонки: основна (галерея, ціна, опис) і липка бічна картка агента.
 */

.object {
  display: grid;
  grid-template-columns: minmax(0, 885fr) minmax(0, 443fr);
  gap: 32px;
  align-items: start;
  padding-block: 32px;
}

.object__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.object__aside {
  position: sticky;
  top: 24px;
  min-width: 0;
}

/* -------------------------------------------------------------- галерея --- */

.object-gallery {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--c-line);
}

.object-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  /*
   * overflow-y задаємо явно: за специфікацією, якщо одну вісь зробити auto,
   * друга з visible теж стає auto — і галерея починала прокручуватись
   * колесом по вертикалі замість сторінки.
   */
  overflow-x: auto;
  overflow-y: hidden;
  /* Рядок фіксованої висоти — інакше висота слайда тягнеться за картинкою. */
  grid-template-rows: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  aspect-ratio: 885 / 563;
}

.object-gallery__track::-webkit-scrollbar {
  display: none;
}

.object-gallery__slide {
  scroll-snap-align: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  cursor: zoom-in;
}

.object-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-gallery__badge {
  position: absolute;
  left: 24px;
  top: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: var(--c-ink);
}

.object-gallery__count {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 45px;
  background: #e6ddc5;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.09), 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  color: var(--c-ink);
}

.object-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: rgba(249, 249, 249, 0.63);
  color: var(--c-ink);
  cursor: pointer;
  transition: background 0.2s ease;
}

.object-gallery__nav:hover {
  background: rgba(255, 255, 255, 0.9);
}

.object-gallery__nav--prev {
  left: 16px;
}

.object-gallery__nav--next {
  right: 16px;
}

.object-gallery__nav svg {
  width: 12px;
  height: 22px;
}

/* ----------------------------------------------------------- ціна, мета --- */

/*
 * Заголовний рядок: ціна ліворуч, службова мета праворуч — в одну лінію.
 * На вузьких екранах мета переходить під ціну (flex-wrap), а не ламається
 * посередині.
 */
.object__headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 24px;
}

.object__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
}

.object__price {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  color: #000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.object__price-sqm {
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.2;
  color: var(--c-body);
  white-space: nowrap;
}

.object__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  line-height: 1.48;
  color: var(--c-muted);
}

.object__article {
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

.object__meta-dot {
  width: 2px;
  height: 2px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-muted);
}

.object__share {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.12;
  color: #000;
  white-space: nowrap;
  cursor: pointer;
}

.object__share:hover {
  color: var(--c-accent);
}

.object__share svg {
  width: 20px;
  height: 21px;
  flex: 0 0 auto;
}

.object__taxonomy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  color: #000;
}

.object__taxonomy-sep {
  width: 1px;
  height: 12px;
  background: var(--c-line-strong);
}

/* Блок характеристик */

.object__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding: 28px 24px;
  border: 1px solid var(--c-line);
}

.object__spec-label {
  display: block;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.16em;
  color: #000;
  text-transform: uppercase;
}

.object__spec-value {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-size: 16px;
  color: #000;
}

.object__spec-value svg {
  /* Слот однакової ширини; пропорції тримає сам viewBox. */
  width: 18px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--c-body);
}

.object__section-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.2;
  color: var(--c-navy);
}

.object__description h2 {
  font-weight: 700;
  font-size: 24px;
  line-height: 1.12;
  color: #000;
  font-family: var(--f-body);
}

/* ---------------------------------------------------------- картка агента - */

.object-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 45px 32px 36px;
  border-radius: 48px;
  background: var(--c-bg);
  text-align: center;
}

.object-agent__title {
  font-weight: 700;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #000;
}

.object-agent__text {
  font-size: 16px;
  line-height: 1.25;
  color: #000;
}

.object-agent__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-line);
}

.object-agent .btn {
  width: 100%;
  min-height: 52px;
  margin-top: 8px;
}

.object-agent__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--c-ink);
}

.object-agent__phone svg {
  width: 17px;
  height: 17px;
  color: var(--c-navy);
}

/* ---------------------------------------------------------------- мапа ---- */

.object-map {
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: var(--c-line);
}

.object-map__canvas {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------- схожа нерухомість ---- */

.object-similar .slider__track {
  --slide-w: 332px;
}

.object-mini {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: 18px;
  background: var(--c-bg);
  transition: box-shadow 0.25s ease;
}

.object-mini:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.object-mini__cover {
  position: relative;
  display: block;
  aspect-ratio: 324 / 252;
  overflow: hidden;
  border-radius: 16px 8px 8px 8px;
  background: var(--c-line);
}

.object-mini__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-mini__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.object-mini__thumbs img {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: 8px;
}

.object-mini__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}

.object-mini__price {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #000;
  font-variant-numeric: tabular-nums;
}

.object-mini__sqm {
  font-size: 14px;
  color: var(--c-body);
}

.object-mini__address {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
}

.object-mini__more {
  font-size: 12px;
  color: var(--c-accent);
}

/* --------------------------------------------------------- хлібні крихти -- */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--c-muted);
}

.breadcrumbs a:hover {
  color: var(--c-ink);
}

.breadcrumbs__sep {
  width: 1px;
  height: 12px;
  background: var(--c-line-strong);
}

/* ------------------------------------------------------------- адаптив ---- */

@media (max-width: 1023px) {
  .object {
    grid-template-columns: minmax(0, 1fr);
  }

  .object__aside {
    position: static;
  }

  .object-agent {
    border-radius: 32px;
    padding: 32px 24px;
  }
}

@media (max-width: 640px) {
  .object-gallery {
    border-radius: 16px;
  }

  .object-gallery__count,
  .object-gallery__nav {
    display: none;
  }

  .object__specs {
    padding: 20px 16px;
    gap: 16px;
  }

  .object-similar .slider__track {
    --slide-w: 84vw;
  }
}

@media (max-width: 600px) {
  /*
   * На вузькому екрані мета не влазить у рядок із ціною. Крапки-роздільники
   * прибираємо: інакше при переносі одна з них лишається висіти в кінці рядка.
   */
  .object__meta {
    gap: 12px;
    width: 100%;
  }

  .object__meta-dot {
    display: none;
  }
}

/* Кнопка «на весь екран» — поруч із лічильником фото. */
.object-gallery__expand {
  position: absolute;
  right: 24px;
  top: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(249, 249, 249, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--c-ink);
  cursor: pointer;
  transition: background 0.2s ease;
}

.object-gallery__expand:hover {
  background: #fff;
}

.object-gallery__expand svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------- повноекранний перегляд ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: rgba(5, 12, 20, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  color: #fff;
  font-family: var(--f-ui);
  font-size: 14px;
}

.lightbox__counter {
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.lightbox__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lightbox__tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.lightbox__tools button:hover:not([disabled]) {
  background: rgba(255, 255, 255, 0.24);
}

.lightbox__tools button[disabled] {
  opacity: 0.35;
  cursor: default;
}

.lightbox__tools svg {
  width: 18px;
  height: 18px;
}

.lightbox__zoom {
  min-width: 52px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.lightbox__stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0 20px;
  overflow: hidden;
}

/* Знімок вписується цілком; масштаб і зсув — через transform. */
.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  cursor: zoom-in;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.lightbox__image.is-zoomed {
  cursor: grab;
  transition: none;
}

.lightbox__image.is-zoomed:active {
  cursor: grabbing;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.26);
}

.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }

.lightbox__nav svg {
  width: 13px;
  height: 24px;
}

.lightbox__thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 14px 20px 18px;
  scrollbar-width: thin;
}

.lightbox__thumbs button {
  flex: 0 0 auto;
  width: 84px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  opacity: 0.45;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.lightbox__thumbs button:hover { opacity: 0.8; }

.lightbox__thumbs button.is-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #fff;
}

.lightbox__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .lightbox__nav { display: none; }
  .lightbox__thumbs button { width: 64px; height: 46px; }
  .lightbox__stage { padding: 0 8px; }
}