.ad-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg);
}

@media (min-width: 640px) {
  .ad-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

@media (min-width: 900px) {
  .ad-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .ad-grid { grid-template-columns: repeat(4, 1fr); }
}

.ad-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  /* مورد #7 task.md — کارت‌ها اجباراً هم‌ارتفاع باشند (grid با align-items:stretch ارتفاع ردیف را
     یکسان می‌کند؛ height:100% خود کارت را به همان ارتفاع می‌کشد). */
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* مورد #8 final-bug-fix.md — کارت آگهی مطابق دیزاین ارسالی: در موبایل (تک‌ستونه) چیدمان
   افقی با تصویر سمت راست، در حالت واید (چندستونه) چیدمان عمودی با تصویر بالا. */
@media (min-width: 640px) {
  .ad-card {
    flex-direction: column;
  }
}

.ad-card--boosted {
  border-color: var(--color-primary);
  border-width: 2px;
}

.ad-card-image-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  width: 38%;
  /* مورد #5/#7 task.md — در چیدمان افقی موبایل، ارتفاع قبلاً با کشش فلکس با متن هم‌ارتفاع
     می‌شد (بسته به یک/دوخطی بودن عنوان)، پس تصاویر کوتاه/بلندِ نامتقارن نشان داده می‌شدند. */
  aspect-ratio: 1 / 1;
  background: var(--color-surface-alt);
}

@media (min-width: 640px) {
  .ad-card-image-wrap {
    width: auto;
    aspect-ratio: 4 / 3;
    /* مورد #27 Polish.md — align-self:flex-start بالاتر فقط برای چیدمان افقیِ موبایل لازم بود
       (تا تصویر با ارتفاع متغیر متن هم‌کشیده نشود)؛ چون بدون شرط روی هر سایزی اعمال می‌شد، در
       چیدمان ستونیِ دسکتاپ (.ad-card از این breakpoint به بعد column است) باعث می‌شد باکس تصویر
       (به‌خصوص باکس بدون‌عکس که خودش عرض ذاتی ندارد) به‌جای گرفتن عرض کامل کارت، به اندازه‌ی
       محتوایش (فقط آیکون) در گوشه‌ی بالا-راست جمع شود. */
    align-self: stretch;
  }
}

.ad-card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ad-card-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
  font-size: 1.8rem;
}

.ad-card-badges {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.ad-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
}

.ad-card-badge.ladder { background: var(--color-info); }
.ad-card-badge.sticky { background: var(--color-primary); }

.ad-card-bookmark-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-faint);
}

.ad-card-bookmark-btn.is-saved,
.ad-card-bookmark-btn.is-saved i {
  color: var(--color-primary);
}

.ad-card-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.ad-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* حتی وقتی عنوان یک‌خطی است، فضای دو خط رزرو شود تا ارتفاع بدنه‌ی کارت با عنوان‌های
     یک/دوخطی مختلف یکسان بماند — مورد #7 task.md. */
  min-height: calc(0.95rem * 1.4 * 2);
}

.ad-card-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.ad-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.72rem;
  color: var(--color-text-faint);
  margin-top: auto;
}

.ad-card-meta-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-chip-row {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.category-chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.category-chip.active,
.category-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--space-5);
}

.empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 180px;
  padding: var(--space-6) var(--space-4);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.empty-state i {
  font-size: 2.2rem;
  color: var(--color-text-faint);
  display: block;
  margin-bottom: var(--space-3);
}