/* =========================================================================
   ab-why — «چرا زبان‌آموزان زبان نگار را انتخاب می‌کنند» · بلوک ۹
   کارت‌هایی با یک نقطهٔ رنگی کنار عنوان.
   وابسته به: zn-base.css ، ab-base.css
   ========================================================================= */

.zn-scope .abwy-grid {
  display: grid;
  grid-template-columns: repeat(var(--abwy-cols, 3), minmax(0, 1fr));
  gap: var(--abwy-gap, 16px);
}

.zn-scope .abwy-card {
  position: relative;
  padding: var(--abwy-p, 24px);
  border-radius: var(--abwy-r, 18px);
  background: var(--ab-card-bg, var(--zn-card));
  border: 1px solid var(--ab-card-bd, rgba(var(--zn-line), .14));
  box-shadow: var(--ab-card-sh, var(--zn-cardsh));
  transition: transform .2s ease, box-shadow .2s ease;
}
.zn-scope .abwy-card:hover {
  transform: translateY(var(--abwy-lift, -4px));
  box-shadow: var(--abwy-sh-h, 0 24px 50px rgba(120, 55, 30, .2));
}

.zn-scope .abwy-top { display: flex; align-items: center; gap: var(--abwy-dot-gap, 10px); }

.zn-scope .abwy-dot {
  width: var(--abwy-dot-s, 9px);
  height: var(--abwy-dot-s, 9px);
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--zn-rose);
}

.zn-scope .abwy-title {
  margin: 0;
  font-size: var(--abwy-title-fs, 16.5px);
  font-weight: 900;
  line-height: 1.6;
  color: var(--abwy-title-c, var(--zn-t1));
}

.zn-scope .abwy-desc {
  margin: 12px 0 0;
  font-size: var(--abwy-desc-fs, 13.5px);
  line-height: var(--abwy-desc-lh, 2);
  color: var(--abwy-desc-c, var(--zn-t4));
}

@media (max-width: 980px) {
  .zn-scope .abwy-grid { grid-template-columns: repeat(var(--abwy-cols-t, 2), minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .zn-scope .abwy-grid { grid-template-columns: repeat(var(--abwy-cols-m, 1), minmax(0, 1fr)); }
}