/* ===========================================================================
   CE-39 · Filtr tematów (topic filter)
   Root:     div.ce-topic-filter (in .lf-wrap) – a bar of topic chips above a
             list of posts; it filters the elements named in
             data-filter-targets (ids, space separated): every element with
             data-topic="<slug>" inside them (or the target itself, when it
             carries data-topic – the featured post CE-40)
   Parts:    __in (the bar: label, chips, result), __label („Tematy”),
             __chips (role=group), __chip (button, aria-pressed; data-topic-
             filter="" = all), __count (the number of posts of a chip),
             __result (aria-live: „12 wpisów”)
   Variants: none
   Mechanics: ce/CE-39-topic-filter.js – a chip picks its topic (one at a
             time; „Wszystkie” clears it). The targets fade out and sink
             8 px (200 ms), the off-topic items leave the layout
             (.is-off-topic – display none, styled here for every CE that is
             filtered), the targets come back (320 ms ease-out-quart). The
             topic sits in the address (?temat=<slug>, replaceState), so a
             category link (e.g. in the post's breadcrumbs) opens the list
             already filtered. After a change the script fires
             "cr:topic-filter" on document – the post grid (CE-41) counts
             its pages again. Counts per chip from the markup. Reduced
             motion: no fade.
   Layout:   hi-fi on the kit: 1 px #E9E9E9 lines above and below, 20–28 px
             padding; label 13 px Expanded Medium uppercase #778181 (as
             .lf-eyebrow, without the dot); chips 15 px Expanded Regular,
             height 38 px, radius 3, outline rgba(29,29,30,.12) – pressed:
             #1D1D1E ground, white text; hover: outline .32 and a 3% ground
             (.3 s). The result at the right edge, 13 px #778181. ≤ 900 px
             the label and the result go above the chips; the chips wrap
             (never a horizontal scroll).
   Base:     insights.html#tematy · registry: ce-registry.js → CE-39
   =========================================================================== */

.ce-topic-filter { padding: 0; }

.ce-topic-filter__in {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px clamp(20px, 2.5vw, 48px);
}
.ce-topic-filter__in::before {
  content: "";
  grid-column: 1 / -1;
  border-top: 1px solid #e9e9e9;
  margin-bottom: clamp(4px, .6vw, 12px);
}
.ce-topic-filter__in::after {
  content: "";
  grid-column: 1 / -1;
  border-bottom: 1px solid #e9e9e9;
  margin-top: clamp(4px, .6vw, 12px);
}

.ce-topic-filter__label,
.ce-topic-filter__result {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ui-muted);
  white-space: nowrap;
}
.ce-topic-filter__result { text-transform: none; font-weight: 400; letter-spacing: 0; }

.ce-topic-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ce-topic-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 1px;
  border: 1px solid rgba(29, 29, 30, .12);
  border-radius: 3px;
  background: transparent;
  color: var(--ui-ink);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.ce-topic-filter__chip:hover {
  border-color: rgba(29, 29, 30, .32);
  background: rgba(29, 29, 30, .03);
}
.ce-topic-filter__chip:focus-visible { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
.ce-topic-filter__chip[aria-pressed="true"] {
  border-color: var(--ui-ink);
  background: var(--ui-ink);
  color: #fff;
}

.ce-topic-filter__count {
  font-size: .75rem;
  color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
  transition: color .3s ease;
}
.ce-topic-filter__chip[aria-pressed="true"] .ce-topic-filter__count { color: rgba(255, 255, 255, .55); }

@media (max-width: 1400px) {
  .ce-topic-filter__chips { gap: 6px; }
  .ce-topic-filter__chip { padding: 0 12px 1px; gap: 7px; }
}
@media (max-width: 900px) {
  .ce-topic-filter__in { grid-template-columns: minmax(0, 1fr) auto; }
  .ce-topic-filter__chips { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 640px) {
  .ce-topic-filter__chip { height: 36px; padding: 0 12px 1px; font-size: .875rem; }
}

/* ---- the filtered items (any CE in data-filter-targets) ------------------- */
.is-off-topic { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .cr-js [data-filter-target] {
    transition: opacity .32s var(--ease-out-quart), transform .32s var(--ease-out-quart);
  }
  .cr-js [data-filter-target].is-filtering {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }
}