/*!
 * Component: Stage Badge
 *
 * Topic 22 LAUNCH22-WP3 — BEM atom indicating product / roadmap lifecycle stage.
 * Composited inside `inc/sections/card-grid.php` cards (via the additive `badge`
 * card field) on `/products`, and reused directly by LAUNCH22-WP6 on `/roadmap`.
 *
 * Five stage modifiers map to product lifecycle:
 *   --released    dark green pill   — shipped, buyable / downloadable today
 *   --pre-order   amber pill        — buy/reserve open, ships later
 *   --demo-soon   sky-blue pill     — demo build in production (K-World accent OK)
 *   --in-dev      violet pill       — active production work, no demo yet
 *   --concept     neutral grey pill — placeholder slot / canon-gap
 *
 * Color is NOT the only signal. Every badge ships with `aria-label="Stage: {name}"`
 * so screen readers announce stage explicitly, regardless of visual treatment.
 *
 * Section library closure honoured: badge is an ATOM rendered inside card-grid's
 * existing markup contract — the 11-partial library remains closed (per
 * Topic 17 close gate). No new section partial is introduced.
 *
 * Scoped under `.mw-stage-badge` so the atom can drop anywhere in the page tree
 * without bleeding into unrelated typography rules.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 22 LAUNCH22-WP3
 */

.mw-stage-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.7em;
	border-radius: 999px;
	font-size: 0.75rem;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	/* Default neutral fallback (overridden by every modifier). */
	background-color: #e5e7eb;
	color: #1f2937;
}

/* Released — shipped today (dark green pill). */
.mw-stage-badge--released {
	background-color: #166534;
	color: #ecfdf5;
	border-color: #14532d;
}

/* Pre-order — buyable, ships later (amber pill). */
.mw-stage-badge--pre-order {
	background-color: #b45309;
	color: #fffbeb;
	border-color: #92400e;
}

/* Demo soon — demo build in production (sky-blue pill; K-World accent borrow). */
.mw-stage-badge--demo-soon {
	background-color: #0369a1;
	color: #f0f9ff;
	border-color: #075985;
}

/* In dev — active production, no demo yet (violet pill). */
.mw-stage-badge--in-dev {
	background-color: #6d28d9;
	color: #f5f3ff;
	border-color: #5b21b6;
}

/* Concept — placeholder slot / canon-gap (neutral grey pill). */
.mw-stage-badge--concept {
	background-color: #6b7280;
	color: #f9fafb;
	border-color: #4b5563;
}

/* When the badge sits inside a card, give it a little breathing room before
 * surrounding card chrome (eyebrow / title) so it never collides with neighbour
 * text. The card itself already uses `gap` on its flex column, but the badge
 * frequently lives on the same horizontal row as the eyebrow, so a small
 * margin keeps the rhythm tidy when wrapping kicks in. */
.mw-card .mw-stage-badge {
	margin-block: 0 0.25rem;
}

/* Print: keep badges legible without burning ink. */
@media print {
	.mw-stage-badge {
		background-color: transparent !important;
		color: #000 !important;
		border: 1px solid #000 !important;
	}
}

/* Reduced motion: no transitions registered on this atom by default, but
 * declare-no-op-explicitly so future polish doesn't accidentally add motion. */
@media (prefers-reduced-motion: reduce) {
	.mw-stage-badge {
		transition: none;
	}
}