/* ── Stats Banner ────────────────────────────────────────── */
.stats-banner {
  background: var(--primary); color: #fff; padding: 1.75rem 0;
}
.stats-banner__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; text-align: center;
}
.stats-banner__num   { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.1; }
.stats-banner__label { font-size: .85rem; opacity: .8; margin-top: .2rem; display: block; }

/* ── Categories Grid ─────────────────────────────────────── */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
}
.category-card {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: 1.25rem .75rem; background: #fff; border-radius: var(--radius-xl);
  border: 2px solid var(--gray-100); text-decoration: none; color: var(--gray-700);
  transition: all var(--transition); text-align: center;
}
.category-card:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-card__icon {
  width: 48px; height: 48px; border-radius: var(--radius-lg);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: all var(--transition);
}
.category-card:hover .category-card__icon { background: var(--primary); color: #fff; }
.category-card__name  { font-size: .85rem; font-weight: 600; line-height: 1.2; }
.category-card__count { font-size: .75rem; color: var(--gray-400); }

/* ── Ad card extras ──────────────────────────────────────── */
.ad-card__vt-badge {
  position: absolute; bottom: .75rem; inset-inline-end: .75rem;
  background: rgba(0,0,0,.6); color: #fff;
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .85rem;
}
.ad-card__stats { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--gray-500); }
.ad-card__time  { color: var(--gray-400); }

/* ── Section CTA ─────────────────────────────────────────── */
.section__cta { text-align: center; margin-top: 2.5rem; }

/* ── Feature Cards ───────────────────────────────────────── */
.feature-card {
  text-align: center; padding: 2rem 1.5rem;
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow);
}
.feature-card__icon {
  width: 60px; height: 60px; border-radius: var(--radius-xl);
  background: var(--primary-light); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; margin: 0 auto 1.1rem;
}
.feature-card h3 { font-size: 1rem; margin-bottom: .5rem; }
.feature-card p  { font-size: .88rem; color: var(--gray-500); }

/* ── Blog card ───────────────────────────────────────────── */
.blog-card__img    { aspect-ratio: 16/9; object-fit: cover; }
.blog-card__title  { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.blog-card__title a:hover { color: var(--primary); }
.blog-card__excerpt{ font-size: .88rem; color: var(--gray-500); margin-bottom: .75rem; }
.blog-card__meta   { display: flex; gap: .85rem; font-size: .78rem; color: var(--gray-400); }
.blog-card__meta i { margin-inline-end: .25rem; }

/* ── CTA Banner ──────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, #0f2d6e 0%, #1a4fba 100%);
  padding: 4rem 0; text-align: center; color: #fff;
}
.cta-banner__content h2  { font-size: 1.9rem; margin-bottom: .6rem; }
.cta-banner__content p   { opacity: .85; font-size: 1rem; margin-bottom: 2rem; }
.cta-banner__actions     { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-outline-white {
  border: 2px solid rgba(255,255,255,.6); color: #fff; background: transparent;
}
.btn-outline-white:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ── Responsive Home ─────────────────────────────────────── */
@media (max-width: 768px) {
  .stats-banner__grid { grid-template-columns: repeat(2, 1fr); }
  .search-box { padding: 1.1rem; }
}
@media (max-width: 480px) {
  .stats-banner__grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Residence cards ───────────────────────────────────────── */
.residence-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.residence-card__cover {
    height: 180px; position: relative; overflow: hidden;
    background: linear-gradient(135deg,#1a4fba,#2563eb);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.residence-card__cover-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(255,255,255,.4);
}
.residence-card__promo {
    position: absolute; bottom: .6rem; inset-inline-start: .75rem;
    display: flex; align-items: center; gap: .4rem;
    background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
    border-radius: 2rem; padding: .25rem .65rem .25rem .25rem;
    max-width: calc(100% - 1.5rem);
}
.residence-card__promo img {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.residence-card__promo span {
    font-size: .72rem; color: #fff; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.residence-card__name {
    font-size: .95rem; font-weight: 700;
    color: var(--gray-900); margin-bottom: .35rem; line-height: 1.3;
}
.residence-card__location {
    font-size: .8rem; color: var(--gray-500);
    display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem;
}
.residence-card__types {
    display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem;
}
.residence-card__types span {
    background: var(--primary-light); color: var(--primary);
    border-radius: var(--radius-sm); padding: .15rem .5rem;
    font-size: .72rem; font-weight: 600;
}
.residence-card__price {
    margin-top: auto; padding-top: .5rem;
    border-top: 1px solid var(--gray-100);
}
.residence-card__price strong {
    font-size: 1rem; font-weight: 800; color: #da9831;
}
.residence-card:hover { transform: translateY(-3px); }