/**
 * Block: Hero (ACF layout `hero`).
 *
 * Measured geometry (1920 canvas, section 1 = y 0..1080):
 *   The design counts the 94px header bar as part of this 1080px section. The bar
 *   is a separate global partial in this theme, so the hero itself is 986px tall
 *   and 94 + 986 = 1080 exactly.
 *   Heading  96/101, -0.05em, Bold, #FFFFFF, max-width 712 (4 lines = 404 tall).
 *   Gap heading -> button 40. Button 296x96 at x=240, y=761.
 *   Content block = 404 + 40 + 96 = 540, centred in 986 -> top at 223,
 *   i.e. canvas y = 94 + 223 = 317. Matches the measured heading bounds exactly.
 *
 * Overlay is the gradient the previous measurement pass algebraically removed to
 * recover the photo, so re-applying it is exact:
 *   linear-gradient(90deg, rgba(0,0,0,0.3), rgba(102,102,102,0.3))
 *
 * The hero background can be EITHER a video or an image, and the two are a real
 * pair rather than one replacing the other:
 *
 *   1. background_video set -> <video>, with background_image as its poster.
 *   2. video empty, image set -> the image as an inline background-image (never
 *      an <img>). This is the original behaviour and is what the pixel baseline
 *      was captured against.
 *   3. both empty -> nothing, and the flat background-color below shows through.
 *
 * Both fields are currently UNPOPULATED: no MP4 has been supplied, and the hero
 * photo was never exported (the de-overlaid reconstruction is not exact), so per
 * decision D3 the image is still deferred to a 1x re-export. Branch 3 is
 * therefore what renders today.
 *
 * @package lawncareknox
 */

.home-hero {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	min-height: 986px;
	/*
	 * VERTICAL SAFETY PADDING — a deliberate pixel-exact no-op today.
	 *
	 * The banner had NO padding-block here, so its only vertical breathing room
	 * came from `align-items: center` distributing the leftover space inside the
	 * 986px min-height. That is slack, not padding, and slack runs out: measured,
	 * the content block is 540px tall, so at 986px there is 223px above and below
	 * — but a heading four lines longer makes the content 1146px and the gap
	 * becomes EXACTLY 0 top and bottom. The headline then touches the section
	 * edge on any screen, which is what this padding prevents.
	 *
	 * Why it changes nothing at the current content: box-sizing is border-box, so
	 * min-height INCLUDES padding. The content box becomes 986 - 300 = 686, the
	 * 540px content is centred inside it, and that box is itself centred in the
	 * border box because the padding is equal top and bottom — so the content
	 * lands at 150 + (686 - 540) / 2 = 223px, byte-identical to before. Any value
	 * up to the measured 223px ceiling is a no-op; --sp-150 is the largest one
	 * that is also on the Figma spacing scale.
	 *
	 * Once content outgrows the box the section simply grows and keeps 150px clear
	 * at top and bottom instead of colliding. The 1200 / 767 / 640 layers below
	 * already declared their own padding-block (80 / 64 / 48) and are unaffected.
	 */
	padding-block: var(--sp-150);
	/* Legibility fallback only, NOT a design value: the hero photo is deferred
	   (D3) so without this the white headline would sit on white. Fully covered
	   the moment the ACF background_image field is populated. */
	background-color: var(--color-text);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}

/*
 * Optional background video, sitting BEHIND the overlay (z-index 0 against the
 * overlay's 1 and the content's 2) and full-bleed via object-fit: cover.
 *
 * pointer-events: none means it can never capture a click, and the element is
 * only printed at all when the ACF file field actually holds a video — so with
 * an empty field there is no element, no height and no stacking change, and the
 * hero renders exactly as it did before the field existed.
 *
 * When a background_image is also set it is used as the video's poster, so the
 * still frame shows while the video is loading instead of a flash of flat colour.
 */
.home-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center center;
	   object-position: center center;
	pointer-events: none;
	border: 0;
}

/* 30% wash ramping black -> #666666 left to right. */
.home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))),
-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.3)), to(rgba(102, 102, 102, 0.3)));
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(102, 102, 102, 0.3) 100%);
}

.home-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}

.home-hero__content {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: var(--sp-40);
}

/* Figma "Heading 1". Scoped override of the shared .section-title, per the
   brief's typography convention — no per-section heading class. */
.home-hero .section-title {
	max-width: 712px;
	font-size: 96px;
	line-height: 101px;
	letter-spacing: -0.05em;
	color: var(--color-white);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   The Figma file has no tablet or mobile frames, so these values are derived,
   not designed. Type steps down through the design's OWN scale
   (96 -> 63 -> 47 -> 35 -> 26) rather than inventing intermediate sizes, and
   every spacing value below is from the Figma scale.
   ========================================================================== */
@media (max-width: 1440px) {
.home-hero {
    min-height: 930px;
}
}

   @media (max-width: 1360px) {
.home-hero {
    min-height: 750px;
}
.home-hero .section-title {
    max-width: 669px;
    font-size: 80px;
    line-height: 1.2;
    letter-spacing: -0.04em;
}
}
@media (max-width: 1200px) {
	/*
	 * padding-block was --sp-150 here, which is the DESKTOP value: 300px of
	 * vertical padding inside a 650px box left the headline squeezed into the
	 * middle third. 80 is the first real step down.
	 */
	.home-hero {
		min-height: 650px;
		padding-block: var(--sp-80);
	}

	/* The hero heading is the H1 and stays a step above .section-title at every
	   breakpoint. Its -0.05em is the tightest tracking in the design, so it has
	   the furthest to travel back toward 0. */
	.home-hero .section-title {
		font-size: 63px;
		line-height: 1.159em;
		letter-spacing: -0.03em;
	}
}

@media (max-width: 999px) {
	.home-hero {
		min-height: 450px;
	}

	.home-hero .section-title {
		font-size: 47px;
		line-height: 1.213em;
		letter-spacing: -0.02em;
	}
}

@media (max-width: 767px) {
	.home-hero {
		min-height: 0;
		padding-block: var(--sp-64);
		padding-top: 80px;
	}

	.home-hero__content {
		gap: var(--sp-24);
	}

	.home-hero .section-title {
		font-size: 35px;
		line-height: 1.286em;
		letter-spacing: -0.01em;
	}
}

@media (max-width: 640px) {
	.home-hero {
		padding-block: var(--sp-48);
		padding-top: 70px;
		min-height: 50vh;
	}

	/*
	 * The hero H1 STOPS SHRINKING AT 35px and holds it the rest of the way down.
	 * Two reasons, both hard constraints rather than taste:
	 *   1. .section-title has a 28px floor at every width, and this element IS a
	 *      .section-title — it may never go under it. The old ladder took it to
	 *      26 here and 22 at 479, i.e. straight through the floor.
	 *   2. It is the page's H1 and every other .section-title bottoms out at 28,
	 *      so holding 35 keeps a 1.25x H1-over-H2 hierarchy instead of the two
	 *      collapsing onto the same size.
	 * So only the tracking finishes its journey to 0 here; the size is done.
	 */
	.home-hero .section-title{
		letter-spacing: 0;
	}

.home-hero__content .btn--phone-hero span.btn__label, .home-hero__content .btn--phone-hero span.btn__text {
    line-height:1.5
}
}