/* ==============================
   Platform Badges - Premium icon grid
   ============================== */

.platform-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-xs);
}

.platform-badges__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-3);
  transition: all var(--duration-fast) var(--ease-out);
}

.platform-badges__item:hover {
  border-color: var(--border-default);
  background: var(--surface-4);
}

.platform-badges__icon {
  width: 16px;
  height: 16px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.platform-badges__icon--mask {
  display: inline-block;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.platform-badges__label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
}

.platform-badges__status {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.platform-badges__status--native {
  color: var(--color-success);
}

.platform-badges__status--middleware {
  color: var(--color-warning);
}

.platform-badges__status--none {
  color: var(--text-tertiary);
  opacity: 0.4;
}

.platform-badges__item--unsupported {
  opacity: 0.35;
}

.platform-badges__item--none {
  opacity: 0.35;
}