/* --------------------
   album strip layout
   -------------------- */

.album-strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	padding: 8px 4px 12px;
	margin-top: 8px;
	border: 3px ridge var(--border);
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* keep the horizontal scrollbar visible */
.album-strip {
	scrollbar-width: thin;           /* Firefox */
}

/* WebKit scrollbars (Chrome, etc.) */
.album-strip::-webkit-scrollbar {
	height: 10px;                    /* horizontal scrollbar height */
}
.album-strip::-webkit-scrollbar-track {
	background: var(--bg);
}
.album-strip::-webkit-scrollbar-thumb {
	border: 2px ridge var(--border);
	background: var(--accent);
}

/* --------------------
   album strip layout
   -------------------- */

.album-strip {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	padding: 8px 4px 12px;
	margin-top: 8px;
	border: 3px ridge var(--border);
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
}

/* square album card */
.album-card {
	flex: 0 0 200px; /* album width */
	border: 3px ridge var(--border);
	background: linear-gradient(var(--gradientTop), var(--gradientBottom));
	padding: 6px;
	box-sizing: border-box;
}

/* force square album images */
.album-card .album-image {
	width: 100%;
	aspect-ratio: 1 / 1;     /* forces perfect square */
	object-fit: cover;        /* crops edges cleanly */
	border: 2px solid var(--border);
	margin-bottom: 4px;
}

.album-card h2 {
	font-size: 1rem;
	margin: 4px 0;
	color: var(--accent);
}

.album-card p {
	font-size: 0.9rem;
	line-height: 1.3;
}



/* --------------------
   MEDIA layout
   -------------------- */

/* mobile layout: cards wrap instead of endless scrolling */
@media (max-width: 600px) {
	.album-strip
	{
		flex-wrap: wrap;      /* allow multiple rows */
		overflow-x: visible;  /* no horizontal scrolling */
	}

	.album-card
	{
		/* two cards per row; adjust if you want one per row */
		flex: 1 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}