/* ==========================================================================
   Blog styling — post content, the single-post meta row & hero image,
   related posts, and pagination (home.php, single.php, search.php).
   ========================================================================== */
.section.search-results { padding-top: 56px; }
.post-content { max-width: 760px; margin: 0 auto; font-size: 1.05rem; }
.post-content p { margin-bottom: 1.5em; }
.post-content h2, .post-content h3 { margin-top: 1.6em; }
.post-meta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; color: var(--color-text-light); font-size: 0.9rem; margin-bottom: 28px; }
.post-meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.post-hero-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-bottom: 40px; }
.post-hero-image img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.related-posts { max-width: 760px; margin: 60px auto 0; padding-top: 40px; border-top: 1px solid var(--color-border); }

.pagination-row { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
.pagination-row a, .pagination-row span { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--color-border); font-weight: 600; font-size: 0.9rem; }
.pagination-row .current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination-row a:hover { background: var(--color-bg-alt); }

/* ---- Blog cards (.blog-grid): blog page, home "From the Journal" and
   "More From the Journal" under each post. Each card in a row hovers in
   its own colour — green, saffron, terracotta — for the top bar, date,
   title and the "Read More" pill. ---- */
.blog-grid .card { --blog-accent: var(--color-primary); }
.blog-grid .card:nth-child(3n+2) { --blog-accent: var(--color-secondary); }
.blog-grid .card:nth-child(3n) { --blog-accent: var(--accent-terracotta); }
.blog-grid .card::before { background: var(--blog-accent); }
.blog-grid .card:hover { box-shadow: 0 20px 44px rgba(43, 38, 32, 0.16); }
.blog-grid .card .card-meta { transition: color var(--transition); }
.blog-grid .card:hover .card-meta { color: var(--blog-accent); }
.blog-grid .card:hover h3 { color: var(--blog-accent); }
.blog-grid .card .card-link {
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid var(--color-border);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.blog-grid .card:hover .card-link {
	background: var(--blog-accent);
	border-color: var(--blog-accent);
	color: #fff;
}
.blog-grid .card:hover .card-link::after { transform: translateX(4px); }
/* The pill has its own fill, so drop the sitewide growing underline
   (cards.css .card-link::before) that otherwise shows under the pill. */
.blog-grid .card .card-link::before { display: none; }