/*
 * Our Blogs page — the Select Year header, loading spinner, and
 * "Load More Blogs" button all reuse .bn-publications-module's existing
 * CSS as-is (assets/css/bn-publications.css — the module wrapper carries
 * both .bn-publications-module and .blog-listing-module, see
 * inc/blog/bn-blog-shortcode.php). Only the section wrapper and the card
 * list/card itself are new here, since no existing card matches this
 * design (no thumbnail, single-column, date/title/excerpt/read-more).
 */

.blog-listing {
	--bl-font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--bl-heading: #030712;
	--bl-body: #364153;
	--bl-muted: #6A7282;
	--bl-green: #7FB04F;
	--bl-row-bg: #F7F7F8;
	--bl-row-border: #F1F1F3;
	--bl-max-width: 1704px;

	max-width: var(--bl-max-width);
	margin: 60px auto 0;
	padding: 0 24px 100px;
}

/* Card list */
.blog-listing .blog-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.blog-list-card {
	display: block;
	background: var(--bl-row-bg);
	border: 1px solid var(--bl-row-border);
	border-radius: 14px;
	padding: 24px 30px;
}

.blog-list-card__date {
	display: block;
	font-family: var(--bl-font);
	font-size: 14px;
	line-height: 20px;
	color: var(--bl-muted);
	margin-bottom: 8px;
}

.blog-list-card__title {
	margin: 0 0 8px;
	font-family: var(--bl-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
}

.blog-list-card__title a {
	color: var(--bl-heading);
	text-decoration: none;
}

.blog-list-card__title a:hover,
.blog-list-card__title a:focus-visible {
	text-decoration: underline;
	outline: none;
}

.blog-list-card__excerpt {
	margin: 0 0 12px;
	font-family: var(--bl-font);
	font-size: 15px;
	line-height: 22px;
	color: var(--bl-body);
}

.blog-list-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--bl-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--bl-green);
	text-decoration: none;
}

.blog-list-card__read-more:hover,
.blog-list-card__read-more:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 640px) {
	.blog-listing {
		margin-top: 40px;
		padding: 0 16px 40px;
	}

	.blog-list-card {
		padding: 18px 20px;
	}

	.blog-list-card__title {
		font-size: 18px;
		line-height: 26px;
	}
}