/* === Карточка фиксированной высоты === */
.card.h-100 {
  /* общая высота карточки (подгони под себя) */
  height: 420px;
  display: flex;
  flex-direction: column;
}

/* тело карточки растягиваем, чтобы низ был на одном уровне */
.card.h-100 .card-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  /* пусть тело забирает оставшееся пространство */
  flex: 1 1 auto;
}

/* === Шапка с картинкой фиксированной высоты + аккуратный кроп === */
.card .card-img-top {
  /* фиксированная высота области с фото */
  height: 250px;
  position: relative;       /* у тебя уже есть position-relative в разметке, но на всякий */
  overflow: hidden;         /* прячем лишнее */
}

/* само изображение заполняет контейнер и обрезается как cover */
.card .card-img-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* аккуратный кроп */
  object-position: center;  /* по центру */
  display: block;
}

/* лёгкий ховер (по желанию) */
.card.h-100 {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.h-100:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(0,0,0,.12);
}



/* === ЕДИНЫЙ «АВИТО»-БОКС ДЛЯ ГАЛЕРЕИ === */
#listing-detail-hero-1 .gallery-frame {
  max-width: 980px;      /* под стиль сайта: 880–1200px */
  margin: 0 auto 16px;
  background: #fff;
  padding: 12px 12px 14px;   /* место и под миниатюры */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  position: relative;
}

/* верхняя область с большим фото */
#listing-detail-hero-1 .hero-area {
  height: 420px; /* главная высота; можно 360–460 */
}

/* протягиваем высоту внутрь swiper */
#listing-detail-hero-1 .swiper-container,
#listing-detail-hero-1 .swiper,
#listing-detail-hero-1 .swiper-wrapper,
#listing-detail-hero-1 .swiper-slide { height: 100%; }

/* большое фото */
#listing-detail-hero-1 .listing-hero-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; border-radius: 10px;
}

/* кнопки и точки */
#listing-detail-hero-1 .swiper-button-prev,
#listing-detail-hero-1 .swiper-button-next {
  width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
#listing-detail-hero-1 .swiper-button-prev:after,
#listing-detail-hero-1 .swiper-button-next:after { font-size: 18px; color: #1A202C; }
#listing-detail-hero-1 .swiper-pagination { bottom: 10px !important; }
#listing-detail-hero-1 .swiper-pagination-bullet { width: 10px; height: 10px; opacity: .5; }
#listing-detail-hero-1 .swiper-pagination-bullet-active { opacity: 1; }

/* === ЛЕНТА МИНИАТЮР — ВНУТРИ ТОГО ЖЕ БОКСА === */
#listing-detail-hero-1 .thumbs-wrap {
  margin-top: 10px;
  display: flex; justify-content: center;
}

#listing-detail-hero-1 .thumbs-swiper {
  width: auto;          /* ширина по контенту */
  height: 92px;
  margin: 0 auto;
  overflow: visible;
}

/* НЕ трогаем .swiper-wrapper (чтобы не сломать transform) */

#listing-detail-hero-1 .thumbs-swiper .swiper-slide {
  width: 120px;
  height: 100%;
  margin: 0 4px;
  opacity: .6;
  cursor: pointer;
}

#listing-detail-hero-1 .listing-thumb-img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover; object-position: center;
  border-radius: 8px;
}

#listing-detail-hero-1 .thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


/* ==== Галерея внутри карточки на листинге ==== */
.properties .card .card-body {
  position: relative;
  z-index: 2;
}
.properties .card .card-img-top { overflow: hidden; }

.properties .card .card-gallery {
  width: 100%;
  height: 220px;            /* подгони: 180–260 */
  border-radius: 8px;
}

.properties .card .card-gallery .swiper-wrapper,
.properties .card .card-gallery .swiper-slide { height: 100%; }

.properties .card .card-gallery-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  border-radius: 8px;
}

.properties .card .card-gallery .swiper-button-prev,
.properties .card .card-gallery .swiper-button-next {
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}
.properties .card .card-gallery .swiper-button-prev:after,
.properties .card .card-gallery .swiper-button-next:after {
  font-size: 14px; color: #1A202C;
}

.properties .card .card-gallery .swiper-pagination { bottom: 6px !important; }
.properties .card .card-gallery .swiper-pagination-bullet {
  width: 8px; height: 8px; opacity: .6;
}
.properties .card .card-gallery .swiper-pagination-bullet-active { opacity: 1; }





/* адаптив */
/* ====== АДАПТИВ РАМКИ И ВЫСОТ ====== */

/* планшеты */
@media (max-width: 992px) {
  #listing-detail-hero-1 .gallery-frame { max-width: 860px; padding: 10px 10px 12px; }
  #listing-detail-hero-1 .hero-area { height: 360px; }
  #listing-detail-hero-1 .thumbs-swiper { height: 80px; }
  #listing-detail-hero-1 .thumbs-swiper .swiper-slide { width: 110px; }
}

/* большие телефоны */
@media (max-width: 768px) {
  #listing-detail-hero-1 .gallery-frame { max-width: 680px; padding: 8px 8px 10px; }
  #listing-detail-hero-1 .hero-area { height: 300px; }
  #listing-detail-hero-1 .thumbs-swiper { height: 74px; }
  #listing-detail-hero-1 .thumbs-swiper .swiper-slide { width: 100px; }
}

/* телефоны */
@media (max-width: 576px) {
  #listing-detail-hero-1 .gallery-frame { max-width: 94vw; padding: 8px; border-radius: 10px; }
  #listing-detail-hero-1 .hero-area { height: 56vw; }  /* ~соотношение 16:9 */
  #listing-detail-hero-1 .listing-hero-img { border-radius: 8px; }

  /* превью делаем чуть ниже и уже */
  #listing-detail-hero-1 .thumbs-swiper { height: 66px; }
  #listing-detail-hero-1 .thumbs-swiper .swiper-slide { width: 86px; margin: 0 3px; }
}

/* очень узкие экраны */
@media (max-width: 380px) {
  #listing-detail-hero-1 .hero-area { height: 52vw; }
  #listing-detail-hero-1 .thumbs-swiper { height: 60px; }
  #listing-detail-hero-1 .thumbs-swiper .swiper-slide { width: 78px; margin: 0 3px; }
}

/* если хочешь, чтобы на очень узких экранах фото не резалось — включай contain */
@media (max-width: 420px) {
  #listing-detail-hero-1 .listing-hero-img {
    object-fit: cover;   /* поставь contain, если важны края фото */
  }
}


/* --- Временно убираем стрелки у мини-слайдеров карточек --- */
.card-gallery .swiper-button-prev,
.card-gallery .swiper-button-next {
  display: none !important;
}