/*
 * MHG homepage — section styles.
 * Seven sections: hero, value strip, brands, about, why-us, partnership CTA.
 * Mobile-first; min-width media queries scale up to 768 / 1024 / 1440 px.
 */

/* ============================================================
 * Eyebrow variant — used on the dark partnership section.
 * ============================================================ */
.mhg-eyebrow--on-dark {
	color: var(--mhg-color-white-45);
}

/* ============================================================
 * Section 1 — HERO
 * Responsive <picture> element with a mobile portrait crop and a
 * desktop landscape crop. Picture sits at z-index 0, overlay at 1,
 * content at 2 — the previous background-image approach has been
 * retired in favour of a real DOM image for performance + LCP wins.
 * ============================================================ */
.mhg-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--mhg-color-off-white);
	/* Mobile: the portrait banner renders at its natural aspect (864:1821),
	   so we cap the section to viewport-relative bounds. The 768px breakpoint
	   resets all three and swaps to the landscape banner via aspect-ratio. */
	min-height: 600px;
	height: 90vh;
	max-height: 100vh;
	/* Single-column flex container — gives the inner content layer a reliable
	   way to fill the section's height without depending on `height: 100%`
	   resolving against parents whose height comes from aspect-ratio. The
	   absolutely-positioned picture and ::before overlay don't participate. */
	display: flex;
	flex-direction: column;
	/* Bulletproof full-bleed: force exactly viewport width regardless of any
	   parent layout quirk or flex-intrinsic-sizing edge case. The negative
	   margin-left compensates for any centring offset from a constrained
	   parent. body { overflow-x: hidden } below catches potential spillover. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
}

/* The responsive image fills the section behind the overlay + content.
   The <picture> element is collapsed out of layout via display: contents
   so the <img> attaches directly to .mhg-hero as its positioned ancestor.
   Without this, some browsers respect the <img>'s intrinsic width attribute
   on the picture wrapper and leave a gap on viewports wider than 1833 px. */
.mhg-hero__image {
	display: contents;
}

.mhg-hero__image img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Mobile overlay — halved opacity per director feedback (the new images
   already carry darkened regions baked in around the text area). */
.mhg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to right,
		rgba(15, 34, 66, 0.4) 0%,
		rgba(15, 34, 66, 0.3) 60%,
		rgba(15, 34, 66, 0) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.mhg-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1;
	width: 100%;
	max-width: var(--mhg-container-max);
	margin: 0 auto;
	padding: var(--mhg-space-xl) var(--mhg-space-sm);
	box-sizing: border-box;
	/* Mobile: content sits in the top half of the frame so products stay
	   visible below. The 768px breakpoint switches to vertical centring. */
	align-items: flex-start;
}

.mhg-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 40rem;
}

.mhg-hero__heading {
	margin: 0 0 var(--mhg-space-sm);
	font-family: var(--mhg-font-heading);
	font-size: 2.4rem;
	font-weight: 400;
	color: var(--mhg-color-white);
	line-height: 1.15;
}

.mhg-hero__rule {
	display: block;
	width: 50px;
	height: 3px;
	margin: 0 0 var(--mhg-space-md);
	background-color: var(--mhg-color-gold);
}

.mhg-hero__lede {
	margin: 0 0 var(--mhg-space-md);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: rgba(255, 255, 255, 0.92);
	max-width: 36rem;
}

/* CTA row — wraps primary + optional secondary. Wraps cleanly on narrow
   widths; gap matches the spacing between heading and lede. */
.mhg-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mhg-space-sm);
}

/* ----------------------------------------------------------------
 * Overlay intensity variants
 * Base .mhg-hero::before above carries the "light" values. The two
 * modifier classes below override the gradient stops at each
 * breakpoint. Class is emitted from front-page.php based on the
 * hero_overlay_intensity Carbon Fields select.
 * ---------------------------------------------------------------- */
.mhg-hero--overlay-medium::before {
	background-image: linear-gradient(
		to right,
		rgba(15, 34, 66, 0.55) 0%,
		rgba(15, 34, 66, 0.4) 60%,
		rgba(15, 34, 66, 0) 100%
	);
}

.mhg-hero--overlay-heavy::before {
	background-image: linear-gradient(
		to right,
		rgba(15, 34, 66, 0.7) 0%,
		rgba(15, 34, 66, 0.55) 60%,
		rgba(15, 34, 66, 0) 100%
	);
}

@media (min-width: 768px) {
	.mhg-hero {
		/* Section sized to match the desktop banner's native aspect (1833×858)
		   so the new image renders edge-to-edge without object-fit cropping. */
		aspect-ratio: 1833 / 858;
		/* Reset the mobile-only sizing rules — aspect-ratio drives height now. */
		min-height: 0;
		height: auto;
		max-height: none;
	}

	/* Lighter overlay — at tablet+ the content column is constrained by
	   max-width, so we don't need to shield it from imagery further right.
	   Opacities also halved per director feedback. */
	.mhg-hero::before {
		background-image: linear-gradient(
			to right,
			rgba(15, 34, 66, 0.36) 0%,
			rgba(15, 34, 66, 0.26) 35%,
			rgba(15, 34, 66, 0.1) 65%,
			rgba(15, 34, 66, 0.03) 100%
		);
	}

	/* Tablet+ overlay variants — paired with the mobile rules above. */
	.mhg-hero--overlay-medium::before {
		background-image: linear-gradient(
			to right,
			rgba(15, 34, 66, 0.5) 0%,
			rgba(15, 34, 66, 0.35) 35%,
			rgba(15, 34, 66, 0.15) 65%,
			rgba(15, 34, 66, 0) 85%
		);
	}

	.mhg-hero--overlay-heavy::before {
		background-image: linear-gradient(
			to right,
			rgba(15, 34, 66, 0.65) 0%,
			rgba(15, 34, 66, 0.45) 35%,
			rgba(15, 34, 66, 0.25) 65%,
			rgba(15, 34, 66, 0) 85%
		);
	}

	.mhg-hero__inner {
		padding: var(--mhg-space-xl) var(--mhg-space-md);
		/* Tablet+ centres the content over the left third of the frame. */
		align-items: center;
	}

	.mhg-hero__heading {
		font-size: 2.8rem;
	}
}

@media (min-width: 1024px) {
	.mhg-hero {
		/* Stop the hero from growing absurdly tall on ultrawide monitors. */
		max-height: 720px;
	}

	.mhg-hero__content {
		max-width: 500px;
	}

	.mhg-hero__heading {
		font-size: var(--mhg-font-size-page-heading);
	}
}

/* ============================================================
 * Section 2 — VALUE STRIP
 * ============================================================ */
.mhg-value-strip {
	background-color: var(--mhg-color-teal);
	color: var(--mhg-color-white);
}

.mhg-value-strip__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mhg-space-md) var(--mhg-space-sm);
	list-style: none;
	margin: 0;
	padding: var(--mhg-space-lg) var(--mhg-space-sm);
	width: 100%;
	max-width: var(--mhg-container-max);
	margin-inline: auto;
}

.mhg-value-strip__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	text-align: center;
}

.mhg-value-strip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--mhg-color-gold);
	border-radius: var(--mhg-radius-md);
	color: var(--mhg-color-gold);
}

.mhg-value-strip__icon svg {
	width: 24px;
	height: 24px;
	display: block;
}

.mhg-value-strip__label {
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-value-label);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mhg-color-white);
	max-width: 14rem;
	line-height: 1.4;
}

@media (min-width: 1024px) {
	.mhg-value-strip__list {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--mhg-space-md);
		padding: var(--mhg-space-lg) var(--mhg-space-md);
	}
}

/* ============================================================
 * Section 3 — OUR BRANDS
 * ============================================================ */
.mhg-brands {
	background-color: var(--mhg-color-white);
}

.mhg-brands__inner {
	width: 100%;
	max-width: var(--mhg-container-max);
	margin: 0 auto;
	padding: var(--mhg-space-xl) var(--mhg-space-sm);
	text-align: center;
}

.mhg-brands__heading {
	margin: 0 0 var(--mhg-space-lg);
	font-family: var(--mhg-font-heading);
	font-size: 1.9rem;
	color: var(--mhg-color-charcoal);
}

.mhg-brands__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mhg-space-md);
	max-width: 1100px;
}

/* Brand card rules live in assets/css/components/mhg-brand-card.css —
   shared with the About Us brand grid. */

@media (min-width: 768px) {
	.mhg-brands__inner {
		padding: var(--mhg-space-xl) var(--mhg-space-md);
	}

	.mhg-brands__heading {
		font-size: var(--mhg-font-size-section-heading);
	}
}

@media (min-width: 1024px) {
	.mhg-brands__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--mhg-space-md);
	}

	.mhg-brand-card {
		padding: var(--mhg-space-md);
	}
}

/* ============================================================
 * Section 4 — ABOUT MATRIX (split, image bleeds to the edge)
 * ============================================================ */
.mhg-about {
	display: grid;
	grid-template-columns: 1fr;
	background-color: var(--mhg-color-white);
}

.mhg-about__image {
	min-height: 260px;
	background: linear-gradient(140deg, #d8cbb2 0%, #c2b193 55%, #a59474 100%);
}

.mhg-about__content {
	padding: var(--mhg-space-xl) var(--mhg-space-sm);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mhg-about__heading {
	margin: 0 0 var(--mhg-space-md);
	font-family: var(--mhg-font-heading);
	font-size: 1.9rem;
	line-height: 1.2;
	color: var(--mhg-color-charcoal);
}

.mhg-about__body {
	margin: 0 0 var(--mhg-space-md);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
	max-width: 36rem;
}

@media (min-width: 768px) {
	.mhg-about__content {
		padding: var(--mhg-space-xl) var(--mhg-space-md);
	}

	.mhg-about__heading {
		font-size: var(--mhg-font-size-section-heading);
	}
}

@media (min-width: 1024px) {
	.mhg-about {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}

	.mhg-about__image {
		min-height: 0;
		height: 100%;
	}

	.mhg-about__content {
		padding: var(--mhg-space-xl) var(--mhg-space-xl);
		justify-content: center;
	}
}

/* ============================================================
 * Section 5 — WHY WORK WITH US
 * ============================================================ */
.mhg-why {
	background-color: var(--mhg-color-off-white);
}

.mhg-why__inner {
	width: 100%;
	max-width: var(--mhg-container-max);
	margin: 0 auto;
	padding: var(--mhg-space-xl) var(--mhg-space-sm);
	text-align: center;
}

.mhg-why__heading {
	margin: 0 0 var(--mhg-space-lg);
	font-family: var(--mhg-font-heading);
	font-size: 1.9rem;
	color: var(--mhg-color-charcoal);
}

.mhg-why__grid {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mhg-space-lg) var(--mhg-space-md);
	max-width: 1000px;
}

.mhg-why__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--mhg-space-xs);
	max-width: 16rem;
	margin: 0 auto;
}

.mhg-why__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 0.4rem;
	color: var(--mhg-color-teal);
}

.mhg-why__icon svg {
	width: 32px;
	height: 32px;
	display: block;
}

.mhg-why__title {
	margin: 0 0 0.35rem;
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-why-heading);
	font-weight: 600;
	color: var(--mhg-color-charcoal);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.mhg-why__body {
	margin: 0;
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-dark-grey);
}

@media (min-width: 768px) {
	.mhg-why__inner {
		padding: var(--mhg-space-xl) var(--mhg-space-md);
	}

	.mhg-why__heading {
		font-size: var(--mhg-font-size-section-heading);
	}
}

@media (min-width: 1024px) {
	.mhg-why__grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--mhg-space-md);
	}
}

/* ============================================================
 * Section 6 — PARTNERSHIP CTA
 * ============================================================ */
.mhg-partnership {
	background-color: var(--mhg-color-charcoal);
	color: var(--mhg-color-white);
}

.mhg-partnership__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--mhg-space-lg);
	width: 100%;
	max-width: var(--mhg-container-max);
	margin: 0 auto;
	padding: var(--mhg-space-xl) var(--mhg-space-sm);
	align-items: center;
}

.mhg-partnership__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.mhg-partnership__heading {
	margin: 0 0 var(--mhg-space-md);
	font-family: var(--mhg-font-heading);
	font-size: 2rem;
	line-height: 1.15;
	color: var(--mhg-color-white);
}

.mhg-partnership__body {
	margin: 0 0 var(--mhg-space-md);
	font-size: var(--mhg-font-size-body);
	line-height: var(--mhg-line-height-body);
	color: var(--mhg-color-white-65);
	max-width: 36rem;
}

.mhg-partnership__visual {
	display: none;
	height: 260px;
	border-radius: var(--mhg-radius-lg);
	background: linear-gradient(140deg, #353535 0%, #2a2a2a 50%, #1f1f1f 100%);
}

@media (min-width: 768px) {
	.mhg-partnership__inner {
		padding: var(--mhg-space-xl) var(--mhg-space-md);
	}

	.mhg-partnership__heading {
		font-size: var(--mhg-font-size-partnership-heading);
	}
}

@media (min-width: 1024px) {
	.mhg-partnership__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--mhg-space-xl);
	}

	.mhg-partnership__visual {
		display: block;
	}
}