/* ==========================================================================
   Beatz Nation Fancy Home
   Design tokens — light theme (white bg / black text / grey / red accent)
   ========================================================================== */
.bf-root {
	--bf-bg:           #FFFFFF;  /* page background */
	--bf-ink:          #111111;  /* primary text */
	--bf-surface:      #F5F5F5;  /* card background */
	--bf-surface-2:    #ECECEC;  /* secondary surface (placeholders, scrollbar track) */
	--bf-line:         #DCDCDC;  /* borders on light surfaces */
	--bf-muted:        #6E6E73;  /* muted grey text on light surfaces */

	--bf-dark:         #111111;  /* deliberately dark surfaces */
	--bf-on-dark:      #F2F2F0;  /* text on dark surfaces */
	--bf-muted-on-dark:#B8B8BC;  /* muted text on dark surfaces */
	--bf-line-dark:    rgba(255,255,255,0.14); /* dividers on dark surfaces */
	--bf-surface-dark: #1D1D1D;  /* raised surface on top of a dark bar */

	--bf-red:        #E31B23;
	--bf-red-dim:    #B4151B;

	--bf-display: "Anton", Impact, sans-serif;
	--bf-body: "Work Sans", -apple-system, Helvetica, Arial, sans-serif;
	--bf-mono: "Space Mono", monospace;

	--bf-radius: 2px;
	--bf-max: 1760px;

	background: var(--bf-bg);
	color: var(--bf-ink);
	font-family: var(--bf-body);
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;

	/* Full-bleed breakout: escapes the theme's boxed page/content wrapper
	   so this stretches edge-to-edge of the browser window, regardless of
	   how narrow the page template's own container is. */
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow-x: hidden;
}

.bf-root * {
	box-sizing: border-box;
}

.bf-root a {
	color: inherit;
	text-decoration: none;
}

.bf-root img {
	max-width: 100%;
	display: block;
}

.bf-root :focus-visible {
	outline: 2px solid var(--bf-red);
	outline-offset: 2px;
}

.bf-eyebrow {
	display: block;
	font-family: var(--bf-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bf-red);
	margin-bottom: 6px;
}

/* ==========================================================================
   Shell / layout
   ========================================================================== */
.bf-shell {
	max-width: var(--bf-max);
	margin: 0 auto;
	padding: 32px 24px 80px;
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 40px;
	align-items: start;
}

.bf-shell--no-sidebar {
	grid-template-columns: 1fr;
}

.bf-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

/* ==========================================================================
   Hero / Spotlight
   ========================================================================== */
.bf-hero {
	border: 1px solid var(--bf-line);
}

.bf-hero__link {
	display: block;
	position: relative;
}

.bf-hero__media {
	position: relative;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: var(--bf-surface);
}

.bf-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.bf-hero__link:hover .bf-hero__media img {
	transform: scale(1.04);
}

.bf-hero__scrim {
	position: absolute;
	inset: 0;
	/* stays dark regardless of theme — it overlays a photo so hero text stays readable */
	background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.88) 100%);
}

.bf-hero__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 32px;
}

.bf-hero__tag {
	display: inline-block;
	font-family: var(--bf-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bf-ink);
	background: var(--bf-red);
	padding: 4px 10px;
	margin-bottom: 12px;
}

.bf-hero__title {
	font-family: var(--bf-display);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(28px, 4vw, 48px);
	line-height: 1.05;
	margin: 0 0 8px;
	max-width: 26ch;
	color: var(--bf-on-dark) !important; /* sits on the dark scrim over the photo */
}

.bf-hero__meta {
	font-family: var(--bf-mono);
	font-size: 12px;
	color: var(--bf-muted-on-dark);
}

/* ==========================================================================
   VU meter — signature element
   ========================================================================== */
.bf-vu {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 16px;
	margin-left: 12px;
	transform: translateY(-2px);
}

.bf-vu__bar {
	width: 3px;
	background: var(--bf-red);
	border-radius: 1px;
	animation: bf-vu-bounce 1.1s ease-in-out infinite;
}

.bf-vu__bar:nth-child(1) { height: 40%; animation-delay: 0s; }
.bf-vu__bar:nth-child(2) { height: 70%; animation-delay: 0.12s; }
.bf-vu__bar:nth-child(3) { height: 100%; animation-delay: 0.24s; }
.bf-vu__bar:nth-child(4) { height: 60%; animation-delay: 0.36s; }
.bf-vu__bar:nth-child(5) { height: 85%; animation-delay: 0.48s; }

@keyframes bf-vu-bounce {
	0%, 100% { transform: scaleY(0.4); }
	50%      { transform: scaleY(1); }
}

/* ==========================================================================
   Section headers + crates (horizontal scroll)
   ========================================================================== */
.bf-crate {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.bf-crate.bf-visible {
	opacity: 1;
	transform: translateY(0);
}

.bf-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--bf-line);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.bf-section__title {
	font-family: var(--bf-display);
	text-transform: uppercase;
	font-weight: 400;
	font-size: clamp(22px, 2.4vw, 30px);
	margin: 0;
	display: flex;
	align-items: center;
	color: var(--bf-ink) !important;
}

.bf-section__scroll-hint {
	font-family: var(--bf-mono);
	font-size: 11px;
	color: var(--bf-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.bf-crate__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 240px;
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 8px;
	scroll-snap-type: x proximate;
	scrollbar-width: thin;
	scrollbar-color: var(--bf-red-dim) var(--bf-surface-2);
}

.bf-crate__track::-webkit-scrollbar {
	height: 6px;
}
.bf-crate__track::-webkit-scrollbar-track {
	background: var(--bf-surface-2);
}
.bf-crate__track::-webkit-scrollbar-thumb {
	background: var(--bf-red-dim);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.bf-card {
	scroll-snap-align: start;
	background: var(--bf-surface);
	border: 1px solid var(--bf-line);
	display: flex;
	flex-direction: column;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.bf-card:hover {
	border-color: var(--bf-red);
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.bf-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bf-surface-2);
	display: block;
}

.bf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(45%) contrast(1.05);
	transition: filter 0.3s ease, transform 0.4s ease;
}

.bf-card:hover .bf-card__media img {
	filter: grayscale(0%) contrast(1.05);
	transform: scale(1.03);
}

.bf-noimg {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bf-surface-2);
}

.bf-noimg span {
	font-family: var(--bf-display);
	font-size: 42px;
	color: var(--bf-line);
}

.bf-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--bf-on-dark);
	background: radial-gradient(circle, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 70%);
}

.bf-card--profile .bf-card__media {
	aspect-ratio: 4 / 5;
}

.bf-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
}

.bf-card__title {
	font-family: var(--bf-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	color: var(--bf-ink) !important;
}

.bf-card__meta {
	font-family: var(--bf-mono);
	font-size: 10px;
	color: var(--bf-muted);
	text-transform: uppercase;
}

/* ==========================================================================
   Sidebar chart
   ========================================================================== */
.bf-side {
	position: sticky;
	top: 24px;
}

.bf-chart {
	border: 1px solid var(--bf-line);
	background: var(--bf-surface);
	padding: 20px;
}

.bf-chart__head {
	border-bottom: 1px solid var(--bf-line);
	padding-bottom: 12px;
	margin-bottom: 14px;
}

.bf-chart__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bf-chart__item {
	border-bottom: 1px solid var(--bf-line);
}
.bf-chart__item:last-child {
	border-bottom: none;
}

.bf-chart__item a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	color: var(--bf-ink) !important;
}

.bf-chart__item:hover a {
	color: var(--bf-red);
}

.bf-chart__rank {
	font-family: var(--bf-display);
	font-size: 22px;
	color: var(--bf-line);
	width: 34px;
	flex: 0 0 auto;
}

.bf-chart__item:hover .bf-chart__rank {
	color: var(--bf-red);
}

.bf-chart__thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--bf-surface-2);
}

.bf-chart__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bf-chart__title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
}

/* ==========================================================================
   Admin-only diagnostic box (shown only to logged-in admins, only when a
   section's query returns zero posts, so slug mismatches are self-serve)
   ========================================================================== */
.bf-debug {
	border: 1px dashed var(--bf-red);
	background: #FFF4F4;
	color: var(--bf-ink);
	padding: 16px 18px;
	font-family: var(--bf-mono);
	font-size: 12px;
	line-height: 1.6;
}

.bf-debug strong {
	color: var(--bf-red);
}

.bf-debug ul {
	margin: 6px 0 0;
	padding-left: 18px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
	.bf-shell {
		grid-template-columns: 1fr;
	}
	.bf-side {
		position: static;
	}
}

@media (max-width: 560px) {
	.bf-crate__track {
		grid-auto-columns: 118px;
		gap: 12px;
	}
	.bf-card__body {
		padding: 8px 4px 10px;
		gap: 4px;
	}
	.bf-card__title {
		font-size: 12px;
		line-height: 1.25;
	}
	.bf-card__meta {
		font-size: 9px;
	}
	.bf-noimg span {
		font-size: 24px;
	}
	.bf-card--profile .bf-card__media {
		aspect-ratio: 1 / 1;
	}
	.bf-hero__title {
		font-size: 28px;
	}
	.bf-shell {
		padding: 20px 16px 56px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.bf-vu__bar {
		animation: none !important;
	}
	.bf-crate {
		opacity: 1;
		transform: none;
		transition: none;
	}
}