/**
 * Single article shell alignment.
 *
 * The article page shares the contact page's calm canvas and hero surface.
 * Article content, metadata and cover layout remain owned by their existing
 * component rules; this file only controls the page pattern and hero shell.
 */

body.single-post.irandesigner-exact-ui .id-single-blog-page {
	position: relative;
	isolation: isolate;
}

body.single-post.irandesigner-exact-ui .id-single-blog-page__pattern {
	position: absolute;
	z-index: -10;
	inset: 0;
	background-size: 64px 64px;
	opacity: 0.8;
	pointer-events: none;
}

/* The upper colour mesh uses the same measured intensity and reach as the
   contact page, preventing an extra warm/orange cast directly below header. */
body.single-post.irandesigner-exact-ui
	.id-single-blog-page
	> .hero-mesh {
	height: 31.25rem;
	opacity: 0.42;
}

/* Match the contact hero's warm glass surface without copying its geometry. */
body.single-post.irandesigner-exact-ui .id-single-article-hero {
	border: 0;
	background: linear-gradient(
		135deg,
		rgb(255 252 248 / 94%) 0%,
		rgb(248 239 226 / 84%) 55%,
		rgb(255 255 255 / 90%) 100%
	);
	box-shadow:
		var(--ir-shadow-strong),
		inset 0 1px 0 rgb(255 255 255 / 62%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* A colour wash preserves the contact palette; it is intentionally soft and
   non-geometric, and sits below the existing article layout. */
body.single-post.irandesigner-exact-ui .id-single-article-hero::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	display: block;
	background:
		radial-gradient(circle at 82% 18%, rgb(39 103 200 / 10%) 0%, transparent 40%),
		radial-gradient(circle at 12% 88%, rgb(209 154 88 / 12%) 0%, transparent 46%);
	content: "";
	pointer-events: none;
}

body.single-post.irandesigner-exact-ui .id-single-article-hero::after,
body.single-post.irandesigner-exact-ui .id-single-article-hero__orb {
	display: none;
	content: none;
}

/* Reading navigation stays distinct from the page, but drops the former
   cream/copper wash in favour of a brighter neutral-white editorial surface. */
body.single-post.irandesigner-exact-ui
	:is(.id-article-sidebar__panel, .blog-mobile-toc) {
	border-color: rgb(255 255 255 / 82%);
	background: linear-gradient(
		145deg,
		rgb(255 255 255 / 97%),
		rgb(250 252 252 / 95%) 56%,
		rgb(255 253 250 / 93%)
	);
	box-shadow:
		0 18px 48px -38px rgb(45 52 62 / 24%),
		inset 0 1px 0 rgb(255 255 255 / 84%);
}

@media (max-width: 767px) {
	body.single-post.irandesigner-exact-ui .id-single-blog-page__pattern {
		background-size: 48px 48px;
		opacity: 0.62;
	}

	body.single-post.irandesigner-exact-ui .id-single-article-hero::before {
		background:
			radial-gradient(circle at 88% 12%, rgb(39 103 200 / 8%) 0%, transparent 42%),
			radial-gradient(circle at 8% 92%, rgb(209 154 88 / 10%) 0%, transparent 48%);
	}
}