/**
 * =============================================================================
 * COMPONENT: Tag Pill (.tag-pill)
 * =============================================================================
 * Uppercase micro-label with a glass-morphism fill. Shared across blocks so
 * that filters, navigation links, and inline tag rows all look identical.
 *
 * Semantics are carried by the HTML element:
 *   <a class="tag-pill" href="/use-cases/?tag=genetic-gain">…</a>   → navigation
 *   <button class="tag-pill" type="button" data-tag="…">…</button>  → filter toggle
 *
 * Variants:
 *   .tag-pill--bordered   → adds a 1px white-50% border (used on dark photo
 *                          backgrounds where the pill would otherwise blend in)
 *   .tag-pill.is-active   → selected state (radial-green fill, lime border)
 *
 * Tokens only — all values trace back to variables.css.
 * =============================================================================
 */

.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 5px 16px;
  margin: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--gradient-radial-glass);
  color: var(--color-white);
  font-family: var(--font-inter);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.96px;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--transition-base),
    transform  var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}

/* Strip native button chrome so <button class="tag-pill"> and
   <a class="tag-pill"> render identically. NB: do NOT use `font: inherit`
   here — that shorthand resets font-family/size/weight and (being more
   specific than `.tag-pill`) would override the typography set above, making
   <button> pills inherit the page font instead of Inter 12px. */
button.tag-pill {
  appearance: none;
  -webkit-appearance: none;
}

.tag-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.tag-pill:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 2px;
}

/* Active / selected — used by filter toggles and "current tag" states. */
.tag-pill.is-active {
  background: var(--gradient-radial-green);
  box-shadow: var(--shadow-sm);
}

.tag-pill.is-active:hover {
  box-shadow: var(--shadow-glow-cta);
}

/* Outlined variant — border visibility helps on photo/dark backgrounds. */
.tag-pill--bordered {
  border: 1px solid var(--color-white-50);
}

.tag-pill--bordered:hover {
  border-color: var(--color-white-70);
}

.tag-pill--bordered.is-active {
  border-color: var(--color-light-green);
}

/* Static variant — for non-interactive pills like dates or metadata labels.
   Strips cursor, hover motion and focus ring so the element reads as a pure
   visual badge (matches what a <time> or <span> expects). */
.tag-pill--static,
.tag-pill--static:hover,
.tag-pill--static:focus-visible {
  cursor: default;
  transform: none;
  box-shadow: none;
  outline: none;
}

/* Outline variant — truly transparent fill (the page background shows
   through untouched), paired with a subtle glass-tinted 1px border.
   At this width a solid white/25% stroke is visually identical to the
   radial-glass gradient and avoids the background-clip double-paint
   issue where the interior inherits a faint white wash. */
.tag-pill--outline {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
}