/* Custom overrides for Mannen van de Radio */

:root {
  --pico-font-size: 100%;
}

/* Grade/rating badge */
.grade {
  display: inline-block;
  padding: 0.15em 0.5em;
  border-radius: var(--pico-border-radius);
  font-weight: bold;
  font-size: 0.85em;
}

.grade-high {
  background-color: var(--pico-ins-color);
  color: white;
}

.grade-mid {
  background-color: var(--pico-mark-background-color);
}

.grade-low {
  background-color: var(--pico-del-color);
  color: white;
}

/* Tag chips */
.tag-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}

.tag-list li a {
  display: inline-block;
  padding: 0.15em 0.6em;
  border-radius: 1em;
  font-size: 0.85em;
  text-decoration: none;
  background-color: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
}

.tag-list li a:hover {
  background-color: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Nameless character indicator */
.nameless {
  opacity: 0.6;
  font-style: italic;
}

/* Duration display */
.duration {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Stats grid on homepage */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1em;
  margin: 1em 0;
}

.stats-grid article {
  text-align: center;
  margin: 0;
}

.stats-grid article strong {
  display: block;
  font-size: 2em;
}