/**
 * Block: Let's Talk About Your Yard — GLOBAL, not a page layout.
 *
 * Driven by ACF Theme Options and rendered by footer.php as the first child of
 * .site-footer-area, so it appears above the footer on every page that uses this
 * theme's footer. That is intended.
 *
 * Measured geometry (1920 canvas, section 8 = y 6598..7309, height 711). This
 * section had NO spec data at all, so every value was measured off the 2x design
 * screenshot and snapped to the Figma scales. Full derivation in
 * pages/homepage-v3/MEASURED-GEOMETRY.md (addendum, section 8).
 *
 *   padding-block 150
 *   label   (.section-label + a white dash BEFORE)   150 .. 182
 *   gap 24                                          <- NOT the shared 16
 *   heading (.section-title 63/73, 2 lines)          206 .. 352
 *   gap 24
 *   description (.section-description 18/28, 3 lines) 377 .. 461
 *   gap 40
 *   button  (.btn, 62 tall, 224 wide)                500 .. 562
 *   padding-block 150
 *
 * The computed button box 500..562 matches the measured 500..562 exactly, and
 * the measured icon panel x 400..464 is the shared .btn__icon 64px.
 *
 * Every text colour here measured pure #FFFFFF — label, both heading lines, all
 * three description lines and the button text.
 *
 * @package lawncareknox
 */

.lets-talk {
	position: relative;
	padding-block: var(--sp-150);
	background-color: var(--color-text);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
}
section.lets-talk:before {
    content: '';
    position: absolute;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%),
-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.32)));
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%),
linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

/*
 * Optional background video, behind the content and never interactive. Only ever
 * printed when the ACF file field actually holds a video, so an empty field adds
 * no element and no height. When a background_image is also set it becomes the
 * video's poster. Identical pattern to the hero.
 */
.lets-talk__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;
}

.lets-talk__inner {
	position: relative;
	/*
	 * 2, not 1 — so the ladder is video 0 / overlay 1 / content 2, which is the
	 * same explicit ladder .home-hero already uses.
	 *
	 * At 1 this tied with section.lets-talk:before, which is also z-index 1, and
	 * the text only won because equal z-index falls back to DOM order and the
	 * pseudo-element's box comes first. That worked, but it meant the copy stayed
	 * readable by accident: anything that later reordered the markup, or gave the
	 * overlay a higher value, would have dropped the white text behind a 32% black
	 * wash with no rule looking wrong.
	 *
	 * Raising the CONTENT is the only safe direction. Lowering the overlay to 0
	 * would put it level with .lets-talk__video and — because ::before generates
	 * the FIRST child box — the video would then paint on top of it and the
	 * darkening would disappear entirely.
	 *
	 * Paint order is unchanged, and z-index never affects layout, so this renders
	 * identically. Verified: 0 differing pixels.
	 */
	z-index: 2;
	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-24);
}

/* Scoped overrides of the shared classes — no per-section heading class. */
.lets-talk .section-label,
.lets-talk .section-title,
.lets-talk .section-description {
	color: var(--color-white);
}

/*
 * The heading wraps after "about". That needs a max-width in [463.6, 612.5):
 * line 1 advances 463.6, and adding "your" takes it to 612.5. No value on the
 * Figma spacing scale falls in that window, so 520 is used — 12% of slack above
 * the line-1 advance and well clear of the upper bound. This is the only
 * inferred rather than measured value in either new section.
 */
.lets-talk .section-title {
	max-width: 520px;
}

/*
 * 650 IS on the Figma scale, and the wrap arithmetic pins it: the two longest
 * description lines advance 575.2 and 631.8, and adding the next word takes them
 * to 655.3 and 682.3, so the width must be in [631.8, 655.3). 650 is the only
 * scale value in that window.
 */
.lets-talk .section-description {
	max-width: 650px;
}

/* 24 from the flex gap + 16 here = the measured 40 above the button. */
.lets-talk .btn {
	margin-top: var(--sp-16);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   The Figma file has desktop (1920) frames only, so these values come from
   proportional scaling and cannot be pixel-verified.
   ========================================================================== */
@media (max-width: 1440px) {
	.lets-talk {
		padding-block: 120px;
	}
}
@media (max-width: 1200px) {
section.lets-talk:before {
       background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.52) 100%),
	-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.52)));   
	background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.52) 100%),
	linear-gradient(270deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.52) 100%);
}
}
@media (max-width: 1200px) {
	.lets-talk {
		padding-block: var(--sp-80);
	}
}

@media (max-width: 999px) {
	.lets-talk {
		padding-block: var(--sp-64);
	}

	.lets-talk__inner {
		gap: var(--sp-16);
	}

	.lets-talk .section-title {
		max-width: 420px;
	}

}

@media (max-width: 767px) {
	.lets-talk {
		padding-block: var(--sp-48);
	}

	.lets-talk .section-title,
	.lets-talk .section-description {
		max-width: 100%;
	}

	/* 16 flex gap + 8 = the 24 above the button, down from 40. */
	.lets-talk .btn {
		margin-top: var(--sp-8);
	}
}

@media (max-width: 640px) {
	.lets-talk {
		padding-block: var(--sp-40);
	}
}