/* ==========================================================================
   Reset & base
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
	background: var(--color-bg);
	overflow-x: hidden;
	transition: background-color 0.2s ease, color 0.2s ease;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

button, input, textarea, select {
	font-family: inherit;
}

button {
	cursor: pointer;
}

/* Hide scrollbars on horizontally-scrolling rails, keep them keyboard/functionally scrollable */
.mv-scroll-x {
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.mv-scroll-x::-webkit-scrollbar {
	display: none;
}

/* ==========================================================================
   Site shell — mobile-first, matches prototype's 430px single column,
   then opens up to a contained magazine layout on larger screens.
   ========================================================================== */

.mv-site {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.mv-section {
	padding: 24px var(--gutter) 0;
}

.mv-section--flush-top {
	padding-top: 0;
}

/* Two-column layout: main content + desktop sidebar */
.mv-layout {
	display: block;
}

.mv-main-column {
	max-width: var(--container-max);
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.mv-has-sidebar .mv-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 40px;
		align-items: start;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--gutter);
	}

	.mv-has-sidebar .mv-main-column {
		max-width: 640px;
	}

	.mv-sidebar {
		position: sticky;
		top: calc(var(--header-h) + 20px);
	}
}

.mv-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.mv-sidebar {
		display: block;
	}
}

/* ==========================================================================
   Grids
   ========================================================================== */

.mv-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (min-width: 700px) {
	.mv-grid-2 {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}
}

@media (min-width: 1024px) {
	.mv-no-sidebar .mv-grid-2 {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Recently Added on the homepage always has the Trending/Categories/
	   Newsletter sidebar beside it (see .mv-home-grid below), so its main
	   column is narrower than a true "no sidebar" page — 3 columns, not 4. */
	.mv-ga-recently .mv-grid-2 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mv-footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px 16px;
}

.mv-footer-brand {
	grid-column: 1 / -1;
}

.mv-footer-newsletter {
	display: none;
}

@media (min-width: 700px) {
	.mv-footer-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.mv-footer-brand {
		grid-column: 1 / 3;
	}
}

@media (min-width: 1024px) {
	.mv-footer-grid {
		grid-template-columns: 2fr 1fr 1fr 1fr;
		gap: 40px;
	}

	.mv-footer-brand {
		grid-column: auto;
	}

	.mv-footer-newsletter {
		display: block;
	}
}

/* ==========================================================================
   Mobile/desktop visibility utilities
   ========================================================================== */

.mv-desktop-only {
	display: none;
}

.mv-mobile-only {
	display: block;
}

@media (min-width: 1024px) {
	.mv-desktop-only {
		display: block;
	}

	.mv-mobile-only {
		display: none;
	}
}

/* ==========================================================================
   Top bar (desktop only)
   ========================================================================== */

.mv-topbar {
	display: none;
}

@media (min-width: 1024px) {
	.mv-topbar {
		display: block;
		background: var(--color-accent);
	}

	.mv-topbar__inner {
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 6px var(--gutter-lg, 48px);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
	}
}

/* ==========================================================================
   Header (logo, pill nav, inline search, Submit) — one design at every
   breakpoint. CSS Grid reflows the same markup from a 3-row mobile stack
   (logo+submit / search / scrollable nav) into a single desktop row,
   rather than swapping between separate mobile/desktop markup blocks.
   ========================================================================== */

.mv-header__row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"logo . submit"
		"search search search"
		"nav nav nav";
	align-items: center;
	gap: 10px 12px;
	padding: 12px var(--gutter);
	max-width: var(--container-max);
	margin: 0 auto;
}

.mv-logo-wrap { grid-area: logo; }

.mv-nav-desktop__submit { grid-area: submit; }

.mv-nav-desktop__search {
	grid-area: search;
	width: 100%;
}

.mv-nav-desktop {
	grid-area: nav;
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}
.mv-nav-desktop::-webkit-scrollbar { display: none; }

@media (min-width: 1024px) {
	.mv-header__row {
		grid-template-columns: auto auto 1fr auto auto;
		grid-template-areas: "logo nav nav search submit";
		gap: 16px 24px;
		padding: 0 var(--gutter-lg, 48px);
		height: 68px;
	}

	.mv-nav-desktop {
		overflow-x: visible;
	}

	.mv-nav-desktop__search {
		width: 240px;
	}
}

/* ==========================================================================
   Homepage container: at desktop widths, the wider --gutter-lg page-edge
   margin (matching the prototype's 48px) becomes the single source of
   horizontal spacing — individual sections' own --gutter padding is
   zeroed out here so the two don't stack and misalign, same reasoning as
   .mv-single-main below.
   ========================================================================== */

@media (min-width: 1024px) {
	.mv-front-page {
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--gutter-lg, 48px);
	}

	.mv-front-page .mv-section,
	.mv-front-page .mv-hero-section {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ==========================================================================
   Hero + "Hot Right Now" sidebar
   ========================================================================== */

.mv-hero-section {
	margin-bottom: 12px;
}

@media (min-width: 700px) {
	.mv-hero-section {
		margin-bottom: 24px;
	}
}

.mv-hero-grid {
	display: block;
}

@media (min-width: 1024px) {
	.mv-hero-grid {
		display: grid;
		grid-template-columns: 1fr 340px;
		gap: 24px;
		align-items: stretch;
	}
}

.mv-hero-sidebar {
	display: none;
}

@media (min-width: 1024px) {
	.mv-hero-sidebar {
		display: block;
	}
}

/* ==========================================================================
   Homepage main grid: Recently Added (left) + Trending/Categories/
   Newsletter (right). Mobile stacks everything in DOM order via flex;
   desktop reflows into a real 2-column grid — same underlying content
   for Recently Added/Categories/Newsletter (no duplication), only the
   Trending widget genuinely differs in presentation between breakpoints
   (decorated mobile section vs compact desktop sidebar card), so that
   one alone has two renderings, swapped via .mv-desktop-only/.mv-mobile-only.
   ========================================================================== */

.mv-home-grid {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (min-width: 700px) {
	.mv-home-grid {
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.mv-home-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 28px;
		align-items: start;
		grid-template-areas:
			"recently trending"
			"recently newsletter";
	}

	.mv-ga-recently { grid-area: recently; }
	.mv-ga-trending-desktop { grid-area: trending; }
	.mv-ga-newsletter { grid-area: newsletter; }
}

/* ==========================================================================
   Single track: breadcrumb, main+sidebar grid, Track Info + Player row
   ========================================================================== */

.mv-breadcrumb {
	padding: 16px var(--gutter-lg, 48px) 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: 6px;
	font-size: 12px;
	color: var(--color-text-faint);
}

.mv-breadcrumb a {
	color: var(--color-accent);
}

.mv-breadcrumb__current {
	color: var(--color-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mv-single-grid {
	display: block;
}

@media (min-width: 1024px) {
	.mv-single-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 32px;
		align-items: start;
		max-width: var(--container-max);
		margin: 20px auto 0;
		padding: 0 var(--gutter-lg, 48px);
	}

	.mv-single-sidebar {
		position: sticky;
		top: calc(var(--header-h) + 20px);
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	/* The outer .mv-single-grid now supplies the page-edge gutter
	   (--gutter-lg), so every section inside .mv-single-main that
	   previously self-padded with --gutter needs that zeroed out —
	   otherwise the two gutters stack and content in different
	   sections ends up visibly misaligned with each other. */
	.mv-single-main .mv-section,
	.mv-single-main .mv-track-meta {
		padding-left: 0;
		padding-right: 0;
	}
}

.mv-track-player-row {
	display: block;
}

.mv-player-col {
	margin-top: 24px;
}

@media (min-width: 700px) {
	.mv-track-player-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
		align-items: start;
		padding: 0 var(--gutter);
	}

	.mv-player-col {
		margin-top: 0;
	}

	.mv-track-player-row .mv-section {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 1024px) {
	.mv-track-player-row {
		padding: 0;
	}
}

/* ==========================================================================
   Related-track carousels: horizontal scroll on mobile, static grid on
   desktop (matches the prototype's non-scrolling 5-up "More by Artist").
   ========================================================================== */

@media (min-width: 1024px) {
	.mv-carousel {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		overflow: visible;
	}

	.mv-carousel-card {
		width: auto;
	}

	.mv-carousel-card__art {
		width: 100%;
	}
}

/* ==========================================================================
   Section header row ("Explore" / "See All →")
   ========================================================================== */

.mv-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	gap: 12px;
}

.mv-section-head h2 {
	margin-bottom: 2px;
}

.mv-see-all {
	font-size: 12px;
	font-weight: 700;
	color: var(--color-accent);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Utility
   ========================================================================== */

.mv-divider {
	height: 1px;
	background: var(--color-border-soft);
	margin: 24px var(--gutter) 0;
}

.mv-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
}

.mv-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--color-surface);
	color: var(--color-text);
	padding: 12px 18px;
	border-radius: var(--radius-sm);
	font-weight: 700;
}

.mv-skip-link:focus {
	left: 12px;
	top: 12px;
}