/* ═══════════════════════════════════════════
   RESPONSIVE BADGE SYSTEM (mobile-first)
   ═══════════════════════════════════════════ */
.badge-group { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  font-size: .7rem; font-weight: 600; line-height: 1.4;
  white-space: normal; word-break: break-word;
}
.badge--yellow { background: #fef3c7; color: #92400e; }
.badge--green  { background: #f0fdf4; color: #166534; }
.badge--blue   { background: #eff6ff; color: #1e40af; }

@media (min-width: 576px) {
  .badge { padding: 6px 12px; font-size: .8rem; gap: 6px; }
  .badge-group { gap: 8px; }
}
@media (min-width: 996px) {
  .badge { padding: 6px 14px; font-size: .85rem; white-space: nowrap; }
}

/* Listing cards — mobile truncation */
@media (max-width: 499px) {
  .ai-card-tags { gap: 3px; flex-wrap: nowrap; overflow: hidden; position: relative; }
  .ai-tag { font-size: 9.5px; padding: 2px 6px; border-radius: 10px; flex-shrink: 0; }
  .ai-tag:nth-child(n+5) { display: none; }
  .ai-card-tags::after {
    content: "+" attr(data-total);
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 20px; padding: 0 6px;
    font-size: 9px; font-weight: 600; background: #f0f0f0; color: #666;
    border-radius: 10px; flex-shrink: 0;
  }
}
@media (min-width: 500px) and (max-width: 767px) {
  .ai-tag { font-size: 10px; padding: 2px 7px; }
}