/* tt360/filter-pills, ported from the prototype's own file of the same
   name. Real <a> links here (docs/PLAN.md §15), not the prototype's own
   <button> markup — this component's CSS is tag-agnostic (class-based),
   so no change was needed to reuse it as-is. */

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill {
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--terra-green), 0.15);
    border-radius: 999px;
    text-decoration: none;
    display: inline-block;
}

.filter-pill:hover,
.filter-pill:focus,
.filter-pill:visited {
    color: rgba(var(--charcoal), 1);
    text-decoration: none;
}

/* Active pill color matches --light-gold/--terra-green, the same pair used
   on .post-card's own .category badge. */
.filter-pill.active {
    color: rgba(var(--terra-green), 1);
    background-color: rgba(var(--light-gold), 1);
    border-color: transparent;
}

.filter-pill.active:hover,
.filter-pill.active:focus,
.filter-pill.active:visited {
    color: rgba(var(--terra-green), 1);
}

/* .tl-filters: Thought Leadership's own header row (docs/PLAN.md §34, built when the Phase 6
   template was assembled) — tt360/filter-pills on the left, a plain "Sort · Newest first" label
   on the right, matching the prototype's own .tl-filters exactly (components/thought-
   leadership.css's own ported values). Newsletter Archive's equivalent row has no sort label, so
   it stays plain tt360/filter-pills with no wrapper. */
.tl-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
}

.tl-sort {
    margin: 0;
    font-size: 13px;
    color: rgba(var(--warm-gray-dark), 1);
}