/* ── Subtopic filter bar ────────────────────────────────────────────────── * * The --tc-* variables cascade from the topic-color--* class on , * 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); 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__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(38rem, 100%), 1fr)); gap: 1.5rem; } .topic-landing__tabs { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; border-bottom: 1px solid currentcolor; } .topic-landing__tab { padding: 0.65rem 1rem; color: inherit; font-weight: 700; text-decoration: none; } .topic-landing__tab.is-active { border-bottom: 3px solid currentcolor; } .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-landing__list--experts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(38rem, 100%), 1fr)); gap: 1.5rem; } .topic-landing__list--experts > .fat-expert-teaser, .topic-landing__list--experts > .fat-expert-teaser .fat-expert-teaser__grid { height: 100%; } .topic-landing__publication-list > li:nth-child(even) { background-color: #f1f1f1; } .topic-expert-wrapper, .topic-expert-wrapper > .fat-expert-teaser, .topic-experts__list .fat-expert-teaser__grid { height: 100%; } .topic-experts__list .fat-expert-teaser__grid { margin-bottom: 0; } body.fat-topic-columns-1 .topic-experts__list, body.fat-topic-columns-1 .topic-landing__list--experts { grid-template-columns: 1fr; } @media (min-width: 62rem) { body.fat-topic-columns-2 .topic-experts__list, body.fat-topic-columns-2 .topic-landing__list--experts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }