/*
 * Blog Details — single `post` view (template-parts/blog/blog-details.php).
 * The banner reuses .about-hero as-is (assets/css/about.css, also
 * enqueued for is_singular('post') — see inc/enqueue.php); everything
 * below it (title/meta/content/back-link) is this page's own, built on
 * the shared tokens in blog-listing.css.
 */

.blog-details {
	max-width: var(--bd-max-width);
	margin: 60px auto 100px;
	padding: 0 24px;
}

.blog-details__meta {
	margin: 0 0 30px;
	font-family: var(--bd-font);
	font-size: 15px;
	line-height: 22px;
	color: var(--bd-muted);
}

.blog-details__meta-sep {
	margin: 0 8px;
}

.blog-details__content {
	font-family: var(--bd-font);
	font-size: 17px;
	line-height: 28px;
	color: var(--bd-body);
}

.blog-details__content > * + * {
	margin-top: 20px;
}

.blog-details__content h2,
.blog-details__content h3,
.blog-details__content h4 {
	color: var(--bd-heading);
	font-weight: 600;
	line-height: 1.3;
}

.blog-details__content img {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.blog-details__content a {
	color: var(--bd-green);
	text-decoration: underline;
}

.blog-details__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	font-family: var(--bd-font);
	font-size: 15px;
	font-weight: 500;
	color: var(--bd-green);
	text-decoration: none;
}

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

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

	.blog-details__content {
		font-size: 16px;
		line-height: 26px;
	}
}

/* =============================================================================
   Banner
   =============================================================================
   Additions on top of the shared .about-hero (assets/css/about.css), scoped
   to .blog-hero so the other pages using that hero are unaffected. */

/* Horizontal half of "centred in the banner" — the vertical half already
   comes from .about-hero's own align-items:center. Specificity of 0,2,0
   keeps this ahead of the plain .about-hero__title rules inside about.css's
   tablet/mobile media queries. */
.blog-hero .about-hero__title {
	text-align: center;
}

/* Fallback for posts with no Featured Image: the same gradient the shared
   "Bennelongia Expertise" band uses (.about-section--band-blue in
   about.css). background-color overrides .about-hero's #1B250E, which would
   otherwise sit underneath. */
.blog-hero--gradient {
	background-color: transparent;
	background-image: linear-gradient(135deg, #C0E4F7 0%, #F1F9FE 100%);
}

/* The hero's dark scrim and white title exist to keep text legible over a
   photo. Over this light gradient they do the opposite, so the scrim goes
   and the title takes the site's heading colour. */
.blog-hero--gradient .about-hero__overlay {
	display: none;
}

.blog-hero--gradient .about-hero__title {
	color: #030712;
}

/* Shorter than the shared hero at every step of its own ladder (about.css
   uses 400/320/260/200px) — a blog post's banner is a strip above the
   article, not a landing-page hero. These live in their own media queries
   rather than one flat rule because a single unscoped .blog-hero height
   would also override about.css's breakpoints, which sit earlier in the
   cascade, and flatten the banner to one height on every screen. */
.blog-hero {
	height: 280px;
}

@media (max-width: 1400px) {
	.blog-hero {
		height: 240px;
	}
}

@media (max-width: 1024px) {
	.blog-hero {
		height: 200px;
	}
}

@media (max-width: 640px) {
	.blog-hero {
		height: 160px;
	}
}