.badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.badge-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 26px;
  display: flex;
  gap: 18px;
}

.badge-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-gold-dim);
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.badge-icon svg { width: 22px; height: 22px; }

/* "Achievement unlocked" flash — a ring that expands and fades once,
   the moment the badge scrolls into view. */
.badge-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  opacity: 0;
}
.badge-card.is-visible .badge-icon::after {
  animation: unlock-ring 0.8s ease-out 0.15s;
}
@keyframes unlock-ring {
  0% { opacity: 0.9; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.6); }
}
.badge-card.is-visible .badge-icon {
  animation: unlock-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes unlock-pop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.badge-card h3 { font-size: 1.02rem; font-weight: 600; margin-bottom: 4px; }
.badge-org { color: var(--accent-cyan); font-size: 0.88rem; margin-bottom: 4px; }
.badge-date { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); }

.badge-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.badge-list li {
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding-left: 14px;
  position: relative;
}
.badge-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--accent-gold);
  border-radius: 1px;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .badge-icon::after,
  .badge-icon { animation: none; }
}