/* Block: Badge Cluster
   Displays food detail badges in a flexible row.
   Used in hero-food component to show category, preparation, form, etc.
*/

.badge-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xxs);
  justify-content: center;
  margin-block-start: var(--space-sm);
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: 0.1em 0.5em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.25;
  border-radius: var(--radius-pill);
  text-transform: none;
  box-shadow: var(--shadow-md);
}

/* Primary Badge (Category) */
.detail-badge[data-type="category"] {
  background: linear-gradient(to bottom,
    hsl(var(--clr-magenta-400) / 0.7) 0%,
    hsl(var(--clr-magenta-600) / 0.9) 60%
  );
  color: hsl(var(--clr-white));
}

/* Secondary Badges (Preparation, Form, Seasoning) */
.detail-badge:not([data-type="category"]) {
  background: var(--bg-card-translucent);
  border: 1px solid var(--border-muted);
  color: var(--text-primary);
  backdrop-filter: blur(4px);
}

/* SVG Icon styling */
.detail-badge svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* Responsive - smaller badges on mobile */
@media (max-width: 768px) {
  .detail-badge {
    font-size: var(--fs-sm);
    padding: 0 0.75em 0.15em 0.75em;
  }
}

@media (max-width: 400px) {
  .badge-cluster {
    gap: var(--space-xxs);
  }

  .detail-badge {
    font-size: var(--fs-xs);
  }
}