/* ==========================================================================
   Tag / meta row  (.pf-tags)
   Small uppercase serif items separated by 4px dots — the project taxonomy row
   ("WEB APP · DESKTOP · DESIGN SYSTEM · RESEARCH") and the "PROCESS · CHALLENGES
   · IMPACT" filter row from the Figma.
   ========================================================================== */

.pf-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-1) var(--pf-space-2);
  margin: 0;
}

.pf-tags__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2);
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-ink-secondary);
}

/* 4px round dot separator before every item except the first in a row */
.pf-tags__item + .pf-tags__item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: var(--pf-radius-full);
  background: var(--pf-ink-secondary);
  flex: none;
  margin-inline-end: var(--pf-space-1);
}

/* Interactive filter variant — items are buttons/links, pink when active */
.pf-tags--filter .pf-tags__item {
  cursor: pointer;
  transition: color var(--pf-dur) var(--pf-ease);
}
.pf-tags--filter .pf-tags__item:hover,
.pf-tags--filter .pf-tags__item:focus-visible,
.pf-tags--filter .pf-tags__item[aria-pressed="true"],
.pf-tags--filter .pf-tags__item[aria-current="true"] {
  color: var(--pf-ink); /* active = ink text (from secondary) + pink rule */
  text-decoration: underline;
  text-decoration-color: var(--pf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}