/*
 * Sadam Hero Section
 *
 * NOTE: Every declaration is intentionally marked `!important`. Some other
 * stylesheet in this site (visible as `global-style.css` in DevTools) sets
 * `text-align: center !important` on paragraphs and similar rules on other
 * properties. The only way to beat `!important` is with another `!important`.
 *
 * If you ever migrate off the conflicting global stylesheet, you can safely
 * strip the `!important` flags from this file in one find/replace.
 */

/* ---- Container ---------------------------------------------------------- */

.sadam-hero {
	-webkit-font-smoothing: antialiased !important;
	position: relative !important;
	display: block !important;
	min-height: 100vh !important;
	overflow: hidden !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	text-align: left !important;
	box-sizing: border-box !important;

	/*
	 * Inset (safe area from each edge) and content position (0..100 on each
	 * axis) are exposed as custom properties so the inner block can interpolate
	 * between corners. PHP overrides --sadam-hero-x / --sadam-hero-y inline.
	 *
	 * Semantics matching the ACF fields:
	 *   --sadam-hero-x:   0 = left,   100 = right
	 *   --sadam-hero-y:   0 = bottom, 100 = top
	 */
	--sadam-hero-inset-x: 7vw;
	--sadam-hero-inset-y: 7vh;
	--sadam-hero-x: 0;
	--sadam-hero-y: 0;

	/*
	 * Parallax strength: 0 = no parallax, ~0.5 = pronounced. Read by
	 * `assets/js/sadam-hero.js` at runtime. Tune in CSS (or override per
	 * breakpoint in the media query below) without touching JS.
	 */
	--sadam-hero-parallax: 0.3;
}

.sadam-hero.alignfull {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-block-start: 0 !important;
}

/* ---- Background image (responsive via <picture>) ----------------------- */

.sadam-hero__bg {
	position: absolute !important;
	inset: 0 !important;
	z-index: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	/*
	 * Hint the compositor so the parallax transform is GPU-accelerated and
	 * doesn't trigger layout/paint on each frame. NOTE: deliberately no
	 * `!important` on `transform` — JS sets it via `element.style.transform`
	 * which can't override `!important` declarations. The identity transform
	 * below just primes a compositor layer for the first paint.
	 */
	will-change: transform !important;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden !important;
}

.sadam-hero__bg img {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* ---- Dim overlay -------------------------------------------------------- */

.sadam-hero__overlay {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	background-color: rgba(29, 31, 37, 0.1) !important; /* raft-fg @ 40% */
	pointer-events: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Content wrapper ---------------------------------------------------- */

/*
 * Positioned absolutely so it can sit anywhere between bottom-left (0/0) and
 * top-right (100/100). The math is a linear interpolation:
 *
 *   left = inset_x + (parent_width  - 2 * inset_x) * x / 100
 *   top  = inset_y + (parent_height - 2 * inset_y) * (100 - y) / 100
 *
 * `transform: translate(-x%, -(100-y)%)` re-anchors the element so its left
 * edge tracks at x=0, right edge tracks at x=100, etc. — i.e. it never
 * overflows the inset area regardless of the position values.
 */
.sadam-hero__inner {
	position: absolute !important;
	z-index: 2 !important;
	max-width: min(1000px, calc(100% - 2 * var(--sadam-hero-inset-x))) !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;

	left: calc(
		var(--sadam-hero-inset-x)
		+ var(--sadam-hero-x, 0) / 100
		* (100% - 2 * var(--sadam-hero-inset-x))
	) !important;
	top: calc(
		var(--sadam-hero-inset-y)
		+ (100 - var(--sadam-hero-y, 0)) / 100
		* (100% - 2 * var(--sadam-hero-inset-y))
	) !important;
	transform: translate(
		calc(var(--sadam-hero-x, 0) * -1%),
		calc((var(--sadam-hero-y, 0) - 100) * 1%)
	) !important;
}

/* ---- Eyebrow ------------------------------------------------------------ */

.sadam-hero__eyebrow {
	margin: 0 !important;
	padding: 0 !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	font-family: "Gill Sans", "Gill Sans Nova", "Gill Sans MT", Figtree, "Helvetica Neue", Arial, sans-serif !important;
	/* Hits 16px at exactly 1920px viewport (16 * 100 / 1920 ≈ 0.833vw). */
	font-size: clamp(12px, 0.833vw, 16px) !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	text-align: left !important;
}

/* ---- Title -------------------------------------------------------------- */

.sadam-hero__title {
	margin: 34px 0 0 0 !important;
	padding: 0 !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	font-family: "Adobe Garamond Pro", "Garamond Premier Pro", "EB Garamond", "Source Serif Pro", Garamond, "Times New Roman", serif !important;
	/* Linear interpolation: 40px @ 768px viewport → 94px @ 1920px viewport. */
	font-size: clamp(40px, calc(4px + 4.6875vw), 94px) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
	text-align: left !important;
	text-transform: none !important;
}

/* ---- Content / description --------------------------------------------- */

.sadam-hero__content {
	margin: 24px 0 0 0 !important;
	padding: 0 !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	font-family: "Adobe Garamond Pro", "Garamond Premier Pro", "EB Garamond", "Source Serif Pro", Garamond, "Times New Roman", serif !important;
	/* Linear interpolation: 22px @ 768px viewport → 29px @ 1920px viewport. */
	font-size: clamp(22px, calc(17.33px + 0.608vw), 29px) !important;
	max-width: min(800px, 100%) !important;

	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.01em !important;
	text-align: left !important;
	text-transform: none !important;
}

/* ---- CTA ---------------------------------------------------------------- */

.sadam-hero__cta {
	margin: 34px 0 0 0 !important;
	padding: 0 !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	font-family: "Gill Sans", "Gill Sans Nova", "Gill Sans MT", Figtree, "Helvetica Neue", Arial, sans-serif !important;
	/* Linear interpolation: 20px @ 768px viewport → 24px @ 1920px viewport. */
	font-size: clamp(20px, calc(17.33px + 0.347vw), 24px) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	text-align: left !important;
}

/*
 * The CTA's underline is a real `border-bottom` on the <a>. Because the
 * anchor is `inline-block`, its box width equals the text width, so the
 * border naturally matches the text width.
 */
.sadam-hero__cta-link,
.sadam-hero__cta a {
	display: inline-block !important;
	color: var(--sadam-hero-color, #ffffff) !important;
	text-decoration: none !important;
	border-bottom: 2px solid var(--sadam-hero-color, #ffffff) !important;
	padding: 0 0 12px 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	transition: opacity 0.2s ease !important;
	background: transparent !important;
}

.sadam-hero__cta-link:hover,
.sadam-hero__cta-link:focus,
.sadam-hero__cta a:hover,
.sadam-hero__cta a:focus {
	color: var(--sadam-hero-color, #ffffff) !important;
	text-decoration: none !important;
	opacity: 0.75 !important;
}

/* ---- Editor parity ------------------------------------------------------ */
.editor-styles-wrapper .sadam-hero__cta-link,
.editor-styles-wrapper .sadam-hero__cta a {
	color: var(--sadam-hero-color, #ffffff) !important;
}

.acf-block-preview .sadam-hero {
	margin: 0 !important;
}

/* ---- Small-screen fallback ---------------------------------------------- *
 * Font sizes are handled by clamp() on the base rules above (they scale
 * fluidly from min to spec values up to 1920px). This block only tweaks
 * inter-element spacing and inset for narrow viewports.
 */
@media (max-width: 768px) {
	.sadam-hero__title {
		margin-top: 26px !important;
	}

	.sadam-hero__content {
		margin-top: 16px !important;
	}

	.sadam-hero__cta {
		margin-top: 16px !important;
	}

	.sadam-hero {
		--sadam-hero-inset-x: 6vw !important;
		--sadam-hero-inset-y: 8dvh !important;
		/*
		 * Soften parallax on phones: address-bar show/hide already moves the
		 * viewport around, so a smaller factor keeps the effect from
		 * feeling twitchy.
		 */
		--sadam-hero-parallax: 0.18 !important;
	}
}