/* ------------------------------------------------------------------ *
 * Single-post hero — featured image as background of the title area,
 * title centered on top. No color overlay; the image shows in full.
 * PHP (functions.php → mcs_single_hero_bg_var) injects --mcs-hero-bg
 * as a CSS variable with the image URL.
 * ------------------------------------------------------------------ */
body.single-post .entry-hero.post-hero-section {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	display: grid;
	place-items: center;
}

/* ::before = featured image at full sharpness, no blur. */
body.single-post .entry-hero.post-hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--mcs-hero-bg);
	background-size: cover;
	background-position: center;
	z-index: 0;
}

/* ::after = the gradient overlay (equivalent of a .hero-section-overlay
   sibling div). Solid palette8 on the left 36%, fading to translucent
   white on the right — image breathes through where it lands. */
body.single-post .entry-hero.post-hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--global-palette8, #f9f7f5) 36%,
		rgba(255, 255, 255, 0.5) 100%
	);
	z-index: 1;
	pointer-events: none;
}

/* Lift the title block above the image + overlay. Title alignment stays
   at Kadence's default (centered via post_title_align). */
body.single-post .entry-hero.post-hero-section .entry-header {
	position: relative;
	z-index: 2;
}

/* Hide the standalone thumbnail Kadence still renders below the hero —
   we're now using it as the hero background. */
body.single-post .kadence-thumbnail-position-behind {
	display: none;
}

@media (max-width: 767px) {
	body.single-post .entry-hero.post-hero-section {
		min-height: 380px;
	}
}