.playpop-category-card[class*="playpop-category-card--"] {
	--playpop-category-accent: var(--playpop-green);
	--playpop-category-soft: var(--playpop-green-soft);

	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-inline-size: 0;
	min-block-size: 0;
	padding: 0;
	overflow: hidden;
	color: var(--playpop-color-text-primary);
	background: var(--playpop-color-surface);
	border: 1px solid var(--playpop-color-border);
	border-radius: var(--playpop-radius-large);
	box-shadow: var(--playpop-shadow-card);
	font-family: var(--playpop-font-family-base);
}

.playpop-category-card--yellow {
	--playpop-category-accent: var(--playpop-yellow-dark);
	--playpop-category-soft: var(--playpop-yellow-soft);
}

.playpop-category-card--orange {
	--playpop-category-accent: var(--playpop-orange);
	--playpop-category-soft: var(--playpop-orange-soft);
}

.playpop-category-card--blue {
	--playpop-category-accent: var(--playpop-blue);
	--playpop-category-soft: var(--playpop-blue-soft);
}

.playpop-category-card--pink {
	--playpop-category-accent: var(--playpop-pink);
	--playpop-category-soft: var(--playpop-pink-soft);
}

.playpop-category-card--purple {
	--playpop-category-accent: var(--playpop-purple);
	--playpop-category-soft: var(--playpop-purple-soft);
}

.playpop-category-card--teal {
	--playpop-category-accent: var(--playpop-teal);
	--playpop-category-soft: var(--playpop-teal-soft);
}

.playpop-category-card__media {
	position: relative;
	overflow: hidden;
	background: var(--playpop-category-soft);
}

.playpop-category-card__image,
.playpop-category-card__image-placeholder {
	display: block;
	inline-size: 100%;
	min-block-size: 11rem;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.playpop-category-card__image-placeholder {
	position: relative;
	background:
		linear-gradient(135deg, transparent, var(--playpop-color-surface)),
		var(--playpop-category-soft);
}

.playpop-category-card__image-placeholder span {
	position: absolute;
	inset-block-start: var(--playpop-space-xl);
	inset-inline-end: var(--playpop-space-xl);
	inline-size: 6rem;
	block-size: 6rem;
	background: var(--playpop-color-surface);
	border: 1px solid var(--playpop-color-border);
	border-radius: var(--playpop-radius-pill);
	box-shadow: var(--playpop-shadow-card);
}

.playpop-category-badges {
	position: absolute;
	inset-block-start: var(--playpop-space-sm);
	inset-inline-start: var(--playpop-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--playpop-space-xs);
	max-inline-size: calc(100% - (2 * var(--playpop-space-sm)));
}

.playpop-category-badge {
	display: inline-flex;
	align-items: center;
	min-block-size: 2rem;
	padding-block: var(--playpop-space-xs);
	padding-inline: var(--playpop-space-sm);
	background: var(--playpop-color-surface);
	border: 1px solid var(--playpop-color-border);
	border-radius: var(--playpop-radius-pill);
	box-shadow: var(--playpop-shadow-card);
	font-size: var(--playpop-font-size-caption);
	font-weight: 700;
	line-height: var(--playpop-line-height-heading);
}

.playpop-category-badge--green {
	color: var(--playpop-green-dark);
	background: var(--playpop-green-soft);
}

.playpop-category-badge--yellow {
	color: var(--playpop-yellow-dark);
	background: var(--playpop-yellow-soft);
}

.playpop-category-badge--orange {
	color: var(--playpop-orange);
	background: var(--playpop-orange-soft);
}

.playpop-category-badge--blue {
	color: var(--playpop-blue);
	background: var(--playpop-blue-soft);
}

.playpop-category-badge--pink {
	color: var(--playpop-pink);
	background: var(--playpop-pink-soft);
}

.playpop-category-badge--purple {
	color: var(--playpop-purple);
	background: var(--playpop-purple-soft);
}

.playpop-category-badge--teal {
	color: var(--playpop-teal);
	background: var(--playpop-teal-soft);
}

.playpop-category-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--playpop-space-md);
	border-block-start: var(--playpop-space-xs) solid var(--playpop-category-accent);
}

.playpop-category-card__title {
	margin-block: 0 var(--playpop-space-sm);
	font-size: var(--playpop-font-size-h3);
}

.playpop-category-card__title a {
	color: inherit;
	text-decoration: none;
}

.playpop-category-card__title a:hover {
	color: var(--playpop-category-accent);
}

.playpop-category-card__description {
	display: -webkit-box;
	margin-block: 0 var(--playpop-space-md);
	overflow: hidden;
	color: var(--playpop-color-text-secondary);
	font-size: var(--playpop-font-size-small);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.playpop-category-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--playpop-space-sm);
	min-block-size: 2.75rem;
	margin-block-start: auto;
	padding-block: var(--playpop-space-sm);
	padding-inline: var(--playpop-space-md);
	color: var(--playpop-category-accent);
	background: var(--playpop-category-soft);
	border: 1px solid var(--playpop-category-accent);
	border-radius: var(--playpop-radius-medium);
	font-size: var(--playpop-font-size-small);
	font-weight: 700;
	line-height: var(--playpop-line-height-heading);
	text-decoration: none;
}

.playpop-category-card__cta:hover {
	color: var(--playpop-color-surface);
	background: var(--playpop-category-accent);
}

.playpop-category-card__cta--placeholder {
	color: var(--playpop-color-text-secondary);
	border-color: var(--playpop-color-border);
}

@media (min-width: 48rem) {
	.playpop-category-card__image,
	.playpop-category-card__image-placeholder {
		min-block-size: 13rem;
	}

	.playpop-category-card__body {
		padding: var(--playpop-space-lg);
	}
}