/* Base card */
.cf-card {
	--cf-bg: #141820;
	--cf-fg: #e5e7eb;
	--cf-fg-muted: #9ca3af;
	--cf-border: rgba(255,255,255,.06);
	--cf-inset: rgba(255,255,255,.05);
	--cf-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px var(--cf-inset);
	display: grid;
	gap: .75rem;
	padding: .5rem;
	border-radius: 8px;
	color: var(--cf-fg);
	background: var(--cf-bg);
	box-shadow: var(--cf-shadow);
	text-decoration: none;
}

	/* Shared inner parts */
	.cf-card .meta {
		min-width: 0;
	}

	.cf-card .title {
		font-weight: 600;
		font-size: .9rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cf-card .subtitle {
		color: var(--cf-fg-muted);
		font-size: .8rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cf-card .counts {
		display: flex;
		gap: .6rem;
		align-items: center;
		color: var(--cf-fg-muted);
		font-size: .65rem;
		opacity: .85;
	}

		.cf-card .counts .pair {
			display: inline-flex;
			gap: .25rem;
			align-items: center;
		}

	/* Icon helpers (pairs with your existing icons.css) */
	.cf-card i[class^="icon-"], .cf-card i[class*=" icon-"] {
		display: inline-block;
		line-height: 1;
		font-style: normal;
		font-size: .9rem;
	}

	/* Cover images (img, not background) */
	.cf-card .cover {
		width: 100%;
		aspect-ratio: 1 / 1;
		border-radius: 8px;
		display: block;
		object-fit: cover;
		background-color: #151922; /* fallback while loading */
	}

/* Clickable affordance */
.cf-card {
	cursor: pointer;
}

/* ===== Variants ===== */

/* Full cards lay out as [cover | meta] */
.cf-card--full {
	grid-template-columns: 140px 1fr;
	gap: 1rem;
}

	.cf-card--full .cover {
		width: 140px;
	}

/* Mini cards are narrow, one column, tighter rhythm */
.cf-card--mini {
	border: 1px solid var(--cf-border);
	padding: .4rem;
	width: 240px;
	max-width: 100%;
	gap: .5rem;
	box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
}

	.cf-card--mini .layout {
		display: grid;
		grid-template-columns: 46px 1fr auto; /* cover | meta | controls (optional) */
		gap: .5rem;
		align-items: center;
	}

	.cf-card--mini .cover {
		width: 46px;
		border-radius: 4px;
	}

	.cf-card--mini .title {
		font-size: .78rem;
	}

	.cf-card--mini .subtitle {
		font-size: .7rem;
	}

	.cf-card--mini .counts {
		font-size: .62rem;
		opacity: .75;
	}

/* Subtype tags (useful if you ever need slight tweaks) */
.cf-card--song {
}

.cf-card--playlist {
}

.cf-card--artist {
}

/* Optional: controls area (e.g., kebab) in minis */
.cf-card--mini .controls .kebab {
	border: 0;
	background: rgba(255,255,255,.08);
	color: var(--cf-fg);
	padding: .35rem;
	border-radius: 6px;
}

	.cf-card--mini .controls .kebab:hover {
		background: rgba(255,255,255,.12);
	}

/* Responsive nicety for very small screens */
@media (max-width: 600px) {
	.cf-card--mini {
		width: 200px;
	}
}