/* ============================================================
   Card styles not already in components.css
   ============================================================ */

/* ---------- Lead story (homepage hero left) ---------- */
.lead-story a { display: block; }
.lead-story img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	margin-bottom: var(--space-4);
	display: block;
}
.lead-story .headline {
	font-family: var(--font-display);
	font-size: var(--text-7xl);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -1px;
	color: var(--ink);
	margin-bottom: var(--space-3);
	transition: color var(--ease-quick);
}
.lead-story:hover .headline { color: var(--brand-dark); }
.lead-story .dek { font-size: var(--text-2xl); line-height: 1.45; color: var(--ink-soft); margin-bottom: var(--space-3); }

/* ---------- Secondary story (right rail) ---------- */
.secondary-story { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.secondary-story:last-child { border-bottom: none; padding-bottom: 0; }
.secondary-story a { display: block; }
.secondary-story img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	margin-bottom: var(--space-3);
	display: block;
}
.secondary-story .headline {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.3px;
	margin-bottom: var(--space-2);
	transition: color var(--ease-quick);
}
.secondary-story:hover .headline { color: var(--brand-dark); }
.secondary-story .dek { font-size: var(--text-md); color: var(--muted); line-height: 1.4; margin-bottom: var(--space-2); }

/* ---------- Opinion card (3-col homepage) ---------- */
.opinion-card .author-row { margin-bottom: var(--space-3); }
.opinion-card .headline {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: var(--space-2);
	font-style: italic;
	transition: color var(--ease-quick);
}
.opinion-card:hover .headline { color: var(--brand-dark); }
.opinion-card .dek { font-size: var(--text-md); color: var(--muted); line-height: 1.4; }

/* ---------- News card (4-col homepage) ---------- */
.news-card a { display: block; }
.news-card img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	margin-bottom: var(--space-2);
	display: block;
}
.news-card .headline {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: var(--space-1);
	transition: color var(--ease-quick);
}
.news-card:hover .headline { color: var(--brand-dark); }
.news-card .timestamp { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--muted); }

/* ---------- Most-read list item ---------- */
.most-read-section { background: var(--bg-cream); border: 1px solid var(--line); padding: var(--space-6); }
.most-read-section h3 {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-4);
	border-bottom: 2px solid var(--ink);
}
.most-read-list { list-style: none; counter-reset: most-read; }
.most-read-item {
	counter-increment: most-read;
	display: flex;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--line);
}
.most-read-item:last-child { border-bottom: none; padding-bottom: 0; }
.most-read-item::before {
	content: counter(most-read);
	font-family: var(--font-display);
	font-size: var(--text-5xl);
	font-weight: 300;
	color: var(--brand);
	line-height: 1;
	min-width: 32px;
}
.most-read-item .item-headline {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
}
.most-read-item a:hover .item-headline { color: var(--brand); }

/* ---------- Sponsored card ---------- */
.sponsored-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
	padding: var(--space-5);
	background: var(--bg-cream);
	border: 1px solid var(--line);
	align-items: center;
}
.sponsored-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.sponsored-card .kicker { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-2); }
.sponsored-card .kicker::before { content: "\25C6"; margin-right: 6px; color: var(--brand); }
.sponsored-card .headline { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 600; line-height: 1.2; margin-bottom: var(--space-3); }
.sponsored-card .dek { font-size: var(--text-md); color: var(--muted); line-height: 1.5; margin-bottom: var(--space-3); }
.sponsored-card .partner { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--muted); font-weight: 500; }
.sponsored-card .partner strong { color: var(--ink); }
.sponsored-card .disclosure { font-family: var(--font-ui); font-size: 10px; color: var(--muted-soft); margin-top: var(--space-3); font-style: italic; }

@media (max-width: 900px) {
	.lead-story img { height: 280px; }
	.lead-story .headline { font-size: var(--text-5xl); }
	.sponsored-card { grid-template-columns: 1fr; }
}