/* ================================================================
   COMPONENT: TAG / PILL LABEL
   ================================================================ */

.tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-sm);
  corner-shape: squircle;   /* Apple continuous corner */
  font-family: var(--type-body2-font);
  font-size: var(--type-body2-size);
  line-height: var(--type-body2-line);
  font-weight: var(--weight-book);
  white-space: nowrap;
}

/* On dark (hero) — frosted pill, no interaction */
.tag--on-dark {
  background-color: rgba(0, 0, 0, 0.38);
  color: rgba(232, 240, 239, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* -- Responsive ------------------------------------------------- */
@media (max-width: 768px) {
  .tag {
    min-height: 22px;
    padding: 0 8px;
    line-height: 18px;
    border-radius: 6px;
  }
}