/* Homepage "Featured" section — kept deliberately different from the
   .tt-ppl-item song list (round spinning disc art in a horizontal shelf,
   rather than the list's stacked rows), so it reads as its own thing. */

.tt-featured-section {
	padding-top: 20px;
	padding-bottom: 20px;
}

.tt-featured-grid {
	display: flex;
	gap: 28px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 8px 4px 28px;
	margin: 0 -4px;
	-webkit-overflow-scrolling: touch;
}

.tt-featured-grid::-webkit-scrollbar {
	height: 6px;
}

.tt-featured-grid::-webkit-scrollbar-thumb {
	background: var(--tt-border-color);
	border-radius: 4px;
}

.tt-featured-card {
	position: relative;
	scroll-snap-align: start;
	flex: 0 0 210px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 16px 24px;
	border-radius: 0;
	background: color-mix(in oklab, var(--card-color, var(--tt-main-color)) 34%, var(--tt-bg-color));
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

a.tt-featured-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgb(0 0 0 / 20%);
}

/* Teaser cards (no audio + lyrics yet) render as a div, not a link — no page to go to. */
div.tt-featured-card {
	cursor: default;
}

.tt-featured-vinyl {
	width: 136px;
	height: 136px;
	margin-bottom: 18px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 10px 26px rgb(0 0 0 / 30%);
}

.tt-featured-vinyl img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tt-featured-badge {
	display: inline-block;
	font-family: var(--tt-alter-font);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--card-color, var(--tt-main-color));
	color: #fff;
	margin-bottom: 12px;
}

.tt-featured-card-title {
	font-family: var(--tt-alter-font);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0;
}

@media (max-width: 600px) {
	.tt-featured-card {
		flex-basis: 168px;
		padding: 20px 12px 16px;
	}

	.tt-featured-vinyl {
		width: 108px;
		height: 108px;
	}
}