/**
 * JS Pills.
 *
 * The chip row under "I Live the Words I Teach" (Figma 22520:7668): outlined
 * rounded labels that wrap onto as many lines as they need.
 *
 * The list itself is the flex container, so the pills are <li> children of a
 * <ul> — a list of things marked up as a list — rather than a div of spans.
 *
 * No outer padding is baked in — the Elementor container owns the gutters.
 */

.js-pills {
	--js-pills-align: flex-start;
	--js-pills-gap: 12px;
	--js-pills-radius: 999px;
	--js-pills-text: var(--js-color-highlight, #b28b2c);
	--js-pills-border: var(--js-color-border, #b0bed2);
	--js-pills-bg: transparent;

	display: flex;
	flex-wrap: wrap;
	gap: var(--js-pills-gap);
	justify-content: var(--js-pills-align);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Inter", sans-serif;
	box-sizing: border-box;
}

.js-pills *,
.js-pills *::before,
.js-pills *::after {
	box-sizing: border-box;
}

.js-pills__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 24px;
	border: 1px solid var(--js-pills-border);
	border-radius: var(--js-pills-radius);
	background-color: var(--js-pills-bg);
	color: var(--js-pills-text);
	font-size: var(--js-font-body-sm-size, 14px);
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
}