.relation-card {
	display: flex;
	align-items: center;
	gap: var(--system-spacing-gap-sm);
	width: 100%;
	height: 100%;
	padding: var(--system-spacing-inset-xs);
	padding-right: var(--system-spacing-inset-sm);
	border-radius: var(--system-border-radius-md);
	background-color: var(--system-bg-box);
	color: var(--system-fg);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.relation-card:hover,
.relation-card:focus-visible {
	background-color: var(--system-bg-box-hover);
}

.relation-card:focus-visible {
	outline: 2px solid var(--system-fg-primary);
	outline-offset: 2px;
}

.relation-card .biome-logo {
	position: relative;
	width: 9rem;
	flex: none;
	aspect-ratio: 16 / 9;
	border-radius: var(--system-border-radius-xs);
	--biome-logo-padding: 14%;
}

/* SVG branco: a máscara pinta em sand sobre o laranja. */
.relation-card .biome-logo::after {
	content: "";
	position: absolute;
	inset: var(--biome-logo-padding);
	background-color: var(--system-fg-on-brand);
	-webkit-mask: var(--logo) center / contain no-repeat;
	mask: var(--logo) center / contain no-repeat;
	pointer-events: none;
}

.relation-card .biome-logo img {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.relation-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--system-spacing-gap-3xs);
	min-width: 0;
}

.relation-card__role { color: var(--system-fg-muted); }