/* =========================================================================
   ab-glance — «زبان نگار در یک نگاه» · بلوک ۴
   شبکهٔ کارت‌های کلید/مقدار.
   وابسته به: zn-base.css ، ab-base.css
   ========================================================================= */

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

.zn-scope .abgl-item {
  padding: var(--abgl-p, 20px);
  border-radius: var(--abgl-r, 16px);
  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 .18s ease, box-shadow .18s ease;
}
.zn-scope .abgl-item:hover {
  transform: translateY(var(--abgl-lift, -3px));
  box-shadow: var(--abgl-sh-h, 0 22px 46px rgba(120, 55, 30, .2));
}

.zn-scope .abgl-k {
  font-size: var(--abgl-k-fs, 11.5px);
  font-weight: 700;
  color: var(--abgl-k-c, var(--zn-t5));
  line-height: 1.8;
}
.zn-scope .abgl-v {
  margin-top: 8px;
  font-size: var(--abgl-v-fs, 17px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--abgl-v-c, var(--zn-t1));
}
/* سه گونهٔ رنگی مقدار، مطابق طرح. */
.zn-scope .abgl-v.is-rose { color: var(--abgl-rose, var(--zn-soft)); }
.zn-scope .abgl-v.is-gold { color: var(--abgl-gold, var(--zn-goldsoft)); }

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