/**
 * H2 image group — D4 lunette niche (picked 2026-09-16).
 *
 * Live markup from Perfmatters `5-h2-image-grouper.php`:
 *   .entry-content > .h2-image-group > img.imagediv + h2.joli-heading
 *
 * Direct-child scope keeps `.cp-verse-unit .h2-image-group.cp-verse-picture`
 * on the verse-unit lunette. Course Additional CSS still overlays
 * `body.post-template-default h2.joli-heading`; this sheet beats that
 * overlay on grouped headings and leftover direct-child H2s.
 *
 * Niche stone, lip, and gold fillet match verse-unit.css so the two
 * read as one building. The heading sits on the page ground, not on stone.
 */

body.single-post .entry-content > .h2-image-group {
	--cp-h2ig-lip: 12px;
	--cp-h2ig-arch-outer: 100px;
	--cp-h2ig-arch-inner: calc(var(--cp-h2ig-arch-outer) - var(--cp-h2ig-lip));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: var(--cp-space-64, 4rem) 0 var(--cp-space-12, 0.75rem);
	position: relative;
}

body.single-post .entry-content > .h2-image-group::before {
	content: "";
	grid-row: 1;
	grid-column: 1;
	z-index: 0;
	border-radius: 50% 50% 4px 4px / var(--cp-h2ig-arch-outer) var(--cp-h2ig-arch-outer) 4px 4px;
	background-color: #e8e4dc;
	background-image: linear-gradient(180deg, rgba(247, 241, 232, 0.4), rgba(180, 135, 57, 0.06));
	box-shadow:
		inset 0 20px 30px rgba(40, 32, 18, 0.16),
		inset 0 -8px 16px rgba(40, 32, 18, 0.08),
		0 1px 0 rgba(255, 251, 247, 0.7);
}

body.single-post .entry-content > .h2-image-group > img,
body.single-post .entry-content > .h2-image-group > img.imagediv {
	grid-row: 1;
	grid-column: 1;
	z-index: 1;
	position: relative;
	display: block !important;
	box-sizing: border-box;
	width: calc(100% - (2 * var(--cp-h2ig-lip))) !important;
	max-width: none;
	height: auto !important;
	margin: var(--cp-h2ig-lip);
	padding: 0;
	aspect-ratio: 21 / 9 !important;
	object-fit: cover !important;
	object-position: 50% 18%;
	border-radius: 50% 50% 2px 2px / var(--cp-h2ig-arch-inner) var(--cp-h2ig-arch-inner) 2px 2px;
	background: var(--cp-color-surface-inverse, #002159);
}

body.single-post .entry-content > .h2-image-group::after {
	content: "";
	grid-row: 1;
	grid-column: 1;
	z-index: 2;
	pointer-events: none;
	box-sizing: border-box;
	width: calc(100% - (2 * var(--cp-h2ig-lip)));
	justify-self: center;
	align-self: start;
	margin-top: var(--cp-h2ig-lip);
	aspect-ratio: 21 / 9;
	border-radius: 50% 50% 2px 2px / var(--cp-h2ig-arch-inner) var(--cp-h2ig-arch-inner) 2px 2px;
	box-shadow:
		inset 0 0 0 1px rgba(180, 135, 57, 0.75),
		inset 0 0 0 4px rgba(247, 241, 232, 0.32),
		inset 0 0 0 5px rgba(180, 135, 57, 0.4),
		inset 0 18px 28px -14px rgba(40, 32, 18, 0.32);
}

body.single-post .entry-content > .h2-image-group > h2,
body.post-template-default .entry-content > .h2-image-group > h2.joli-heading,
body.post-template-default .entry-content > .h2-image-group > h2.jtoc-heading {
	grid-row: 2;
	grid-column: 1;
	z-index: 1;
	margin: calc(var(--cp-h2ig-lip) + var(--cp-space-20, 1.25rem)) auto 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-top: 0 !important;
	background: transparent !important;
	position: static !important;
	max-width: 26ch;
	text-align: center;
	text-wrap: balance;
	color: var(--cp-color-ink, #002159);
}

body.post-template-default .entry-content > h2.joli-heading,
body.post-template-default .entry-content > h2.jtoc-heading {
	margin: var(--cp-space-40, 2.5rem) 0 var(--cp-space-16, 1rem) !important;
	padding: 0 !important;
	border: 0 !important;
	border-top: 0 !important;
	background: transparent !important;
	position: static !important;
}

@media (max-width: 600px) {
	body.single-post .entry-content > .h2-image-group {
		--cp-h2ig-lip: 8px;
		--cp-h2ig-arch-outer: 60px;
		margin-top: var(--cp-space-48, 3rem);
}

	body.single-post .entry-content > .h2-image-group > img,
	body.single-post .entry-content > .h2-image-group > img.imagediv {
		aspect-ratio: 2 / 1 !important;
}

	body.single-post .entry-content > .h2-image-group::after {
		aspect-ratio: 2 / 1;
}
}