/* کارت‌های لیست تجهیزات — EquipmentList.module.css (پیشوند el-) */

.el-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.el-card {
  background: var(--tile, #141417);
  border: 1px solid var(--line, rgba(255,255,255,.08));
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, border-color .16s ease;
}
.el-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.24); }

.el-cardImage {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--tile-2, #1b1b1f);
  overflow: hidden;
}
.el-cardImg { width: 100%; height: 100%; object-fit: cover; display: block; }
.el-cardPlaceholder {
  width: 100%; height: 100%;
  background: radial-gradient(120% 140% at 70% 10%,
    color-mix(in srgb, var(--accent, #a855c9) 20%, transparent), transparent 70%),
    var(--tile-2, #1b1b1f);
}
.el-categoryTag {
  position: absolute; top: 9px; inset-inline-end: 9px;
  font-size: 10.5px; padding: 4px 10px; border-radius: 9px;
  background: rgba(0,0,0,.7); color: #fff; backdrop-filter: blur(4px);
}
.el-photoCount {
  position: absolute; bottom: 9px; inset-inline-start: 9px;
  font-size: 10.5px; padding: 4px 9px; border-radius: 9px;
  background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(4px);
}

.el-cardBody { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.el-cardName { font-size: 14px; line-height: 1.55; }

/* The two or three facts that decide whether this is worth opening. */
.el-specRow { display: flex; flex-wrap: wrap; gap: 4px; }
.el-spec {
  font-size: 10.5px; padding: 3px 9px; border-radius: 7px;
  background: rgba(255,255,255,.06); color: var(--fg-2, #a8a8b0);
  white-space: nowrap;
}

.el-cardMeta {
  display: flex; flex-wrap: wrap; gap: 3px 10px;
  font-size: 11.5px; color: var(--fg-3, #6c6c76);
}

.el-cardFoot {
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line, rgba(255,255,255,.08));
}
.el-cardRate { font-size: 12.5px; color: #8fd6b4; }
.el-noRate { font-size: 12px; color: var(--fg-3, #6c6c76); }
.el-deposit { font-size: 10.5px; color: var(--fg-3, #6c6c76); }

.el-empty { text-align: center; color: var(--fg-3, #6c6c76); font-size: 14px; padding: 70px 20px; }