/* Block: Hero (acf/hero)
   ---------------------------------------------------------------------------
   The hero pins to the top of the viewport and the sections below ride up over
   it. That is `position: sticky` — NOT `fixed` — so the browser keeps the hero
   in normal flow and no spacer element is needed.

   Two things this depends on:
     1. No ancestor may set `overflow: hidden`/`clip` or sticky silently dies.
     2. The hero's parent (the post-content wrapper) must be taller than the
        hero, which it is as soon as a second block follows it.

   z-index 0 keeps it beneath the panels that scroll over it; those set
   `position: relative; z-index: 1`.
--------------------------------------------------------------------------- */

.hero--section {
	position: sticky;
	top: 0;
	z-index: 0;
	height: 100vh; /* fallback for browsers without svh */
	height: 100svh; /* stays put while the mobile URL bar collapses */
	overflow: hidden; /* clips the cover-fitted media — safe here, it's the sticky element itself, not an ancestor */
	display: flex;
	justify-content: center;
	align-items: flex-start;
	/* Shows through before the background media paints, and if none is set. */
	background-color: var(--wp--preset--color--deep-sea, #1b2632);
}

/* --- Background image / video -------------------------------------------- */

.hero--media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* .object-fit-cover covers the <img> case; <video> needs the same treatment.

   Anchored to the TOP, not the centre: the hero photo is a 4:3 frame and the
   hero box is much wider than that, so `cover` throws away height. Cropping from
   the bottom keeps the sky and the dome high in the frame the way the comp has
   them, and the bottom of the hero is the part the intro panel covers anyway. */
.hero--media > img,
.hero--media > video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--hero-media-position, center top);
}

.hero--bg-video {
	pointer-events: none;
}

/* --- Overlay -------------------------------------------------------------
   Opacity comes from the ACF range field as --hero-overlay-opacity (0–1).
   The 0.3 fallback is the same value as --lwh-scrim-strong. */

.hero--section.has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: #000;
	opacity: var(--hero-overlay-opacity, 0.3);
	pointer-events: none;
}

/* --- Logo ----------------------------------------------------------------
   Comp: 334 x 166 wordmark, horizontally centred, 46px from the top of the
   hero — identical on the 1512 and 402 frames, so the offset is fixed and only
   the width is fluid (334 / 402 = 83vw on the mobile frame). */

.hero--container {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: var(--hero-logo-top, 46px);
	display: flex;
	justify-content: center;
}

.hero--logo {
	width: min(83vw, 334px);
}

.hero--logo-img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Block editor --------------------------------------------------------
   Sticky is disabled inside the editor canvas: pinned, the hero would sit under
   the blocks that follow it and swallow their toolbars, making them un-editable.
   Everything else renders exactly as it does on the front end. */

.editor-styles-wrapper .hero--section,
.acf-block-preview .hero--section {
	position: relative;
	top: auto;
}