/**
 * wpins/badge — etykieta/wyróżnik WPiNS. Radius 0, Lato uppercase, mała.
 * Warianty: accent (czerwony fill + biały tekst — celowy akcent marki, mały obszar),
 * kontrast (heading/canvas — czarna w light, biała w dark), kontur (outline ink).
 */
.wpins-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.6rem;
	font-family: var(--font-wpins-ui);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.3;
	border: 1px solid transparent;
	border-radius: 0;
	white-space: nowrap;
}

/* Czerwony — celowy akcent (fill + biały tekst = AA). Mały obszar, nie CTA, nie duża sekcja. */
.wpins-badge--accent {
	background: var(--color-wpins-accent, #e52528);
	color: var(--color-wpins-white, #fff);
}

/* Kontrast — heading/canvas flipują: czarna w light, biała w dark. */
.wpins-badge--kontrast {
	background: var(--color-wpins-heading, #0a0a0a);
	color: var(--color-wpins-canvas, #fff);
}

/* Kontur — subtelna. Token semantyczny `heading` flipuje w dark (widoczna w obu trybach). */
.wpins-badge--kontur {
	background: transparent;
	border-color: var(--color-wpins-heading, #0a0a0a);
	color: var(--color-wpins-heading, #0a0a0a);
}

/* Odstęp zewnętrzny (margines góra+dół) — presety z naszej skali 4px. Klasy, nie inline.
   (Dotyczy badge BLOKOWEGO; format inline płynie w tekście i nie używa tych klas.) */
.wpins-badge--space-sm { margin-block: 0.5rem; }
.wpins-badge--space-md { margin-block: 1rem; }
.wpins-badge--space-lg { margin-block: 2rem; }

/* Inline (Format API): badge W ŚRODKU tekstu (p/h1–h3), tekst przed i za. `display:inline` +
   rozmiar w `em` → płynie w wierszu i skaluje się z otaczającym tekstem. Akcent (czerwony). */
.wpins-badge-inline {
	display: inline;
	padding: 0.08em 0.45em;
	font-family: var(--font-wpins-ui);
	font-weight: 700;
	font-size: 0.82em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 0;
	background: var(--color-wpins-accent, #e52528);
	color: var(--color-wpins-white, #fff);
	/* Zawijaj długie etykiety (np. dłuższe tłumaczenia EN) — bez wychodzenia za margines; tło na każdej linii. */
	white-space: normal;
	overflow-wrap: anywhere;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Edytor: gdy kursor jest w etykiecie inline, rdzeń Gutenberga nakłada białą „granicę
   formatu" (.rich-text:focus *[data-rich-text-format-boundary] = rgba(255,255,255,.2)),
   która zakrywa czerwień → biały tekst znika. Większą specyficznością (0,4,0 > 0,3,0)
   przywracamy akcent, BEZ !important. Na froncie selektor `.rich-text` nie istnieje. */
.rich-text:focus .wpins-badge-inline[data-rich-text-format-boundary] {
	background-color: var(--color-wpins-accent, #e52528);
}