/* ============================================================
   Homepage-specific layout
   ============================================================ */

/* ---------- Hero zone ---------- */
.hero-zone {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: var(--space-6);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--line);
	margin-bottom: var(--space-3);
}

.right-rail {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* ---------- Homepage section spacing ---------- */
.homepage-section { margin-bottom: var(--space-6); }

/* ---------- Opinion 3-col, News 4-col ---------- */
.three-col {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}

.four-col {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

/* ---------- In-depth + most-read ---------- */
.two-col-with-sidebar {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-6);
	align-items: start;
}

/* ---------- Sponsored card spacing ---------- */
.sponsored-card-wrap { margin: var(--space-5) 0; }

/* ---------- Lead story — no featured image fallback ---------- */
.lead-story-no-image {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--bg-soft);
	border: 1px solid var(--line);
}

/* ============================================================
   Sidebar topic browser — renders when most-read is empty.
   Gives the sidebar a content-rich fallback instead of a lone ad.
   ============================================================ */
.hp-sidebar-topics {
	background: var(--bg-cream);
	border: 1px solid var(--line);
	padding: var(--space-5);
	margin-bottom: var(--space-5);
}
.hp-sidebar-topics__heading {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 2px solid var(--ink);
}
.sidebar-topic-list { list-style: none; }
.sidebar-topic-list li { border-bottom: 1px solid var(--line); }
.sidebar-topic-list li:last-child { border-bottom: none; }
.sidebar-topic-list a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	font-family: var(--font-ui);
	font-size: var(--text-md);
	font-weight: 500;
	color: var(--ink-soft);
	transition: color var(--ease-quick);
}
.sidebar-topic-list a:hover { color: var(--brand); }
.sidebar-topic-list__bar {
	width: 3px;
	height: 12px;
	background: var(--brand);
	border-radius: 1px;
	flex-shrink: 0;
}

/* ============================================================
   Section background banding — utility class for cream sections
   ============================================================ */
.section-band {
	background: var(--bg-cream);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	margin-left: calc(-1 * var(--gutter));
	margin-right: calc(-1 * var(--gutter));
	padding-left: var(--gutter);
	padding-right: var(--gutter);
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
}

/* ============================================================
   More Top Stories — headline-only list under the hero lead story.
   The hero grid stretches .lead-col to the height of the taller
   right rail; this block fills that column instead of leaving a
   blank band. Text-only by design so it never competes with the
   lead image or the rail's cards.
   ============================================================ */
.more-top-stories {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 2px solid var(--ink);
}
.more-top-stories__heading {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--space-2);
}
.more-top-stories__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.more-top-stories__item {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--line);
}
.more-top-stories__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.more-top-stories__item a { display: block; }
.more-top-stories__kicker {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: var(--space-1);
}
.more-top-stories__title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: var(--ink);
	transition: color var(--ease-quick);
}
.more-top-stories__item a:hover .more-top-stories__title { color: var(--brand-dark); }
.more-top-stories__meta {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	color: var(--muted);
	margin-top: var(--space-1);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hero-zone            { grid-template-columns: 1fr; }
	.three-col            { grid-template-columns: 1fr; }
	.four-col             { grid-template-columns: repeat(2, 1fr); }
	.two-col-with-sidebar { grid-template-columns: 1fr; }
	.more-top-stories     { margin-top: var(--space-4); }
}

@media (max-width: 600px) {
	.four-col         { grid-template-columns: 1fr; }
	.homepage-section { margin-bottom: var(--space-5); }
}