/* [haer_koleksi_list] — GRID view (cards) + DETAIL view (header). The
   detail view's song list itself is rendered with the shared
   .haer-song-list markup — see song-list.css, which must be loaded
   alongside this file. */

.haer-koleksi-container { max-width: 1100px; margin: 30px auto; padding: 0 15px; font-family: system-ui, -apple-system, sans-serif; position: relative; }
.haer-koleksi-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; }
.haer-koleksi-card {
	display: flex; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px;
	overflow: hidden; transition: 0.15s;
}
.haer-koleksi-card:hover { border-color: #2271b1; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.haer-koleksi-card-cover {
	flex: 0 0 50%; max-width: 50%; position: relative; height: 0;
	padding-top: 28.125%; /* 50% width times 9/16 - constant fraction of the card own width */
	background: #f0f0f1; overflow: hidden;
}
.haer-koleksi-card-cover img {
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
	object-fit: cover; display: block;
}
.haer-koleksi-card-cover-placeholder { position: absolute; inset: 0; background: #f0f0f1; }
.haer-koleksi-card-body { flex: 1; min-width: 0; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.haer-koleksi-card-title { font-weight: 600; font-size: 18px; margin: 0; }
.haer-koleksi-card-meta { font-size: 13px; color: #777; display: flex; gap: 6px; align-items: center; }
.haer-koleksi-card-desc { font-size: 14px; color: #555; line-height: 1.5; flex: 1; }
.haer-koleksi-card-btn {
	align-self: flex-start; margin-top: 6px; padding: 8px 18px; background: #2271b1; color: #fff;
	border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 0.15s ease;
}
.haer-koleksi-card-btn:hover { background: #195a8d; color: #fff; }

/* Koleksi — DETAIL view */
.haer-koleksi-back-link {
	display: inline-block; margin-bottom: 18px; color: #2271b1; text-decoration: none; font-size: 14px;
}
.haer-koleksi-back-link:hover { text-decoration: underline; }
.haer-koleksi-detail-header { display: flex; gap: 24px; margin-bottom: 28px; }
.haer-koleksi-detail-cover {
	flex: 0 0 260px; max-width: 260px; height: 146px; position: relative;
	background: #f0f0f1; border-radius: 8px; overflow: hidden;
}
.haer-koleksi-detail-cover img {
	position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
	object-fit: cover; display: block;
}
.haer-koleksi-detail-info { flex: 1; min-width: 0; }
.haer-koleksi-detail-info h1 { margin: 0 0 8px; }
.haer-koleksi-detail-desc { margin-top: 10px; font-size: 15px; color: #444; line-height: 1.6; }

@media (max-width: 600px) {
	.haer-koleksi-card { flex-direction: column; }
	.haer-koleksi-card-cover { flex-basis: auto; max-width: 100%; padding-top: 56.25%; }
	.haer-koleksi-detail-header { flex-direction: column; }
	.haer-koleksi-detail-cover { flex-basis: auto; max-width: 100%; height: 0; padding-top: 56.25%; }
}