/**
 * Block: About (ACF layout `about`).
 *
 * Measured geometry (1920 canvas, section 3 = y 1597..2538, height 941):
 *   Section padding-block 150, so the content box is 640 tall.
 *   Three columns inside the 1440 content box: 469 / 16 / 470 / 16 / 469.
 *     left  469, padding-right 64 -> 405 of text (matches every measured text width)
 *     media 470 x 640, radius 8
 *     right 469, padding-left 64  -> 405 of text
 *   Widths are expressed as proportional flex-grow (469 / 470 / 469 against
 *   1440 - 32 of gaps = 1408) so they scale fluidly AND resolve to exactly
 *   469 / 470 / 469 at a 1920 viewport.
 *
 *   Left column: justify-content space-between over the full 640, so the 120x120
 *   brand mark pins to the top at y=150 and the heading block pins to the bottom.
 *   Verified: block = 32 + 24 + 73 + 24 + 168 = 321, and 640 - 321 = 319, putting
 *   the label at y = 150 + 319 = 469 — exactly the measured label position.
 *
 *   Right column: top-aligned. Standalone dash (no label) at y=150, +24 ->
 *   paragraph 174..538, +40 -> button 578..640.
 *
 * The leaf artwork is union.svg, which the Figma export already delivered as the
 * clipped 276x940 visible slice with its 0.5 / 0.25 opacities baked into the path
 * data. Do NOT add a CSS opacity — that would double-apply it.
 *
 * @package lawncareknox
 */

.home-about {
	position: relative;
	padding-block: var(--sp-150);
	background-color: var(--color-bg-light);
	overflow: hidden;
}

.home-about__artwork {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

.home-about__artwork img {
	width: 276px;
	height: 940px;
}

.home-about__inner {
	position: relative;
	z-index: 1;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	gap: var(--sp-16);
	min-height: 640px;
}

/* --- Columns. Proportional so 469 / 470 / 469 is exact at 1920. ---
 *
 * `flex: 469 1 0` did NOT produce 469. With the global `box-sizing: border-box`,
 * flex-basis:0 is a BORDER-box size, so each text column's 64px inner padding
 * became its base size. Bases were 64 / 0 / 64, leaving only 1440 - 32 gap - 128
 * = 1280 to distribute proportionally, and the padding was then added back on
 * top: 64 + 1280*469/1408 = 490.36 for the text columns and 1280*470/1408 =
 * 427.27 for the image — measured in the browser as 490.36 / 427.28 / 490.36,
 * i.e. the image came out 43px narrower than the design's 470.
 *
 * Sizing the border box directly with an explicit basis makes the proportions
 * apply to the OUTER widths, so padding no longer skews them. Still fluid: at
 * any container width the three columns keep the 469 : 470 : 469 ratio, and at
 * the 1440 content box they are exactly 469 / 470 / 469 (text content 405 wide
 * after the 64px padding, as measured).
 */
.home-about__col {
	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;
	min-width: 0;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 calc((100% - var(--sp-16) * 2) * 469 / 1408);
	        flex: 0 0 calc((100% - var(--sp-16) * 2) * 469 / 1408);
}

.home-about__col--left {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	padding-right: var(--sp-64);
}

.home-about__col--right {
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	padding-left: var(--sp-64);
}

.home-about__mark img {
	width: 120px;
	height: 120px;
}

.home-about__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-24);
	width: 100%;
}

/* --- Centre media: an image, or an autoplaying looping video in its place. --- */
.home-about__media {
	position: relative;
	-webkit-box-flex: 0;
	    -ms-flex: 0 0 calc((100% - var(--sp-16) * 2) * 470 / 1408);
	        flex: 0 0 calc((100% - var(--sp-16) * 2) * 470 / 1408);
	min-width: 0;
	border-radius: var(--radius);
	overflow: hidden;
}

.home-about__media img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}

/*
 * THE VIDEO IS TAKEN OUT OF FLOW, AND THAT IS THE WHOLE POINT OF THIS RULE.
 *
 * This slot has no height of its own on desktop. `.home-about__inner` is a flex row
 * with `align-items: stretch` and `min-height: 640`, so the row's height is the tallest
 * item's content height, and the media column is then stretched to match. With the
 * original photo that resolved to exactly 640 — but only because about-drainage.jpg is
 * itself authored at the design's 470/640 = 0.73 ratio, so its intrinsic contribution
 * at 470 wide happens to BE 640. The layout was resting on that coincidence.
 *
 * A 9:16 clip does not share it. In flow, the video's intrinsic ratio contributes
 * 470 x 16/9 = 835.6, the flex line grows to 835.6, the media column stretches to it
 * and the whole section gets 195px taller. `height: 100%` cannot prevent that: at the
 * point the line is being sized the parent's height is still indefinite, so the
 * percentage resolves as `auto` and the intrinsic ratio wins. Measured in the browser
 * as 835 — and before the width rule landed, as the raw 1280.
 *
 * `position: absolute` removes the video from the sizing calculation entirely. It
 * contributes nothing to the flex line, so the row goes back to being decided by
 * `min-height: 640` and the text columns exactly as it was with the photo, and the
 * video then fills whatever box that produces. It is the same treatment the hero and
 * Let's Talk videos already use, and it holds at every breakpoint: below 999 the box
 * gets its size from `aspect-ratio`, which is definite too.
 *
 * THIS ALSO MEANS THE BOX IS NEVER RESHAPED FOR THE VIDEO. Every slot keeps the exact
 * dimensions the design gave the image — 470x640 desktop, full-width 470/640 stacked,
 * full-width 4/3 below 767. An earlier pass reshaped the stacked slots to suit a
 * portrait source and that was wrong: it made the 375 block 449 tall against the
 * design's 247.
 *
 * `object-position: center bottom` is what adapts the clip to the box instead. The slot
 * is wider than 9:16 at every width — 0.73 on desktop, 1.33 below 767 — so covering
 * always crops vertically, and the default centre would take that evenly off the top
 * and bottom. Anchoring to the bottom keeps the ground-level subject (the pipe, the
 * gravel, the hands) and discards the empty top of the frame instead.
 */
.home-about__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center bottom;
	   object-position: center bottom;
	   border-radius: 8px;
}

/* --- Right column pieces. ---
   The dash is a 0-height layout box in Figma with a 2px stroke drawn outside it,
   so the 24px gap below it measures from y=150, not from y=152. Reproducing that
   box model exactly keeps the paragraph on its measured y=174. */
.home-about__col--right .hairline__rule {
	height: 0;
	margin-bottom: var(--sp-24);
}

.home-about__col--right .section-description {
	margin-bottom: var(--sp-40);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   No tablet or mobile frames exist in the Figma file, so these are derived.
   Spacing values are all from the Figma scale.
   ========================================================================== */
@media (max-width: 1440px) {
.home-about {
    padding-block: 120px;
}
.home-about__col--left {
    padding-right: 50px;
}
.home-about__col--right {
    padding-left: 50px;
}
}
@media (max-width: 1360px) {
	.home-about__col--left {
		padding-right: var(--sp-48);
	}

	.home-about__col--right {
		padding-left: var(--sp-48);
	}
}

@media (max-width: 1200px) {
	/* --sp-150 is the desktop rhythm; 80 is the first step down. */
	.home-about {
		padding-block: var(--sp-80);
	}

	.home-about__col--left {
		padding-right: var(--sp-32);
	}

	.home-about__col--right {
		/* padding-left: var(--sp-32); */
		padding-left: 29px;
	}
}

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

	.home-about__inner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		min-height: 0;
		gap: var(--sp-48);
	}

	.home-about__col,
	.home-about__media {
		-webkit-box-flex: 0;
		    -ms-flex: 0 0 auto;
		        flex: 0 0 auto;
		width: 100%;

	}

	.home-about__col--left {
		gap: var(--sp-32);
		padding-right: 0;
	}

	.home-about__col--right {
		padding-left: 0;
	}

	.home-about__media {
    aspect-ratio: 500 / 600;
    max-width: 500px;
}

	/* The artwork is a 940px-tall decorative slice sized for the desktop
	   section; below the desktop layout the section is shorter than the art. */
	.home-about__artwork {
		display: none;
	}
}

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

	.home-about__inner {
		gap: var(--sp-32);
	}

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

	.home-about__content {
		gap: var(--sp-16);
	}

	.home-about__mark img {
		width: 96px;
		height: 96px;
	}

	.home-about__col--right .hairline__rule {
		margin-bottom: var(--sp-16);
	}

	.home-about__col--right .section-description {
		margin-bottom: var(--sp-24);
	}

	/* .home-about__media {
		aspect-ratio: 4 / 3;
	} */
}

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