/**
 * Layout: Hero — Image Background (inner pages).
 *
 * Same visual language as the homepage hero (layouts/hero-video): black base,
 * photo at 55%, brand gradient (left dark, right translucent purple), rounded
 * bottom corners. Shorter by default; three heights.
 *
 * @package GagaMuller
 */

.gm-hero-image {
	--gm-hero-min-h: clamp(26rem, 33vw, 31rem);
	--gm-hero-radius: clamp(40px, 7vw, 101px);
	--gm-hero-gradient: linear-gradient(99deg, rgb(16 16 16 / 0.88) 24%, rgb(16 16 16 / 0.3) 55%, rgb(114 21 244 / 0.3) 90%);

	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: var(--gm-hero-min-h);
	overflow: hidden;
	border-radius: 0 0 var(--gm-hero-radius) var(--gm-hero-radius);
	background: #000;
	color: var(--gm-color-white);
}

.gm-hero-image--compact {
	--gm-hero-min-h: clamp(20rem, 25vw, 23.5rem);
}

.gm-hero-image--tall {
	--gm-hero-min-h: clamp(30rem, 44vw, 39rem);
}

/* Same height as the homepage video hero (layouts/hero-video/style.css),
 * used by the About section pages. */
.gm-hero-image--home {
	--gm-hero-min-h: clamp(500px, 47.5vw, 684px);
}

@media (max-width: 1023px) {
	.gm-hero-image--home {
		--gm-hero-min-h: 540px;
	}
}

@media (max-width: 479px) {
	.gm-hero-image--home {
		--gm-hero-min-h: 440px;
	}
}

.gm-hero-image__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0.55;
}

.gm-hero-image__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.gm-hero-image__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--gm-hero-gradient);
	pointer-events: none;
}

.gm-hero-image__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--gm-space-20);
	padding-top: clamp(3rem, 7vw, 6rem);
	padding-bottom: clamp(2.5rem, 5.5vw, 5rem);
}

.gm-hero-image .gm-eyebrow {
	color: var(--gm-color-white);
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
}

.gm-hero-image .gm-eyebrow__badge {
	width: 32px;
	height: 32px;
}

.gm-hero-image .gm-eyebrow__badge .gm-icon {
	width: 22px;
	height: 22px;
}

.gm-hero-image__title {
	max-width: 17ch;
	margin: 0;
	color: var(--gm-color-white);
	font-family: var(--gm-font-heading);
	font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem);
	font-weight: var(--gm-weight-bold);
	line-height: 1;
	text-shadow: 0 4px 4px rgb(0 0 0 / 0.25);
}

/* Article hero: long headlines need the full width. */
.gm-hero-image__title:has(br) {
	max-width: 22ch;
}

.gm-hero-image__intro {
	max-width: 36rem;
	margin: 0;
	color: var(--gm-color-white);
	font-size: var(--gm-text-intro);
	line-height: 1.55;
	text-shadow: 0 2px 4px rgb(0 0 0 / 0.35);
}

.gm-hero-image__meta {
	margin: 0;
	color: var(--gm-color-on-dark-strong);
	font-size: var(--gm-text-legal);
}

.gm-hero-image__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-12) var(--gm-space-16);
	margin: var(--gm-space-8) 0 0;
	padding: 0;
	list-style: none;
}

.gm-hero-image__actions .gm-btn {
	min-height: 52px;
	padding-left: var(--gm-space-24);
	font-size: 1.0625rem;
}

.gm-hero-image__actions .gm-btn .gm-icon {
	width: 40px;
	height: 40px;
	padding: 10px;
}

.gm-hero-image__actions .gm-btn--outline {
	min-height: 52px;
	padding: 0 var(--gm-space-24);
}

/* ---- Vacancy search (Careers hero) ---------------------------------- */

.gm-hero-search {
	display: grid;
	gap: var(--gm-space-8);
	grid-template-columns: minmax(0, 1fr);
	width: 100%;
	max-width: 46rem;
	margin-top: var(--gm-space-12);
	padding: var(--gm-space-8);
	border-radius: 28px;
	background: var(--gm-color-white);
	color: var(--gm-color-black);
}

.gm-hero-search__field,
.gm-hero-search select {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 var(--gm-space-20);
	border: 0;
	border-radius: var(--gm-radius-pill);
	background: var(--gm-color-surface-subtle);
	color: var(--gm-color-black);
	font: inherit;
	font-size: 0.9375rem;
	appearance: none;
}

.gm-hero-search__select {
	position: relative;
	display: block;
}

.gm-hero-search__select .gm-icon {
	position: absolute;
	top: 50%;
	right: var(--gm-space-16);
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	pointer-events: none;
}

.gm-hero-search :focus-visible {
	outline: var(--gm-focus-width) solid var(--gm-color-purple);
	outline-offset: 2px;
}

.gm-hero-search__submit {
	justify-content: center;
	min-height: 48px;
	padding: 0 var(--gm-space-24);
	font-size: 0.9375rem;
	text-transform: none;
}

@media (min-width: 768px) {
	.gm-hero-search {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
		align-items: center;
		border-radius: var(--gm-radius-pill);
	}
}

@media (max-width: 767px) {
	.gm-hero-image {
		--gm-hero-radius: 40px;
	}
}

/* Tags under the heading (vacancy: employment type, location, sector). */
.gm-hero-image__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gm-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gm-hero-image__tags li {
	padding: var(--gm-space-6) var(--gm-space-16);
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--gm-radius-pill);
	background: rgb(255 255 255 / 0.08);
	color: var(--gm-color-white);
	font-size: var(--gm-text-legal);
	font-weight: 500;
}