/* Role List (Editorial) widget — self-contained; themeable via CSS variables
   set from the widget's Style tab. Font stacks fall back gracefully when the
   host page doesn't load the brand fonts. */
.ing-roles {
	--ing-roles-ink: #14213A;
	--ing-roles-muted: rgba(10, 22, 40, .62);
	--ing-roles-line: rgba(10, 22, 40, .12);
	--ing-roles-paper: #F6F4EF;
	border-top: .5px solid var(--ing-roles-line);
}

.ing-roles__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr auto 28px;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	border-bottom: .5px solid var(--ing-roles-line);
	color: var(--ing-roles-ink);
	text-decoration: none;
	transition: padding .2s;
}

.ing-roles__row:hover {
	padding-left: 8px;
}

.ing-roles__title {
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -.012em;
	line-height: 1.3;
}

.ing-roles__meta {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ing-roles-muted);
	line-height: 1.5;
}

.ing-roles__tag {
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	border: .5px solid var(--ing-roles-line);
	padding: 5px 10px;
	border-radius: 999px;
	justify-self: start;
	white-space: nowrap;
}

.ing-roles__tag--empty {
	border: none;
	padding: 0;
}

.ing-roles__go {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: .5px solid var(--ing-roles-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}

.ing-roles__row:hover .ing-roles__go {
	transform: translate(2px, -2px);
	background: var(--ing-roles-ink);
	color: var(--ing-roles-paper);
	border-color: var(--ing-roles-ink);
}

.ing-roles__empty {
	font-size: 15px;
	color: var(--ing-roles-muted);
	padding: 22px 0;
	margin: 0;
	border-bottom: .5px solid var(--ing-roles-line);
}

@media (max-width: 760px) {
	.ing-roles__row {
		grid-template-columns: 1fr 28px;
		gap: 6px 16px;
		padding: 16px 0;
	}

	.ing-roles__meta,
	.ing-roles__tag {
		grid-column: 1 / -2;
	}

	.ing-roles__go {
		grid-row: 1;
		grid-column: 2;
	}
}