/* [haer_song_list] page wrapper + song row/item. NOTE: the koleksi DETAIL
   view (#haer-koleksi-detail-app) reuses this exact .haer-song-list /
   .haer-song-item markup for its song list, so this file must stay loaded
   wherever koleksi.css is loaded too. */

.haer-song-container { max-width: 1100px; margin: 30px auto; padding: 0 15px; font-family: system-ui, -apple-system, sans-serif; position: relative; }

.haer-filter-genre {
	display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 20px;
	overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
	scrollbar-width: thin; padding-bottom: 6px;
}
.haer-filter-genre a {
	flex: 0 0 auto; white-space: nowrap;
	padding: 6px 14px; border-radius: 6px; text-decoration: none;
	background: #e8f0fe; color: #1a73e8; font-size: 13px; cursor: pointer;
}
.haer-filter-genre a:hover { background: #d2e3fc; }
.haer-filter-genre a.active { background: #1a73e8; color: #fff; }

.haer-song-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
.haer-song-item { width: 100%; box-sizing: border-box; }
.haer-song-item {
	background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
	overflow: hidden; transition: 0.15s;
}
.haer-song-item:hover { border-color: #2271b1; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.haer-song-row { display: flex; gap: 15px; align-items: center; padding: 12px 15px; }
.haer-song-row.has-video { cursor: pointer; }
.haer-song-row.has-video:focus-visible { outline: 2px solid #2271b1; outline-offset: -2px; }
.haer-song-cover-wrap {
	position: relative;
	flex: 0 0 50%;
	max-width: 50%;
	width: 50%;
}
.haer-song-cover {
	width: 100%;
	aspect-ratio: 16 / 9; /* Rasio 16:9 */
	object-fit: cover;
	border-radius: 6px;
	background: #f0f0f1;
	display: block;
}

.haer-play-badge {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.35); color: #fff; border-radius: 6px; font-size: 16px;
	opacity: 0; transition: opacity 0.15s ease;
}
.haer-song-row.has-video:hover .haer-play-badge,
.haer-song-row.has-video:focus-visible .haer-play-badge { opacity: 1; }
.haer-song-info { flex: 1; min-width: 0; }
.haer-song-title { font-weight: 600; font-size: 16px; margin: 0 0 3px; }
.haer-song-artist { color: #555; font-size: 14px; margin: 0 0 4px; }
.haer-song-meta { font-size: 12px; color: #777; }
.haer-song-meta span { margin-right: 10px; }
.haer-song-video { display: none; background: #000; }
.haer-song-video.open { display: block; }
.haer-yt-embed { position: relative; width: 100%; height: 0; padding-top: 56.25%; background: #000; }
.haer-yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.haer-audio-toggle {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
	padding: 10px 15px; background: #1e293b; color: #fff; border: 0; cursor: pointer;
	font-size: 13px; font-family: inherit; transition: background 0.15s ease;
}
.haer-audio-toggle:hover { background: #334155; }
.haer-audio-toggle-icon { font-size: 14px; }
.haer-song-video.audio-only .haer-yt-embed {
	position: absolute; width: 1px; height: 1px; padding-top: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Slightly bigger title when this list is embedded inside a koleksi detail page */
#haer-koleksi-detail-app .haer-song-title { font-size: 17px; }

@media (max-width: 600px) {
	.haer-song-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	.haer-song-cover-wrap {
		flex: 0 0 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	.haer-song-cover {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	.haer-play-badge { border-radius: 6px; }
	#haer-koleksi-detail-app .haer-song-cover-wrap { flex-basis: auto; width: 100%; }
}