/* =========================================
   Tests Page CSS (Scoped Only to <main>)
   - No change to page background
   - No font-family override (keeps B Nazanin / site font)
   - No font-size changes
   - Prevent header/mega-menu side effects
   ========================================= */

/* فاصله از هدر (absolute-top) */
main.container {
  margin-top: 12rem;
  direction: rtl;
  text-align: right;
}

/* Justify فقط برای متن‌های داخل main */
main.container p,
main.container .muted,
main.container .note,
main.container .hero p {
  text-align: justify;
  text-justify: inter-word;
}

/* تیترها راست‌چین */
main.container h1,
main.container h2,
main.container h3,
main.container h4,
main.container h5,
main.container h6,
main.container .hero h1,
main.container .card h3 {
  text-align: right;
}

/* ====== Hero (بدون تغییر رنگ زمینه کلی صفحه) ====== */
main.container .hero {
  background: #F6F1E3;
  border: 1px solid #E9E0C9;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

main.container .hero h1 {
  margin: 0 0 .5rem;
  color: #166534;
}

/* ====== Note ====== */
main.container .note {
  font-size: .9rem;
  color: #374151;
  padding: .75rem 1rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: .75rem;
}

/* ====== Grid + Card ====== */
main.container .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

main.container .card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

main.container .card h3 {
  margin: .2rem 0 .6rem;
  color: #0f172a;
}

main.container .muted {
  color: #6b7280;
  font-size: .9rem;
}

/* ====== Badge (تگ دسته‌بندی) - آبی ملایم و فقط به اندازه متن ====== */
main.container .badge {
  display: inline-block;
  width: auto !important;
  max-width: 100%;
  white-space: nowrap;

  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;

  /* آبی ملایم */
  background: #eaf3ff;
  border: 1px solid #bfdcff;
  color: #1e40af;

  align-self: flex-start;
  justify-self: start;
}

main.container .card .badge {
  margin-bottom: .5rem;
}

/* ====== CTA (اگر دارید) ====== */
main.container .cta {
  margin-top: 1rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

main.container .btn {
  display: inline-block;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: .75rem;
  padding: .5rem .9rem;
  text-decoration: none;
  color: #111827;
  direction: rtl;
  text-align: right;
}

main.container .btn-primary {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}
/* ====== Grid: دقیقاً 3 کارت در هر ردیف (دسکتاپ) ====== */
main.container .grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;

  /* فاصله بالا و پایینِ مجموعه کارت‌ها (بالای ردیف اول و پایین ردیف آخر) */
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* تبلت: 2 ستون */
@media (max-width: 991.98px){
  main.container .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* موبایل: 1 ستون */
@media (max-width: 575.98px){
  main.container .grid{
    grid-template-columns: 1fr;
  }
}