/*
 * NEMRA Single Article Hero — V2 (Figma 571:22987).
 * Blue band (gradient #2173b3 → #042a48, hard stop to the page ground at
 * ~65%) with the article's own image blurred + blue-washed as a backdrop.
 * Content: 13px breadcrumbs, white serif H2 title, one-line meta, then the
 * 575px article image overlapping the band edge onto the light ground.
 */

.nemra-single-article-hero {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 200px 80px 64px;
	box-sizing: border-box;
	overflow: hidden;
	background: linear-gradient(180deg, var(--nemra-blue, #2173b3) 0%, var(--nemra-blue-dark, #042a48) 65%, #f6f6f6 65.06%);
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	color: var(--nemra-light, #fcfdfd);
}

/* The 65% hard stop is sized for the tall with-image layout, where the 575px
 * media overlaps the band edge onto the light ground. Without a media image
 * the section is short and 65% lands mid-title — white text on the page
 * ground — so the band runs the full section instead. */
.nemra-single-article-hero:not(.nemra-single-article-hero--has-image) {
	background: linear-gradient(180deg, var(--nemra-blue, #2173b3) 0%, var(--nemra-blue-dark, #042a48) 100%);
}

.nemra-single-article-hero:not(.nemra-single-article-hero--has-image) .nemra-single-article-hero__backdrop {
	height: 100%;
}

/* Article image, blurred and washed, confined to the band area (top 65%). */
.nemra-single-article-hero__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 65%;
	overflow: hidden;
	pointer-events: none;
}

.nemra-single-article-hero--has-image .nemra-single-article-hero__backdrop::before {
	content: "";
	position: absolute;
	inset: -30px;
	background-image: var(--nemra-sa-backdrop);
	background-size: cover;
	background-position: center;
	filter: blur(15px);
}

.nemra-single-article-hero__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(33, 115, 179, 0.8) 0%, rgba(4, 42, 72, 0.8) 100%), rgba(26, 26, 23, 0.3);
}

.nemra-single-article-hero__header {
	position: relative;
	max-width: 1150px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

.nemra-single-article-hero__breadcrumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: rgba(252, 253, 253, 0.48);
}

.nemra-single-article-hero__crumb {
	color: rgba(252, 253, 253, 0.48);
	text-decoration: none;
}

.nemra-single-article-hero__crumb.is-current {
	color: var(--nemra-light, #fcfdfd);
	font-weight: 500;
}

.nemra-single-article-hero__crumb-sep {
	font-size: 11px;
	color: rgba(252, 253, 253, 0.48);
}

.nemra-single-article-hero__title {
	margin: 0;
	max-width: 993px;
	/* H2 (comp 797:23056) — Poppins Medium, not the serif. */
	font-family: var(--nemra-font-body, 'Poppins', system-ui, sans-serif);
	font-size: 48px;
	line-height: 1.2;
	letter-spacing: -1.5px;
	font-weight: 500;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-single-article-hero__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--nemra-light, #fcfdfd);
}

.nemra-single-article-hero__meta-item + .nemra-single-article-hero__meta-item::before {
	content: "⋅";
	margin-right: 6px;
}

.nemra-single-article-hero__meta-item--tag { display: none; }

.nemra-single-article-hero__media {
	width: 100%;
	height: 575px;
	border-radius: 8px;
	overflow: hidden;
	background: #d9d9d9;
}

/* `.elementor` prefix outranks Elementor's `.elementor img { height: auto }`
 * — see the cover-image note in assets/css/nemra-blocks.css. Without it this
 * 1632x1920 photo renders 1353px tall in a 575px frame and you see sky. */
.elementor .nemra-single-article-hero__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Mobile comp (797:23136) is a different composition from desktop: a fixed
 * 600px gradient band with the content bottom-anchored inside it, then the
 * image full-bleed and square BELOW the band — no overlap onto the ground,
 * no radius, no side gutters. The section container carries 0 padding at
 * mobile (single-article.json) so the band and image run edge to edge. */
@media (max-width: 991px) {
	.nemra-single-article-hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		min-height: 600px;
		padding: 160px 24px 48px;
	}

	.nemra-single-article-hero--has-image {
		min-height: 840px;
		padding-bottom: 0;
		background: linear-gradient(180deg, var(--nemra-blue, #2173b3) 0%, var(--nemra-blue-dark, #042a48) calc(100% - 240px), #f6f6f6 calc(100% - 240px));
	}

	.nemra-single-article-hero--has-image .nemra-single-article-hero__backdrop {
		height: calc(100% - 240px);
	}

	.nemra-single-article-hero__header { gap: 16px; }

	.nemra-single-article-hero__breadcrumbs { gap: 4px; }

	.nemra-single-article-hero__title {
		font-size: 32px;
		letter-spacing: -1px;
	}

	.nemra-single-article-hero__meta { opacity: 0.8; }

	/* 32px + the header's 16px flex gap = the comp's 48px meta→image seam. */
	.nemra-single-article-hero__media {
		width: calc(100% + 48px);
		height: 240px;
		margin: 32px -24px 0;
		border-radius: 0;
	}
}