/* ===== ОБЩИЕ SKELETON-СТИЛИ ===== */

.property-card--skeleton {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: linear-gradient(
    145deg,
    var(--color-skeleton-base),
    var(--color-skeleton-highlight)
  );
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.property-card__body--skeleton {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Блоки-«кости» */

.skeleton-box {
  width: 100%;
  height: 100%;
  background: var(--color-skeleton-base);
  position: relative;
  overflow: hidden;
}

/* линии внутри карточки */

.skeleton-line {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--color-skeleton-base);
  position: relative;
  overflow: hidden;
}

.skeleton-line--lg {
  height: 14px;
  margin-bottom: 6px;
}

.skeleton-line--md {
  width: 70%;
}

.skeleton-line--sm {
  width: 45%;
}

/* shimmer-анимация */

.skeleton-box::before,
.skeleton-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: translateX(-100%);
  animation: rentkit-skeleton-shimmer 1.4s infinite;
}

@keyframes rentkit-skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  60% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(120%);
  }
}

/* чтобы скелетоны не прыгали по высоте относительно реальных карточек */

.property-card__media--skeleton {
  aspect-ratio: 4 / 3;
}

/* небольшие адаптивные корректировки */

@media (max-width: 480px) {
  .property-card__body--skeleton {
    padding: 12px;
  }

  .skeleton-line--lg {
    height: 12px;
  }
}