/* Catalyst card: mini = compact row (quotes); large = stacked with description (grids). */

.catalyst-card {
	position: relative;
	display: flex;
	gap: var(--system-spacing-gap-sm);
	padding: 8px;
	border-radius: var(--system-border-radius-sm);
	background-color: var(--system-bg-box);
	color: var(--system-fg);
	text-decoration: none;
	transition: background-color 0.15s ease;

	&:hover {
		background-color: var(--system-bg-box-hover);
	}
}

.catalyst-card__photo {
	flex-shrink: 0;

	& img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: var(--system-border-radius-xs);
	}
}

.catalyst-card__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--system-spacing-gap-sm);
	min-width: 0;
}

.catalyst-card__name {
	display: flex;
	flex-direction: column;
	gap: var(--system-spacing-gap-3xs);
}

.catalyst-card__title {
	color: var(--system-fg-secondary);
}

.catalyst-card__role {
	color: var(--system-fg-subtle);
}

.catalyst-card__biomes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--system-spacing-gap-3xs);
}

.catalyst-card__desc {
	display: -webkit-box;
	overflow: hidden;
	color: var(--system-fg-muted);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* ── Mini ── */

.catalyst-card--mini {
	width: 380px;
	max-width: 100%;

	@container page-content (max-width: 768px) {
		width: 100%;
	}

	& .catalyst-card__photo {
		width: 40%;
		max-width: 100px;

		@media (max-width: 768px) {
			width: 30%;
		}
	}

	& .catalyst-card__info {
		justify-content: space-between;
		padding: var(--system-spacing-inset-3xs) var(--system-spacing-inset-sm) var(--system-spacing-inset-3xs) 0;
	}

	& .bio-tag {
		padding: 6px 12px;
	}
}

/* ── Large ── */

.catalyst-card--large {
	flex-direction: column;
	height: 100%;

	& .catalyst-card__info {
		padding: 0 var(--system-spacing-inset-xs) var(--system-spacing-inset-xs);
	}
}