/**
 * Badge Component Styles
 *
 * Numeric badges and heading-with-count utility
 * Used for course counts, category counts, etc.
 *
 * Dependencies: ssa-base (00-tokens.css for variables)
 * Extracted from: styles.css lines 91-135
 */

/* ==========================================================================
   Numeric Badge
   ========================================================================== */

.numeric {
	background-color: var(--brand-highlight);
	color: var(--brand-main);

	/* font-family handled by utility class */
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.5px;
	height: 32px;
	border-radius: var(--radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	width: fit-content;
	padding: 10px 14px;
}

/* ==========================================================================
   Heading with Count
   Consistent layout for h1/h2/h3 + numeric badge
   ========================================================================== */

.heading-with-count {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-3); /* 12px */
	margin-bottom: var(--space-5); /* Maintain spacing */
}

.heading-with-count h1,
.heading-with-count h2,
.heading-with-count h3 {
	margin: 0;
	margin-bottom: 0; /* Override default margin */
}

.heading-with-count .numeric {
	display: inline-flex; /* Keep flex for centering but inline for flow */
	margin-bottom: 0; /* Override the 30px margin from .courses-main-area .numeric */
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (width <= 480px) {
	.heading-with-count {
		gap: var(--space-2); /* Smaller gap on mobile */
	}
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (width <= 768px) {
	.heading-with-count {
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
}