/*
  Component: label / category tag pill.
  Figma: 281:6757.

  Used as an overlay chip on hero/card images and inline with article meta.
  Default: white 1px border, transparent fill, white uppercase text.
  Variant --solid: solid red fill.
  Variant --dark: dark text + dark border (used on light backgrounds).
*/

.c-label {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	border-radius: var(--radius-md);
	border: 1px solid var(--c-on-accent);
	background: transparent;
	color: var(--c-on-accent);
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.42px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

a.c-label:hover,
a.c-label:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	text-decoration: none;
}

.c-label--solid {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-on-accent);
}
a.c-label--solid:hover,
a.c-label--solid:focus-visible {
	background: #cf2f3c;
	border-color: #cf2f3c;
}

.c-label--dark {
	border-color: var(--c-fg);
	color: var(--c-fg);
}
a.c-label--dark:hover,
a.c-label--dark:focus-visible {
	background: var(--c-fg);
	color: var(--c-on-accent);
}

/* compact variant — used in card meta rows */
.c-label--sm {
	padding: 4px 8px;
	font-size: 11px;
	line-height: 14px;
	border-radius: var(--radius-sm);
}