/* =============================================================================
   Black Star News — homepage
   =============================================================================
   Loaded only on the front page (inc/enqueue.php), so the article template never
   downloads these grid rules.

   Reads tokens from tokens.css and component styles from base.css; nothing here
   redefines a colour or a type size.
   ========================================================================== */

/* =============================================================================
   DEVELOPMENT FIXTURE RIBBON
   Visible only when fixtures are active. Deliberately loud.
   ========================================================================== */
.dev-ribbon {
	background: repeating-linear-gradient(
		45deg,
		var(--bsn-sponsored-bg),
		var(--bsn-sponsored-bg) 10px,
		var(--bsn-band-soft) 10px,
		var(--bsn-band-soft) 20px
	);
	border-block: 2px solid var(--bsn-brass);
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink);
}

.dev-ribbon__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bsn-space-3xs) var(--bsn-space-2xs);
	align-items: baseline;
	padding-block: var(--bsn-space-2xs);
}

.dev-ribbon strong {
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
}

/* A fixture card is unmistakable: dashed, and its placeholder is hatched. */
[data-bsn-fixture] {
	outline: 1px dashed var(--bsn-rule-strong);
	outline-offset: 3px;
}

.card__placeholder {
	display: block;
	inline-size: 100%;
	background:
		repeating-linear-gradient(
			135deg,
			var(--bsn-band-soft),
			var(--bsn-band-soft) 8px,
			var(--bsn-band) 8px,
			var(--bsn-band) 16px
		);
}

/* =============================================================================
   HERO
   Source order is lead → secondary → rail, so mobile reads the lead first and
   the reading order matches the visual order. Desktop moves the secondary to
   column 1 with grid placement — the only reordering on the page, and it keeps
   three closely-related items in one section rather than rearranging unrelated
   content.
   ========================================================================== */
.hero {
	padding-block: var(--bsn-space-lg) var(--bsn-space-xl);
}

.hero__grid {
	display: grid;
	gap: var(--bsn-space-lg);
}

.hero__lead .card__title {
	font-size: var(--bsn-text-3xl);
	text-align: center;
}

.hero__lead .card__body {
	align-items: center;
	text-align: center;
	gap: var(--bsn-space-2xs);
}

.hero__lead .card__dek {
	max-inline-size: 56ch;
	margin-inline: auto;
}

.hero__lead .card__media {
	aspect-ratio: 3 / 2;
}

.hero__rail {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.hero__rail .card {
	padding-block: var(--bsn-space-xs);
	border-bottom: var(--bsn-hairline);
}

.hero__rail .card:last-child {
	border-bottom: 0;
}

.hero__rail .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
}

@media (min-width: 60rem) {
	.hero__grid {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr) minmax(0, 0.9fr);
		align-items: start;
	}

	/* Lead is first in the source; place it centre. */
	.hero__lead { grid-column: 2; grid-row: 1; }
	.hero__secondary { grid-column: 1; grid-row: 1; }
	.hero__rail { grid-column: 3; grid-row: 1; }

	.hero__secondary,
	.hero__rail {
		padding-top: var(--bsn-space-2xs);
	}

	.hero__secondary { border-inline-end: var(--bsn-hairline); padding-inline-end: var(--bsn-space-md); }
	.hero__rail { border-inline-start: var(--bsn-hairline); padding-inline-start: var(--bsn-space-md); }
}

/* =============================================================================
   SECTION FURNITURE
   ========================================================================== */
.section-note {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	color: var(--bsn-ink-muted);
	margin: calc(var(--bsn-space-md) * -1 + 0.25rem) 0 var(--bsn-space-md);
	max-inline-size: 62ch;
}

.band--dark .section-note { color: var(--bsn-on-dark-muted); }

.trending,
.watch,
.opinion,
.latest {
	padding-block: var(--bsn-space-lg);
}

.pillar,
.more {
	padding-block: var(--bsn-space-xl);
}

.investigations {
	padding-block: var(--bsn-space-xl);
}

/* =============================================================================
   TRENDING
   ========================================================================== */
.trending__list {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.trending__item {
	border-bottom: var(--bsn-hairline);
	margin: 0;
}

.trending__item:last-child { border-bottom: 0; }

.card--trending {
	flex-direction: row;
	align-items: baseline;
	gap: var(--bsn-space-sm);
	padding-block: var(--bsn-space-2xs);
}

.card--trending .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
	line-height: var(--bsn-leading-snug);
}

@media (min-width: 60rem) {
	.trending__list {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0 var(--bsn-space-md);
	}

	.trending__item {
		border-bottom: 0;
		border-inline-start: var(--bsn-hairline);
		padding-inline-start: var(--bsn-space-sm);
	}

	.trending__item:first-child {
		border-inline-start: 0;
		padding-inline-start: 0;
	}

	.card--trending { flex-direction: column; gap: var(--bsn-space-3xs); }
}

/* =============================================================================
   PILLARS — Africa, U.S. & Black America
   ========================================================================== */
.pillar__grid {
	display: grid;
	gap: var(--bsn-space-lg);
}

.pillar__feature .card__title { font-size: var(--bsn-text-xl); }

.pillar__support {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.pillar__support .card {
	padding-block: var(--bsn-space-xs);
	border-bottom: 1px solid var(--bsn-rule-soft);
}

.pillar__support .card:last-child { border-bottom: 0; }

.pillar__support .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
}

@media (min-width: 60rem) {
	.pillar__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

	.pillar__support {
		border-inline-start: var(--bsn-hairline);
		padding-inline-start: var(--bsn-space-md);
	}
}

/* =============================================================================
   INVESTIGATIONS — the dark band
   ========================================================================== */
.investigations__grid {
	display: grid;
	gap: var(--bsn-space-lg);
}

.investigations .card__title,
.investigations .card__dek,
.investigations .byline,
.investigations .byline__name {
	color: var(--bsn-on-dark);
}

.investigations .card__dek,
.investigations .byline { color: var(--bsn-on-dark-muted); }

.investigations .card__title a:hover,
.investigations .byline__name:hover { color: var(--bsn-brass-light); }

.investigations .eyebrow { color: var(--bsn-brass-light); }

.investigations__feature .card__title { font-size: var(--bsn-text-2xl); }

.investigations__feature .card__media { background: var(--bsn-dark-raised); }

.investigations__support {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.investigations__support .card {
	padding-block: var(--bsn-space-sm);
	border-top: 1px solid var(--bsn-rule-dark);
}

.investigations__support .card__title { font-size: var(--bsn-text-md); }

.investigations__tip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bsn-space-2xs) var(--bsn-space-sm);
	margin: var(--bsn-space-lg) 0 0;
	padding-top: var(--bsn-space-md);
	border-top: 1px solid var(--bsn-rule-dark);
}

.investigations__tip-label {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-xs);
	letter-spacing: var(--bsn-tracking-wide);
	text-transform: uppercase;
	color: var(--bsn-on-dark-muted);
}

/* Fixture-mode CTA shape. Not a link, so nothing crawlable is produced. */
.button--inert { cursor: default; opacity: 0.75; }

@media (min-width: 60rem) {
	.investigations__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

	.investigations__support {
		border-inline-start: 1px solid var(--bsn-rule-dark);
		padding-inline-start: var(--bsn-space-md);
	}

	.investigations__support .card:first-child { border-top: 0; padding-top: 0; }
}

/* =============================================================================
   BSN WATCH
   ========================================================================== */
.watch__grid {
	display: grid;
	gap: var(--bsn-space-md);
}

.card--watch {
	background: var(--bsn-surface);
	border: var(--bsn-hairline);
	padding: var(--bsn-space-sm);
	gap: var(--bsn-space-2xs);
}

.card--watch .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
}

@media (min-width: 48rem) {
	.watch__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   OPINION
   ========================================================================== */
.opinion__grid {
	display: grid;
	gap: var(--bsn-space-md);
}

.opinion__grid .card--opinion .card__title { font-size: var(--bsn-text-md); }

@media (min-width: 48rem) {
	.opinion__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.opinion__grid .card--opinion {
		border-inline-end: var(--bsn-hairline);
		padding-inline-end: var(--bsn-space-md);
	}

	.opinion__grid .card--opinion:last-child { border-inline-end: 0; }
}

/* =============================================================================
   MORE FROM — supporting coverage, deliberately quieter
   ========================================================================== */
.more__grid {
	display: grid;
	gap: var(--bsn-space-lg);
}

.more__label {
	font-family: var(--bsn-font-sans);
	font-size: var(--bsn-text-2xs);
	font-weight: var(--bsn-weight-black);
	letter-spacing: var(--bsn-section-label-tracking);
	text-transform: uppercase;
	color: var(--bsn-ink-muted);
	margin: 0 0 var(--bsn-space-2xs);
	padding-bottom: var(--bsn-space-3xs);
	border-bottom: 1px solid var(--bsn-rule-soft);
}

.card--more {
	padding-block: var(--bsn-space-xs);
	border-bottom: 1px solid var(--bsn-rule-soft);
}

.card--more:last-child { border-bottom: 0; }

.card--more .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
}

@media (min-width: 48rem) {
	.more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =============================================================================
   LATEST NEWS — text only, no image requests
   ========================================================================== */
.latest__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.latest__item { margin: 0; }

.card--latest-row {
	flex-direction: row;
	align-items: baseline;
	gap: var(--bsn-space-md);
	padding-block: var(--bsn-space-xs);
	border-bottom: var(--bsn-hairline);
}

.latest__item:last-child .card--latest-row { border-bottom: 0; }

.card--latest-row .card__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bsn-space-3xs) var(--bsn-space-md);
	inline-size: 100%;
}

.card--latest-row .card__title {
	font-size: var(--bsn-text-base);
	font-weight: var(--bsn-weight-semibold);
	flex: 1 1 18rem;
	min-inline-size: 0;
}

.card--latest-row .byline {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	/*
	 * ink-muted, not ink-faint. These timestamps are real content — when a story
	 * was published — at 11px, so WCAG 1.4.3 asks 4.5:1. The fainter tone
	 * measured 3.59:1 and failed.
	 */
	color: var(--bsn-ink-muted);
}

/* =============================================================================
   REDUCED MOTION — nothing on this page animates, recorded deliberately
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.dev-ribbon { background-image: none; background: var(--bsn-sponsored-bg); }
}