/* ==================== ФИРМЕННЫЕ ЦВЕТА И КНОПКИ ==================== */
.text-gold { color: #e3b23c !important; }
.text-gold-em { color: #f6c646; font-weight: 600; }

.btn-outline-gold,
.btn-gold-outline {
  border: 1px solid #e3b23c;
  color: #e3b23c;
  background-color: transparent;
  font-weight: 500;
  border-radius: 0.5rem;
  transition: 0.2s ease-in-out;
}
.btn-outline-gold:hover,
.btn-gold-outline:hover {
  background-color: #e3b23c;
  color: #121212;
}

h1, .display-6 { color: #e3b23c !important; }

/* ==================== КАРТОЧКА ОФЕРТЫ ==================== */
/*
  Использование !important:
  Флаг !important используется для принудительного применения стилей.
  Если вы видите "белые поля", это может быть связано с тем, что другой CSS-файл
  загружается позже или имеет более специфичные селекторы, переопределяющие эти правила.
  В идеале, стоит избегать частого использования !important,
  решая проблемы специфичности и порядка загрузки CSS.
  Убедитесь, что этот CSS-фафайл загружается ПОСЛЕ любых других стилей,
  особенно после Bootstrap или вашей основной темы.
  Также убедитесь, что родительский элемент имеет класс 'node--type-realty'.
*/
.node--type-realty .card-offer {
  background-color: #1e1e1e !important;
  color: #fff !important;
  border-radius: 1rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25) !important;
  margin: 0 !important;
}

.node--type-realty .card-offer table {
  width: 100% !important;
  background-color: transparent !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
}

.node--type-realty .card-offer table td,
.node--type-realty .card-offer table th {
  background: none !important;
  border: none !important;
  padding: 0.25rem 0.5rem !important;
  color: #f5f5f5 !important;
  line-height: 1.4 !important;
  font-size: 1rem !important;
}

.node--type-realty .card-offer table th {
  color: #cccccc !important;
  width: 40% !important;
  white-space: nowrap !important;
}

.node--type-realty .card-offer svg {
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.3rem !important;
  vertical-align: middle !important;
  fill: #e3b23c !important;
}

/* ==================== ГАЛЕРЕЯ ==================== */
/*
  Если фотографии "огромные и не в ряд", это означает, что правила flexbox не применяются.
  Убедитесь, что .gallery-row является flex-контейнером, а .gallery-item правильно
  рассчитывает ширину и размещение. Как и выше, проверьте порядок загрузки CSS и специфичность.
*/
.node--type-realty .gallery-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.node--type-realty .gallery-item {
  flex: 1 1 calc(33.333% - 1rem) !important;
  max-width: calc(33.333% - 1rem) !important;
  aspect-ratio: 4/3 !important; /* Сохраняет соотношение сторон изображения */
  overflow: hidden !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2) !important;
}

.node--type-realty .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important; /* Обрезает изображение, чтобы оно заполняло контейнер */
  border-radius: inherit !important;
  display: block !important;
}

/* Адаптивность */
@media (max-width: 992px) {
  .node--type-realty .gallery-item {
    flex: 1 1 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}
@media (max-width: 576px) {
  .node--type-realty .gallery-item {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ==================== ВКЛАДКИ ==================== */
.node--type-realty .tab-pane {
  color: #e0e0e0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.node--type-realty .tab-pane h2 {
  color: #e3b23c !important;
  font-size: 1.25rem !important;
}

/* ==================== ГАЛЕРЕЯ ==================== */
.node--type-realty .gallery-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.node--type-realty .gallery-item {
  flex: 1 1 calc(33.333% - 1rem) !important;
  max-width: calc(33.333% - 1rem) !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2) !important;
}

.node--type-realty .gallery-item img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  display: block !important;
}

@media (max-width: 992px) {
  .node--type-realty .gallery-item {
    flex: 1 1 calc(50% - 1rem) !important;
    max-width: calc(50% - 1rem) !important;
  }
}
@media (max-width: 576px) {
  .node--type-realty .gallery-item {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ==================== ВКЛАДКИ ==================== */
.node--type-realty .tab-pane {
  color: #e0e0e0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.node--type-realty .tab-pane h2 {
  color: #e3b23c !important;
  font-size: 1.25rem !important;
}

/* ==================== ХЛЕБНЫЕ КРОШКИ ==================== */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #aaa;
  padding: 0 0.5rem;
}
.breadcrumb-item a { color: #e3b23c; }
.breadcrumb-item.active { color: #bbb; }

.breadcrumb.custom-breadcrumb {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 1rem;
  gap: 0.5rem;
}
.breadcrumb.custom-breadcrumb li { color: #e3b23c; position: relative; }
.breadcrumb.custom-breadcrumb li:last-child::after { content: ""; margin: 0; }
.breadcrumb.custom-breadcrumb a {
  text-decoration: none;
  color: #fcd34d;
  transition: color 0.2s;
}
.breadcrumb.custom-breadcrumb a:hover { color: #fff; }
.breadcrumb.custom-breadcrumb .active {
  color: #ffffff;
  font-weight: 600;
}

/* ==================== ДРУГОЕ ==================== */
.table-dark th, .table-dark td {
  color: #fff !important;
}