/* Ghost (skeleton) loading for the property search results (see assets/js/results-ghost.js).
 * Plain CSS: it does not depend on which Tailwind classes happen to be compiled. */

/* The grid of placeholder cards: same container width and columns as the real results grid. */
.ha-ghost {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .ha-ghost {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .ha-ghost {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ha-ghost__card {
  display: flex;
  flex-direction: column;
}

/* Soft grey blocks that breathe gently, as in the reference. */
.ha-ghost__image,
.ha-ghost__bar {
  background: #f3f3f3;
  animation: ha-ghost-pulse 1.4s ease-in-out infinite;
}

.ha-ghost__image {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

.ha-ghost__bar {
  height: 16px;
  margin-top: 12px;
  border-radius: 8px;
}

/* The card text: type / location, price, specs, reference. */
.ha-ghost__bar--tag {
  width: 70%;
  margin-top: 16px;
}

.ha-ghost__bar--price {
  width: 38%;
  height: 20px;
}

.ha-ghost__bar--specs {
  width: 62%;
}

.ha-ghost__bar--ref {
  width: 32%;
  height: 12px;
  margin-bottom: 8px;
}

@keyframes ha-ghost-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.55;
  }
}

/* While loading: the real cards (and the pager) step aside; the result count becomes a grey bar. */
.ha-loading .view-content,
.ha-loading .view-empty,
.ha-loading .pager,
.ha-loading nav.pager {
  display: none;
}

.ha-loading .ha-search-heading__count {
  display: block;
  width: 110px;
  height: 18px;
  border-radius: 6px;
  background: #f3f3f3;
  color: transparent;
  user-select: none;
  animation: ha-ghost-pulse 1.4s ease-in-out infinite;
}

/* Card images: a grey block behind them while they load (the page itself arrives as ready HTML). */
.ha-img-ghost {
  background: #f3f3f3;
}

@media (prefers-reduced-motion: reduce) {
  .ha-ghost__image,
  .ha-ghost__bar,
  .ha-loading .ha-search-heading__count {
    animation: none;
  }
}