/**
 * Homepage hero: hold the first screen.
 *
 * The hero is sized to exactly one viewport and the logo strip sits at the
 * bottom of it, so a visitor lands on the whole thing -- eyebrow, headline,
 * copy, buttons and the trust strip -- at any window height that can hold it.
 *
 * Desktop only, on purpose. Below 1025 the hero stacks differently, the logo
 * strip wraps, and the header is 74px rather than 66, so pinning to the
 * viewport there is a separate problem with separate numbers. Everything
 * below is inside the media query and nothing changes at tablet or mobile.
 *
 * How it works, and why it is shaped like this:
 *
 *   - The hero becomes a flex column at `min-height: 100svh`. `svh` and not
 *     `vh`: on mobile `100vh` is the URL-bar-collapsed height, so a hero sized
 *     to it overflows on landing by exactly the toolbar. It is desktop-only
 *     today, but the unit should be right if that ever changes.
 *
 *   - The copy is centred by two `auto` margins -- one above the eyebrow, one
 *     above the logo strip -- which split the free space equally between them.
 *     That needs no wrapper element, which is what keeps this a CSS change
 *     rather than a restructure of the page tree.
 *
 *   - `--hero-min-gap` is the floor under BOTH of those gaps and must stay the
 *     same value on each side. An auto margin resolves to 0 the moment free
 *     space runs out, so without a floor the buttons end up flush against the
 *     strip label; but a floor on one side only is additive to the auto and
 *     tips the copy off centre by the difference. One shared value gives a
 *     guaranteed minimum AND keeps the two gaps identical at every height.
 *     Measured 136/136 at 1798x1051 and 34/34 at 1044x740.
 *
 *   - The 90px in the top padding is the header's own geometry: its 66px flow
 *     box plus the 24px margin that compensates the sticky offset. It is the
 *     same 90 as the hero's `margin-block-start: -90px`, and the two have to
 *     move together -- see the "three numbers in step" note in CLAUDE.md.
 *
 * Specificity: the child theme loads at stylesheet index ~7 against
 * Elementor's 25-34, so every selector here doubles its hook class to reach
 * (0,3,0) and beat the elements' own local styles at (0,2,0). Order would not
 * save us.
 *
 * Reverting: delete this file, its enqueue, and the `hero-fit` /
 * `hero-fit-inner` labels from the two elements. The hero's own stored padding
 * of 217px is untouched underneath and simply takes over again.
 *
 * The floor: with real gaps enforced this holds down to about 760px of window
 * height. Below that the strip goes under the fold, which is correct -- the
 * body copy, strip, buttons and header clearance come to ~750px before the
 * headline gets a pixel.
 */

@media ( min-width: 1025px ) {

	.elementor .hero-fit.hero-fit {
		--hero-min-gap: clamp( 28px, 4.6vh, 72px );

		min-height: 100svh;
		display: flex;
		flex-direction: column;

		padding-block-start: calc( 90px + var( --hero-min-gap ) );
		padding-block-end: clamp( 28px, 5vh, 64px );
	}

	/* The content column takes the height the section now has. */
	.elementor .hero-fit.hero-fit > .hero-fit-inner {
		flex: 1 1 auto;
	}

	/* First child is the eyebrow; last is the logo strip. The two autos are
	   what centre everything between them. */
	.elementor .hero-fit-inner.hero-fit-inner > :first-child {
		margin-block-start: auto;
	}

	/* The buttons row, which carries a fixed 132px bottom margin in the stored
	   styles. The auto margin below replaces it. */
	.elementor .hero-fit-inner.hero-fit-inner > :nth-last-child( 2 ) {
		margin-block-end: 0;
	}

	.elementor .hero-fit-inner.hero-fit-inner > :last-child {
		margin-block-start: auto;
		/* padding, not margin: it has to be additive to the auto above. */
		padding-block-start: var( --hero-min-gap );
	}
}