/**
 * "We live here too" band.
 *
 * Copy on the left half against white, the North Minneapolis building bleeding
 * off the right edge of the viewport. Carried over from the current site.
 */

.sterling-here {
	position: relative;
	background-color: #fff;
}

.sterling-here__copy {
	width: auto;
	max-width: calc(50% - 15px);
	gap: 0;
	padding: 80px 0;
}

/* Photo
   ------------------------------------------------------------------------ */

/* The section is full width even though its inner wrapper is boxed, and an
   absolutely positioned child resolves against that full-width padding box —
   so right:0 reaches the viewport edge without any vw arithmetic. */
/* Pinned top and bottom rather than height:100% — the section's own height is
   set by the copy column, and a percentage height against an auto-height
   containing block leaves the photo at its natural size. */
.elementor-widget-image.sterling-here__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50vw;
}

.sterling-here__photo .elementor-widget-container {
	height: 100%;
}

.sterling-here__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Type
   ------------------------------------------------------------------------ */

.elementor-widget-heading.sterling-here__title .elementor-heading-title {
	margin: 0 0 1.25rem;
	color: var(--sterling-ink, #231f20);
	font-family: var(--sterling-display, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.elementor-widget-text-editor.sterling-here__body {
	margin-bottom: 2.125rem;
	color: var(--sterling-ink, #231f20);
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}

.sterling-here__body p:last-child {
	margin-bottom: 0;
}

/* Call to action
   ------------------------------------------------------------------------ */

/* Qualified with the widget class so it sits above Elementor's per-page
   ".elementor-widget-button .elementor-button", which paints the global accent
   colour and would otherwise win on load order.

   Contrast note: the current site sets white on #bd9b51, which is only 2.6:1.
   Inking the label instead reads at roughly 8:1, matching the call already made
   on the gold category panel. */
.elementor-widget-button.sterling-here__cta .elementor-button {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background-color: var(--sterling-gold, #bd9b51);
	color: var(--sterling-ink, #231f20);
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 0;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.elementor-widget-button.sterling-here__cta .elementor-button:hover,
.elementor-widget-button.sterling-here__cta .elementor-button:focus-visible {
	background-color: var(--sterling-black, #0e0e0e);
	color: #fff;
}

/* Breakpoints
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sterling-here__copy {
		max-width: 100%;
		padding: 50px 0 0;
	}

	/* Back into the flow, below the copy, as on the current site. */
	.elementor-widget-image.sterling-here__photo {
		position: static;
		width: 100%;
		height: 50vh;
		margin-bottom: 50px;
	}

	.sterling-here__photo .elementor-widget-container {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-button.sterling-here__cta .elementor-button {
		transition: none;
	}
}