/* =========================================================
   DM Gold — cards.css
   کارت محصول مشترک — روی صفحه اصلی، آرشیو، نتایج جستجو و
   محصولات مرتبط از یک مارک‌آپ و یک استایل استفاده می‌شود.
   ========================================================= */


/* =========================================================
   شروع: کارت محصول (prod-card)
   ========================================================= */
.prod-card {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
}

.prod-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent-400); }

.prod-img { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; flex: none; }

/* بدنه‌ی کارت flex می‌شود تا وزن/قیمت همیشه ته کارت بچسبد، حتی وقتی
   کارتِ تخفیف‌دار یک ردیف قیمتِ اضافه دارد و بلندتر از بقیه است */
.prod-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.prod-cat { font-size: 11.5px; color: var(--accent-700); margin-bottom: 5px; font-weight: 600; }

/* ⚠⚠ ارتفاع یکسانِ کارت‌ها — قاعدهٔ مرکزی.
   نامِ محصول تنها چیزی است که ارتفاعش از کارتی به کارت دیگر فرق می‌کند
   (یک‌خطی در برابر سه‌خطی). در یک گرید، ردیف با بلندترین کارت کشیده
   می‌شود پس کارتِ کوتاه فضای خالی می‌گیرد؛ و بین دو سکشنِ مختلف اصلاً
   هم‌تراز نمی‌شوند. پس نام همیشه دقیقاً دو خط جا می‌گیرد: بیشترش بریده
   می‌شود و کمترش با min-height همان دو خط را رزرو می‌کند.
   این کلمپ قبلاً فقط زیر ۶۴۰ پیکسل بود و برای همین در دسکتاپ ارتفاع‌ها
   نامساوی می‌شد. */
.prod-name {
  font-family: var(--font-h);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

.prod-card:hover .prod-name { color: var(--accent-700); }

/* min-height تا کارتی که ویژگی (وزن/عیار) ندارد با کارتی که دارد هم‌تراز بماند */
.prod-meta {
  font-size: 12.5px;
  color: var(--neutral-600);
  margin-bottom: 12px;
  min-height: 1.5em;
}

.prod-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px dashed var(--divider);
}

.prod-price {
  font-family: var(--font-b);
  font-weight: 700;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.prod-toman { font-size: 11px; color: var(--neutral-600); }

/* حالت ناموجود */
.prod-card.is-out .prod-img { filter: grayscale(.85) opacity(.75); }
.prod-out-lbl { font-size: 12.5px; color: var(--neutral-500); font-weight: 600; }
/* =========================================================
   پایان: کارت محصول
   ========================================================= */


/* =========================================================
   شروع: کارت پرتقاضا (demand-card) — نسخه‌ی فشرده‌ی کارت محصول
   ========================================================= */
.demand-card {
  position: relative;
  cursor: pointer;
  transition: transform .25s ease;
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.demand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-400); }

.demand-img { margin: 0; flex: none; }

.demand-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

/* همان قاعدهٔ دو خطِ ثابتِ .prod-name */
.demand-name {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  margin: 8px 0 0;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}

.demand-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px dashed var(--divider);
}

.demand-price {
  font-family: var(--font-b);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.demand-toman { font-size: 11px; color: var(--neutral-600); }
/* =========================================================
   پایان: کارت پرتقاضا
   ========================================================= */


/* =========================================================
   شروع: کارت مقاله (بلاگ / نتایج جستجو)
   ========================================================= */
.post-card {
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent-400); }

.post-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--surface); flex: none; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }

.post-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card-meta { font-size: 11.5px; color: var(--neutral-600); }

.post-card-title {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  line-height: 1.5;
}

.post-card-title a { color: var(--text); }
.post-card:hover .post-card-title a { color: var(--accent-700); }

.post-card-excerpt { font-size: 13px; color: var(--neutral-600); line-height: 1.9; margin: 0; }
.post-card-more { font-size: 13px; font-weight: 600; color: var(--accent-700); margin-top: auto; padding-top: 8px; }
/* =========================================================
   پایان: کارت مقاله
   ========================================================= */


/* =========================================================
   شروع: ریسپانسیو کارت‌ها
   ========================================================= */
@media (max-width: 640px) {
  /* کلمپِ دو خط از قبل در قاعدهٔ اصلی هست؛ اینجا فقط اندازهٔ قلم کوچک
     می‌شود و min-height چون بر حسب em است خودکار با آن هماهنگ می‌ماند. */
  .prod-name, .demand-name, .bundle-name, .deal-name { font-size: 13px; }

  .prod-price, .demand-price, .bundle-price, .deal-price { font-size: 14.5px; }
  .prod-body, .demand-body, .bundle-body, .deal-body { padding: 12px 14px 14px; }
  .prod-meta { margin-bottom: 8px; }
}
/* =========================================================
   پایان: ریسپانسیو کارت‌ها
   ========================================================= */