/**
 * IEMA Page Banner styles.
 *
 * Reusable interior-page hero: a full-bleed background image with a
 * legibility overlay and left-aligned, vertically-centred content on
 * desktop. On mobile the content drops to the lower area with a
 * bottom-weighted overlay. Matches the Figma "About Us" fold
 * (desktop 1440x700, mobile 430x600) and reuses the shared IEMA tokens.
 */

.iema-page-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 700px;
	overflow: hidden;
	background-color: #1a1a1a;
	color: #ffffff;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

/* Background media -------------------------------------------------- */
.iema-page-banner__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.iema-page-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iema-page-banner__image.center {
	object-position: center;
}

.iema-page-banner__image.top {
	object-position: top;
}

.iema-page-banner__image.bottom {
	object-position: bottom;
}

.iema-page-banner__image.left {
	object-position: left;
}

.iema-page-banner__image.right {
	object-position: right;
}

.iema-page-banner__overlay {
	position: absolute;
	inset: 0;
}

/* Overlay variants — desktop: left-weighted for left-aligned text. */
.iema-page-banner--overlay-none .iema-page-banner__overlay {
	background: none;
}

.iema-page-banner--overlay-light .iema-page-banner__overlay {
	background: linear-gradient(88deg, rgba(0, 0, 0, 0.50) -0.83%, rgba(0, 0, 0, 0.00) 100.32%);
	backdrop-filter: blur(0px);
}

.iema-page-banner--overlay-medium .iema-page-banner__overlay {
	background: linear-gradient(88deg, rgba(0, 0, 0, 0.72) -0.83%, rgba(0, 0, 0, 0.00) 100.32%);
	backdrop-filter: blur(0px);
}

.iema-page-banner--overlay-dark .iema-page-banner__overlay {
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.8) 0%,
		rgba(0, 0, 0, 0.5) 30%,
		rgba(0, 0, 0, 0.1) 60%,
		rgba(0, 0, 0, 0) 80%
	);
}

/* Content ----------------------------------------------------------- */
.iema-page-banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 80px;
	box-sizing: border-box;
}

.iema-page-banner__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 740px;
}

.iema-page-banner__eyebrow {
	margin: 0;
	color: #ff7e2d;
	font-family: "Libre Franklin", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 19px;
}

.iema-page-banner__title {
	margin: 0;
	color: #ffffff;
	font-weight: 700;
	font-size: 64px;
	line-height: 70px;
	letter-spacing: 0;
}

.iema-page-banner__subheading {
	margin: 0;
	max-width: 620px;
	color: #ffffff;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
}

.iema-page-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

/* Mobile ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.iema-page-banner {
		min-height: 600px;
		align-items: flex-end;
	}

	.iema-page-banner__inner {
		padding: 0 24px 90px;
	}

	.iema-page-banner__title {
		font-size: 48px;
		line-height: 53px;
	}

	.iema-page-banner__content {
		gap: 20px;
	}

	/* Bottom-weighted overlay where the text now sits. */
	.iema-page-banner--overlay-light .iema-page-banner__overlay,
	.iema-page-banner--overlay-medium .iema-page-banner__overlay {
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.4) 45%,
			rgba(0, 0, 0, 0.05) 100%
		);
	}

	.iema-page-banner--overlay-dark .iema-page-banner__overlay {
		background: linear-gradient(
			0deg,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.5) 45%,
			rgba(0, 0, 0, 0.1) 100%
		);
	}
}

/* ==================================================================
   Eyebrow accent colour
   Independent of size; defaults to the orange used site-wide, with a
   brand-green option (--iema-green #c1d82a) used by compact banners
   such as "Our Team".
   ================================================================== */
.iema-page-banner--accent-green .iema-page-banner__eyebrow {
	color: #c1d82a;
}

/* ==================================================================
   Compact variant
   A short section banner (Figma "Our Team": desktop 1440x400,
   mobile 430x400). Content stays vertically centred and left-aligned
   on both breakpoints; the eyebrow uses the lighter Helvetica-400
   treatment from the design. Reuses the shared overlay variants
   (left-weighted on desktop); the mobile overlay is re-weighted below
   so centred text keeps its legibility.
   ================================================================== */
.iema-page-banner--size-compact {
	min-height: 400px;
}

.iema-page-banner--size-compact .iema-page-banner__content {
	gap: 8px;
	/* Sit just below optical centre (matches Figma) and clear of the
	   fixed transparent header that overlaps the top of the hero. */
	transform: translateY(24px);
}

.iema-page-banner--size-compact .iema-page-banner__eyebrow {
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 18px;
}

.iema-page-banner--size-compact .iema-page-banner__title {
	font-size: 56px;
	line-height: 62px;
}

@media (max-width: 1024px) {
	.iema-page-banner--size-compact {
		min-height: 400px;
		align-items: center;
	}

	.iema-page-banner--size-compact .iema-page-banner__inner {
		padding: 0 24px;
	}

	.iema-page-banner--size-compact .iema-page-banner__title {
		font-size: 48px;
		line-height: 53px;
	}

	/* Keep the darkening left-weighted (not bottom-weighted) so the
	   vertically-centred compact text stays legible on mobile. */
	.iema-page-banner--size-compact.iema-page-banner--overlay-light .iema-page-banner__overlay {
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.65) 0%,
			rgba(0, 0, 0, 0.4) 45%,
			rgba(0, 0, 0, 0.1) 100%
		);
	}

	.iema-page-banner--size-compact.iema-page-banner--overlay-medium .iema-page-banner__overlay {
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.45) 45%,
			rgba(0, 0, 0, 0.12) 100%
		);
	}

	.iema-page-banner--size-compact.iema-page-banner--overlay-dark .iema-page-banner__overlay {
		background: linear-gradient(
			90deg,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.55) 45%,
			rgba(0, 0, 0, 0.15) 100%
		);
	}
}

/* ==================================================================
   Chips
   Optional metadata pills shown directly beneath the heading
   (Figma "Projects" detail banner). Two variants:
   - outline: transparent, 1px white border, white text (Client/Asset)
   - solid:   filled #e8e8e8, grey #686868 text (category tags)
   Each chip may carry an optional bold label prefix + a value.
   The chip row wraps; 8px both axes (matches Figma auto-layout).
   ================================================================== */
.iema-page-banner__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.iema-page-banner__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 16px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	line-height: 16.8px;
	white-space: nowrap;
}

.iema-page-banner__chip--outline {
	border-color: #ffffff;
	color: #ffffff;
}

.iema-page-banner__chip--solid {
	background-color: #e8e8e8;
	color: #686868;
}

.iema-page-banner__chip-label {
	font-weight: 700;
}

.iema-page-banner__chip-value {
	font-weight: 400;
}

/* ------------------------------------------------------------------
   has-chips layout
   The Figma "Projects" detail banner groups eyebrow → title → chips at
   16px, widens the content column to 700px, and anchors the block a
   fixed distance from the top (146px desktop / 149px mobile) so it
   always clears the transparent 112px header regardless of title length
   — instead of the compact vertical-centre + translateY nudge. Scoped
   to --has-chips so pages without chips (About Us, Our Team) are
   untouched.
   ------------------------------------------------------------------ */
.iema-page-banner--has-chips {
	align-items: flex-start;
}

.iema-page-banner--has-chips .iema-page-banner__inner {
	padding-top: 146px;
	padding-bottom: 50px;
}

.iema-page-banner--has-chips .iema-page-banner__content {
	gap: 16px;
	max-width: 700px;
	transform: none; /* cancels the compact translateY nudge. */
}

/* Larger separation before a supporting paragraph / buttons, per Figma
   (24px to the subheading, 40px to the button row). */
.iema-page-banner--has-chips .iema-page-banner__subheading {
	margin-top: 8px;
}

.iema-page-banner--has-chips .iema-page-banner__actions {
	margin-top: 24px;
}

@media (max-width: 1024px) {
	/* Top-anchored on mobile too (overrides the compact centre), with the
	   design's 149px top / 40px bottom breathing room. */
	.iema-page-banner--has-chips.iema-page-banner--size-compact {
		align-items: flex-start;
	}

	.iema-page-banner--has-chips .iema-page-banner__inner {
		padding-top: 149px;
		padding-bottom: 40px;
	}

	.iema-page-banner--has-chips .iema-page-banner__content {
		max-width: none;
	}
}