/* ContentV5 — "Content - Variation - 01 - Image + Values Overlap" (custom design). */

/* Harvest: water-ripple photo under the 0.8 white overlay = effective image opacity ~0.2. */
.cnt.v5.bg-image {
	--img-bg-o: 0.15;
}

/* Harvest: About boards' plain foreground image is 768x665, r=10. */
.cnt.v5 picture.cnt-fgi {
	display: block;

	img {
		width: 100%;
		aspect-ratio: 768 / 665;
		object-fit: cover;
	}
}

/* Default round bullets now come from common/content.css. */

/* Harvest: Bullet List Bullet is a 12x3 accent dash. */
.cnt.v5 .cnt-stl ul.dsh-lst > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 0.75em;
	height: 3px;
	background-color: var(--accent);
}

/* Callout rows pairing the brand logomark with text (About / Service Parent boards). */
.cnt.v5 .cnt-stl aside.flx {
	column-gap: 2rem;

	> img {
		flex: 0 0 auto;
	}
}

/* -- Landmark home (Figma 18723:21723): .cnt-v5-bnd ------------------------------------
   Opted into by passing bandImageUrl. Black-to-#212121 vertical fade, Main Full width, the
   "Why Choose" selling-point cards in the left column, and a full-width house photo that
   STACKS BELOW the content rather than sitting behind it.

   bottom-house.png is 1448x1086 with a fully transparent sky over its top ~30% (the
   chimney starts at 30.2%). The photo is cropped to its top 64% (as in the design), and a
   negative top margin tucks only that transparent sky up under the content - so however
   long the content runs, the roofline always starts --cnt-v5-bnd-gap below it and never
   sits behind the copy or the button. Margin percentages resolve against the section's
   width, the same width the photo is drawn at, so the overlap tracks the photo's size. */

.cnt.v5.cnt-v5-bnd {
	--cnt-v5-bnd-gap: 3rem;          /* minimum space between the content and the roofline */
	--cnt-v5-bnd-sky: 21%;           /* transparent sky height as % of width (22.6% minus light glow) */
	--cnt-v5-crd-sdw: 0 0.25rem 0.3125rem hsl(from var(--accent) h s l / 0.3);

	position: relative;
	overflow: clip;
	background-image: linear-gradient(180deg, var(--black) 0%, var(--background) 100%);
	padding-bottom: 0;

	> .mn_wd {
		z-index: 1;
		max-width: var(--mn_max);
	}

	> .cnt-v5-bnd-img {
		position: relative;
		display: block;
		margin-top: calc(var(--cnt-v5-bnd-gap) - var(--cnt-v5-bnd-sky));
		aspect-ratio: 1448 / 695;        /* top 64% of the 1448x1086 photo */
		pointer-events: none;

		img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: 50% 0;
		}
	}



	/* Callout box: Figma #d1d1d1 panel with dark text and a bronze underlined link */
	.txt-hlt.v2 {
		--txt-hlt-bg: #d1d1d1;
		padding: 1.5rem;

		a {
			text-decoration-line: underline;
		}
	}

	/* Read More bar: 2px gold rule, tertiary (gold) bold label */
	.cnt-xpnd-btn {
		border-top: 2px solid hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));
		padding-block: 0.625rem;
		color: var(--btn-trt-txt);
		font-family: var(--btn-ff);
		font-size: var(--btn-s);
		font-weight: var(--btn-w);
	}

	/* -- Why Choose cards ----------------------------------------------------------- */

	.cnt-v5-why {
		row-gap: 2rem;
	}

	.cnt-v5-why .grd {
		--grd-sp-dyn: 1.5rem;
	}

	/* 2x2 in a half column: grid.css only goes two-up at a 50rem container, wider than a
	   half column, so the cards switch at 30rem instead. */
	@container (width >= 30rem) {
		.cnt-v5-why .grd > * {
			flex-basis: calc(50% - var(--grd-sp-dyn) * 0.5);
		}
	}

	.cnt-v5-why-crd {
		row-gap: 1.5rem;
		justify-content: center;
		padding: 1.5rem;
		background-color: var(--background);
		border: 1px solid hsl(from var(--bdr-clr) h s l / var(--bdr-clr-o));
		filter: drop-shadow(var(--cnt-v5-crd-sdw));

		img {
			width: 4.6875rem;
			height: 4.6875rem;
		}
	}
}

section.cnt.v5.cnt-v5-bnd[data-colors] + section[data-colors][class*="pd_v"]:not(.bg-image) {
	padding-top: var(--pd-v);
}