/**
 * Hero widget.
 *
 * Image rules carry the theme body class so they outrank Elementor's injected
 * `.elementor img { height:auto; max-width:100% }` (0-1-1). Getting this wrong is what makes a
 * covered background image fall back to its intrinsic ratio pinned to the top — `height:auto`
 * over-constrains the vertical axis, so `inset:0` silently drops its `bottom`.
 */

.enigma-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 720px);
	padding-top: 100px;
	overflow: hidden;
	background: var(--e-bg);
}

/* Height presets. The Minimum height slider still wins over these when it is set, because
   Elementor scopes its generated rule to the element id. */
.enigma-hero--h-tall {
	min-height: min(88vh, 900px);
}

/* What the design uses for every inner-page hero. */
.enigma-hero--h-compact {
	min-height: min(60vh, 640px);
	padding-top: 84px;
}

.enigma-hero--h-auto {
	min-height: 0;
	padding-top: 84px;
}

/* --------------------------------------------------------------- background */

.enigma-hero__media,
.enigma-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

/* 0-2-1 — see the file header. `height:100%` must not become `height:auto`. */
.enigma .enigma-hero__media img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

.enigma-hero__video {
	opacity: 0;
	transition: opacity 900ms ease;
}

.enigma-hero__video.is-playing {
	opacity: 1;
}

/*
 * Cover-fit for a 16:9 embed: make the frame the larger of "full width" and "full height at
 * 16:9", then centre it. An iframe cannot use object-fit, so the sizing has to be geometric.
 */
.enigma-hero__video iframe,
.enigma-hero__video video {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	max-width: none;
	border: 0;
	transform: translate(-50%, -50%);
}

.enigma .enigma-hero__video video {
	object-fit: cover;
}

/* --------------------------------------------------------------- scrims */

.enigma-hero__scrim-v,
.enigma-hero__scrim-h {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.enigma-hero__scrim-v {
	background: var(--e-hero-v);
}

.enigma-hero__scrim-h {
	background: var(--e-hero-h);
}

/* --------------------------------------------------------------- content */

.enigma-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--e-container);
	margin-inline: auto;
	padding-inline: var(--e-gutter);
	padding-bottom: clamp(48px, 6vw, 84px);
}

/* Breadcrumb */
.enigma-hero__breadcrumb {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 24px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.enigma-hero__breadcrumb-link {
	color: var(--e-m2);
	text-decoration: none;
	transition: color 200ms ease;
}

.enigma-hero__breadcrumb-link:hover {
	color: var(--e-accent);
}

.enigma-hero__breadcrumb-sep {
	color: var(--e-m3);
}

.enigma-hero__breadcrumb-current {
	color: var(--e-accent);
}

.enigma-hero__title {
	max-width: 17ch;
	margin: 0;
	font-size: calc(clamp(38px, 6.4vw, 92px) * var(--e-heading-scale, 1));
	font-weight: var(--e-heading-weight, 900);
	line-height: .94;
	letter-spacing: -.032em;
	text-transform: uppercase;
	color: var(--e-ink);
	text-wrap: balance;
}

.enigma-hero__title-dim {
	color: var(--e-hero-dim);
}

.enigma-hero__body {
	max-width: 60ch;
	margin: 30px 0 0;
	font-size: clamp(14.5px, 1.12vw, 16.5px);
	font-weight: 500;
	line-height: 1.78;
	color: var(--e-m1);
	text-wrap: pretty;
}

.enigma-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 38px;
}

.enigma-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 44px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 782px) {
	.enigma-hero {
		min-height: 64vh;
		padding-top: 80px;
	}

	/* Restated so the presets are not undone by the rule above, which would otherwise win on
	   source order alone. */
	.enigma-hero--h-compact {
		min-height: 52vh;
		padding-top: 72px;
	}

	.enigma-hero--h-auto {
		min-height: 0;
		padding-top: 72px;
	}

	.enigma-hero__title {
		max-width: none;
	}

	.enigma-hero__actions .enigma-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

/* Arabic: the uppercase + tight tracking treatment does not apply. See global.css. */
:lang(ar) .enigma-hero__title {
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.25;
}