/**
 * Insight Header Module
 * Full-bleed hero: solid orange left panel (sub-header + H1), photo right,
 * split exactly 50/50. Structure mirrors case_study_header_module but with
 * a 50/50 ratio, orange fill, and a white dot (sub-header text is category-
 * derived, not an editable field).
 */

/* ===========================
   # Section
=========================== */

.insight-header-module {
	overflow: hidden;
	background: var(--nec-orange, #EB6E00);
}

.insight-header-module__row {
	display: flex;
	align-items: stretch;
	min-height: 460px;
}

/* ===========================
   # Text column — solid orange, left-aligned to match .container
=========================== */

.insight-header-module__text-col {
	flex: 0 0 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 48px;
	padding-right: 64px;
}

/* ===========================
   # Sub-header (dot + label) — category-derived
=========================== */

.insight-header-module__sub-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.insight-header-module__dot {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--nec-white, #fff);
	box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
}

.insight-header-module__sub-header-text {
	font-family: var(--nec-font);
	font-size: clamp(0.8125rem, calc(0.793rem + 0.088vw), 0.9375rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nec-white, #fff);
}

/* ===========================
   # Main header
=========================== */

.insight-header-module__main-header {
	margin: 0;
	color: var(--nec-white, #fff);
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: clamp(2rem, calc(1.5rem + 2.2vw), 3.25rem);
	line-height: 1.15;
}

/* ===========================
   # Image column
=========================== */

.insight-header-module__image-col {
	flex: 0 0 50%;
	min-width: 0;
	/* Only affects the uncropped --natural image variant below (its height
	   is auto, shorter than the stretched column) — the default cover image
	   still explicitly fills 100% height/width regardless of this. */
	display: flex;
	align-items: center;
}

.insight-header-module__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Uncropped variant — natural aspect ratio, no cover crop */
.insight-header-module__image--natural {
	width:      calc(100% - 40px);
	height:     auto;
	margin:     20px;
	object-fit: initial;
}

/* ===========================
   # Responsive — 1280px
=========================== */

@media (max-width: 1280px) {
	.insight-header-module__row {
		min-height: 400px;
	}

	.insight-header-module__text-col {
		padding-right: 48px;
	}
}

/* ===========================
   # Responsive — 991px
=========================== */

@media (max-width: 991px) {
	.insight-header-module__row {
		min-height: 340px;
	}

	.insight-header-module__text-col {
		flex: 0 0 60%;
		padding: 36px;
		padding-left: 24px;
		padding-right: 32px;
		gap: 16px;
	}

	.insight-header-module__image-col {
		flex: 0 0 40%;
	}
}

/* ===========================
   # Responsive — 767px (stack: text above, image below)
=========================== */

@media (max-width: 767px) {
	.insight-header-module__row {
		flex-direction: column;
		min-height: 0;
	}

	.insight-header-module__text-col {
		flex: 0 0 auto;
		padding: 32px 24px;
	}

	.insight-header-module__image-col {
		flex: 0 0 auto;
		height: 220px;
	}
}