/* پایه و گرید واکنش‌گرا */
.dk-cg-wrap{
  --dk-cg-circle:96px;
  --dk-cg-cols-d:6;
  --dk-cg-cols-t:4;
  --dk-cg-cols-m:3;
  --dk-cg-gap: 22px;
  direction: rtl;
}
.dk-cg-grid{
  display: grid;
  grid-template-columns: repeat(var(--dk-cg-cols-d), 1fr);
  gap: var(--dk-cg-gap);
  align-items: start;
}
@media (max-width: 1024px){
  .dk-cg-grid{ grid-template-columns: repeat(var(--dk-cg-cols-t), 1fr); }
}
@media (max-width: 640px){
  .dk-cg-grid{ grid-template-columns: repeat(var(--dk-cg-cols-m), 1fr); }
}

.dk-cg-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* دایره با ماسک واقعی روی تصویر */
.dk-cg-circle{
  width: var(--dk-cg-circle);
  height: var(--dk-cg-circle);
  border-radius: 999px;
  background: #f3f5f7;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  position: relative;
  overflow: hidden;          /* ← ماسک */
  display: grid;
  place-items: center;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.dk-cg-item:hover .dk-cg-circle{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08), inset 0 0 0 1px rgba(0,0,0,.04);
  background:#eef2f5;
}

/* تصویر تمام‌قد؛ فقط داخل دایره دیده می‌شود */
.dk-cg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* کراپ برای پر کردن دایره */
  object-position: center;   /* مرکز پیش‌فرض */
  display: block;
  transition: transform .2s ease;
}
.dk-cg-item:hover .dk-cg-img { transform: scale(1.03); }

/* اگر در تنظیمات، حالت contain انتخاب شود */
.dk-cg-circle.is-contain .dk-cg-img { object-fit: contain; }

.dk-cg-letter{
  font-weight: 700;
  font-size: calc(var(--dk-cg-circle) * .38);
  color: #7a8794;
}

.dk-cg-title{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dk-cg-count{
  margin-top: 2px;
  font-size: 12px;
  color: #8b97a3;
}