/* ── Subtopic filter bar ──────────────────────────────────────────────────
 *
 * The --tc-* variables cascade from the topic-color--* class on <body>,
 * so buttons automatically adopt the current topic's colour palette.
 * ─────────────────────────────────────────────────────────────────────── */

.topic-experts__filter-bar {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.topic-experts__filter-btn {
  padding: 0.25rem 0.875rem;
  background: transparent;
  color: var(--tc-font, #333);
  font-size: 1.2em;
  text-transform: capitalize;
  border-top: 1px solid var(--tc-border, #ccc);
  border-bottom: 3px solid var(--tc-border, #ccc);
  border-left: none;
  border-right: none;
  cursor: pointer;
  line-height: 1.5;
  transition: background-color 0.15s, font-weight 0.15s;
}

.topic-experts__filter-btn:hover,
.topic-experts__filter-btn:focus-visible {
  background-color: var(--tc-bg, #f5f5f5);
  font-weight: 500;
  outline: none;
}

.topic-experts__filter-btn.is-active {
  background-color: var(--tc-bg, #f5f5f5);
  font-weight: 600;
}

.topic-experts__language-filter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.topic-experts__language-filter > .expert-search-filter--language {
  width: max-content;
  max-width: 100%;
  margin: 0;
}

.topic-expert-wrapper,
.topic-expert-wrapper > .fat-expert-teaser,
.topic-experts__list .fat-expert-teaser__grid {
  height: 100%;
}