/*
 * Last.FM Recently Played (patched tlc2): theme-friendly styles.
 * Inherits the theme's fonts and text colors. Override the custom
 * properties below in your theme's Additional CSS to adjust.
 */
.lastfm-played {
	--lastfm-accent: #d51007;
	--lastfm-cover-size: 56px;
	--lastfm-avatar-size: 64px;
	--lastfm-grid-min: 80px;
	--lastfm-grid-gap: 8px;
	--lastfm-line: color-mix(in srgb, currentColor 15%, transparent);
}

.lastfm-played .lastfm-row {
	display: flex;
	gap: 12px;
	align-items: center;
}

.lastfm-played .lastfm-col {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Profile box */
.lastfm-played .lastfm-user {
	margin-bottom: 16px;
}

.lastfm-played .lastfm-avatar-wrap {
	flex: 0 0 var(--lastfm-avatar-size);
}

.lastfm-played .lastfm-avatar {
	display: block;
	width: var(--lastfm-avatar-size);
	height: var(--lastfm-avatar-size);
	object-fit: cover;
	border-radius: 50%;
}

.lastfm-played .lastfm-user-link a {
	color: var(--lastfm-accent);
}

.lastfm-played .lastfm-user-count {
	opacity: 0.75;
}

/* List layout */
.lastfm-played .lastfm-tracklist {
	padding: 8px 0;
	border-bottom: 1px solid var(--lastfm-line);
}

.lastfm-played .lastfm-tracklist:last-child {
	border-bottom: 0;
}

.lastfm-played .lastfm-cover {
	flex: 0 0 var(--lastfm-cover-size);
}

.lastfm-played .lastfm-cover .lastfm-cover-img {
	display: block;
	width: var(--lastfm-cover-size);
	height: var(--lastfm-cover-size);
	object-fit: cover;
	border-radius: 4px;
}

.lastfm-played .lastfm-track-title,
.lastfm-played .lastfm-track-artist {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lastfm-played .lastfm-track-artist {
	font-size: 0.9em;
	opacity: 0.75;
}

.lastfm-played .lastfm-track-time {
	font-size: 0.8em;
	color: var(--lastfm-accent);
}

/* Grid layout */
.lastfm-played .lastfm-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--lastfm-grid-min), 1fr));
	gap: var(--lastfm-grid-gap);
}

.lastfm-played .lastfm-grid-item {
	margin: 0;
	padding: 0;
}

.lastfm-played .lastfm-grid .lastfm-cover-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Placeholder when no cover is available (no image request) */
.lastfm-played .lastfm-cover-img.lastfm-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, currentColor 10%, transparent);
	opacity: 0.8;
}

.lastfm-played .lastfm-cover-img.lastfm-placeholder::after {
	content: "\266A";
	font-size: 1.4em;
	opacity: 0.5;
}