/* Living + Future Rows
   Striped olive band across the top + alternating image / text rows on cream.
   Home page: "The Lookout Living" (image left, bulleted list, VIEW FLOORPLANS)
   + "Your place in Bozeman's future" (image right, copy, VIEW PLANS).
   Tunable knobs are the --lf-* custom properties on the section. */

.living-future--section {
	--lf-band-h: 90px;        /* olive band height (mobile)            */
	--lf-overlap: 28px;       /* how far the first image rises into it */
	--lf-row-gap: 28px;       /* gap between image and text columns    */
	--lf-img-ratio: 2.5 / 2;  /* both row images share one aspect ratio */
	position: relative;
	background: var(--color-body-cream);
	color: var(--color-text-black);
	overflow: hidden;
}

/* Decorative olive band + hand-drawn diagonal stripes, right-aligned. */
.living-future--band {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--lf-band-h);
	background-color: var(--color-hero-grey);
	pointer-events: none;
}

.living-future--band::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(42%, 595px);
	background: url('../../images/diagonal-stripes.png') center right / cover no-repeat;
}

.living-future--container.has-band-mod {
	padding-top: var(--lf-band-h);
}

.living-future--container {
	position: relative;
	z-index: 1;
	padding-bottom: 50px;
}

/* ---- Rows ------------------------------------------------------------- */

.living-future--row {
	display: flex;
	flex-direction: column;
	gap: var(--lf-row-gap);
}

.living-future--row + .living-future--row {
	margin-top: 48px;
}

/* First image straddles the olive band / cream seam. */
.living-future--row.first-mod .living-future--image-col {
	margin-top: calc(var(--lf-overlap) * -1);
}

.living-future--container:not(.has-band-mod) .living-future--row.first-mod .living-future--image-col {
	margin-top: 0px;
}

/* ---- Image: shared box + notched-corner cutout ----------------------- */

.living-future--image {
	aspect-ratio: var(--lf-img-ratio);
	clip-path: polygon(
		/* top-left */
		0% 7%, 7% 7%, 7% 0%,
		/* top-right */
		93% 0%, 93% 7%, 100% 7%,
		/* bottom-right */
		100% 93%, 93% 93%, 93% 100%,
		/* bottom-left */
		7% 100%, 7% 93%, 0% 93%
	);
}

/* ---- Text column ----------------------------------------------------- */

.living-future--text-col {
	position: relative;
}

.living-future--heading {
	margin: 0 0 0.6em;
	font-family: 'ABC Whyte Inktrap', sans-serif;
	font-weight: 400;
	font-size: 2rem;
	line-height: 1.1;
	color: var(--color-text-black);
}

.living-future--body {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* Gold lead arrow (copy-arrow.svg), to the left of the copy/list, near the top. */
.living-future--arrow {
	flex: 0 0 auto;
	display: block;
	width: 38px;
	height: auto;
	margin-top: -10px;
}

.living-future--content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Copy WYSIWYG — handles both prose and bulleted lists. */
.living-future--copy > :first-child { margin-top: 0; }
.living-future--copy > :last-child { margin-bottom: 0; }

.living-future--copy p {
	margin: 0 0 1em;
	line-height: 1.85;
}

.living-future--copy ul,
.living-future--copy ol {
	margin: 0;
	padding-left: 1.1em;
}

.living-future--copy li {
	margin: 0 0 0.55em;
	line-height: 1.4;
}

.living-future--cta-wrap {
	margin-top: 28px;
}

/* ---- Desktop --------------------------------------------------------- */

@media (min-width: 992px) {
	.living-future--section {
		--lf-band-h: 210px;
		--lf-overlap: 96px;
		--lf-row-gap: 56px;
	}

	.living-future--container {
		padding-bottom: 80px;
	}

	.living-future--row {
		flex-direction: row;
		align-items: center;
	}

	.living-future--row.image-right-mod {
		flex-direction: row-reverse;
	}

	.living-future--row + .living-future--row {
		margin-top: 64px;
	}

	/* Image slightly wider than the text column. */
	.living-future--image-col {
		flex: 1 1 54%;
		min-width: 0;
	}

	.living-future--text-col {
		flex: 1 1 46%;
		min-width: 0;
	}

	.living-future--heading {
		font-size: 2.75rem;
	}

	/* First row: drop the heading and pull the image deep into the band. */
	.living-future--row.first-mod .living-future--heading {
		padding-top: 60px;
	}

	.living-future--row.first-mod .living-future--image-col {
		margin-top: -225px;
	}

	/* No olive band up top → the first image sits in its natural position
	   instead of rising into a band that isn't there. */
	.living-future--container:not(.has-band-mod) .living-future--row.first-mod .living-future--image-col {
		margin-top: 0px;
	}
}

@media (min-width: 1200px) {
	.living-future--heading {
		font-size: 3rem;
	}
}

/* ---- Alternate style -------------------------------------------------- */
/* Natural-ratio images, no band-overlap margins, and a larger yellow-stripes
   panel sitting behind each image (flipped 180° on image-left rows).
   Placement of the stripe panel is intentionally rough for now. */

.living-future--section.alt-mod .living-future--image {
	position: relative;
	aspect-ratio: auto;
	clip-path: none;
}

/* Show the image at its natural ratio instead of the fixed cover box. */
.living-future--section.alt-mod .living-future--image > img {
	position: relative;
	z-index: 1;
	height: auto;
}

/* No band-overlap pulls on the first row (image or heading). */
.living-future--section.alt-mod .living-future--row.first-mod .living-future--image-col {
	margin-top: 0;
}

.living-future--section.alt-mod .living-future--row.first-mod .living-future--heading {
	padding-top: 0;
}

/* Transparent yellow-stripes panel behind the image, larger than it. */
.living-future--section.alt-mod .living-future--image::before {
	content: "";
	position: absolute;
	aspect-ratio: 100 / 102;
	left: 40%;
	top: -60px;
	bottom: -60px;
	z-index: 0;
	background: url('../../images/yellow-stripes.png') center / contain no-repeat;
	pointer-events: none;
}

/* Image-left rows: flip the stripes panel 180°. */
.living-future--section.alt-mod .living-future--row.image-left-mod .living-future--image::before {
	transform: rotate(180deg);
	left: auto;
	right: 40%;
	bottom: -100px;
}