/* =============================================================================
   Category / topic pills  (.lkst-cat-pills)
   Shared by the Category Pills + Home Filter Pills modules.
   Moved from Free's monolithic assets/style.css in the 1.219.0 lean-Free
   reorg. Consumes the --lkst-* variables injected by Free's Styles module,
   with literal fallbacks so the pills render correctly even where the global
   sheet (and its inline variables) doesn't load.
   ============================================================================= */

.lkst-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.lkst-cat-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 14px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 100px;
	color: #D4CFC8;
	font-size: var(--text-xs, 13px);
	font-weight: 500;
	text-decoration: none;
	transition: all 0.18s ease;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.lkst-cat-pill:hover {
	background: rgba(30, 207, 196, 0.12);
	border-color: var(--lkst-secondary-color, #1ECFC4);
	color: var(--lkst-secondary-color, #1ECFC4);
	text-decoration: none;
}

.lkst-pill-count {
	font-size: 10px;
	font-weight: 400;
	opacity: 0.5;
}

/* Light variant — for use on light/cream backgrounds (e.g. home article
   section, fellowship-tinted hero panels). Uses light-bg-friendly colors
   while keeping the same shape. */
.lkst-cat-pills--light .lkst-cat-pill {
	background: var(--lkst-bg-light, #F5F0E8);
	border-color: color-mix(in oklch, var(--lkst-primary-contrast, #0F1A2E) 12%, transparent);
	color: color-mix(in oklch, var(--lkst-primary-contrast, #0F1A2E) 65%, transparent);
}

.lkst-cat-pills--light .lkst-cat-pill:hover {
	background: color-mix(in oklch, var(--lkst-primary-contrast, #0F1A2E) 8%, var(--lkst-bg-light, #F5F0E8));
	border-color: color-mix(in oklch, var(--lkst-primary-contrast, #0F1A2E) 20%, transparent);
	color: var(--lkst-primary-contrast, #0F1A2E);
}

/* Active state — works on both schemes. Navy bg, light text. */
.lkst-cat-pill.is-active,
.lkst-cat-pill.is-active:hover {
	background: var(--lkst-primary-contrast, #0F1A2E);
	border-color: var(--lkst-primary-contrast, #0F1A2E);
	color: var(--lkst-bg-light, #F5F0E8);
}

.lkst-cat-pill.is-active .lkst-pill-count {
	opacity: 0.7;
}