/*
 * Blog listing (page-blog.php) + single post (single.php) presentation.
 * Loaded only on those two contexts — see inc/enqueue.php.
 */

/* Single post hero -------------------------------------------------------- */
.blog-hero {
	position: relative;
	background-size: cover;
	background-position: center;
	padding-block: 56px 64px;
	overflow: hidden;
}
.blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--gradient-dark);
	opacity: 0.88;
}
/* A background-image is present whenever the post has a featured image —
   lean the overlay more transparent then so the photo actually shows through
   the dark tint instead of being hidden behind it. */
.blog-hero[style*="background-image"] .blog-hero__overlay {
	opacity: 0.72;
}
.blog-hero__inner {
	position: relative;
	z-index: 1;
}
.blog-hero__breadcrumb {
	margin-bottom: 18px;
}
/*
 * solaris_breadcrumbs() wraps its own output in ".breadcrumb-bar" (a light
 * background + border card, meant for the light section it normally sits
 * in) — strip that box back to plain text so it blends into the dark hero
 * instead of floating a pale card on top of it.
 */
.blog-hero__breadcrumb .breadcrumb-bar {
	background: none;
	border: none;
	padding: 0;
	margin-bottom: 0;
}
.blog-hero__breadcrumb .woocommerce-breadcrumb,
.blog-hero__breadcrumb .woocommerce-breadcrumb__crumb a,
.blog-hero__breadcrumb .woocommerce-breadcrumb__sep-icon {
	color: rgba(255, 255, 255, 0.65);
}
.blog-hero__breadcrumb .woocommerce-breadcrumb__crumb:last-child {
	color: rgba(255, 255, 255, 0.92);
}
.blog-hero__breadcrumb .woocommerce-breadcrumb__crumb a:hover {
	color: var(--color-primary);
}
.blog-hero .eyebrow { color: var(--color-primary); }
.blog-hero__title {
	color: var(--color-white);
	max-width: 820px;
	margin-bottom: 18px;
}
.blog-hero__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.92rem;
}
.blog-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.blog-hero__meta-sep { opacity: 0.6; }
.blog-hero__meta-icon { width: 15px; height: 15px; }

/* Article body / prose ---------------------------------------------------- */
.blog-post__body { max-width: 760px; }
.blog-content { font-size: 1.05rem; line-height: 1.8; color: var(--color-text); }
.blog-content > p:first-of-type {
	font-size: 1.18rem;
	color: var(--color-heading);
}
.blog-content h2 {
	margin-top: 2.2em;
	padding-left: 16px;
	border-left: 4px solid var(--color-accent);
	font-size: 1.5rem;
}
.blog-content h3 {
	margin-top: 1.8em;
	color: var(--color-dark-green);
}
.blog-content p { margin-bottom: 1.3em; }
.blog-content strong { color: var(--color-dark-green); }
.blog-content a { text-decoration: underline; text-decoration-color: var(--color-border); }
.blog-content ul, .blog-content ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.blog-content li { margin-bottom: 0.5em; }
.blog-content ul li::marker { color: var(--color-accent); }
.blog-content blockquote {
	margin: 1.6em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--color-primary);
	background: var(--color-background-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--color-heading);
}
.blog-content img {
	display: block;
	width: 100%;
	height: auto;
	margin: 1.8em 0;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
}

/* "More from the blog" ----------------------------------------------------- */
.blog-related { border-top: 1px solid var(--color-border); }

/* Blog listing (page-blog.php) card thumbnails ----------------------------- */
.grid-3 .feature-card > a > img {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin-bottom: 16px;
}

/* Pagination ---------------------------------------------------------------
   paginate_links() (default "plain" type) outputs a flat run of sibling
   <a>/<span class="page-numbers">, with no wrapping list — style them
   directly rather than assuming a <ul>. */
.blog-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 48px;
}
.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 6px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-heading);
	font-weight: 700;
	font-size: 0.92rem;
	transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.blog-pagination a.page-numbers:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: translateY(-2px);
}
.blog-pagination .page-numbers.current {
	background: var(--gradient-primary);
	border-color: transparent;
	color: var(--color-white);
	box-shadow: var(--shadow-button);
}
.blog-pagination .page-numbers.dots {
	border: none;
	background: none;
	color: var(--color-muted);
}
.blog-pagination .prev.page-numbers,
.blog-pagination .next.page-numbers {
	padding-inline: 0;
}
.blog-pagination__arrow { width: 16px; height: 16px; }
.blog-pagination__arrow--prev { transform: rotate(180deg); }

@media (max-width: 640px) {
	.blog-hero { padding-block: 40px 40px; }
}