/* Cream "bleed" band at the bottom of the banner (60px mobile → 120px desktop),
   per the design. A dedicated strip so it's independent of the section's own
   Background / Padding controls. */
.image-address--section {
	position: relative;
}
.image-address--section::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	height: 60px;
	background-color: var(--color-body-cream);
}

.image-address--container {
	position: relative;
}

/* The image sits within the theme-container; this is the positioning context
   for the overlay so its negative offset measures from the image edge. */
.image-address--media {
	position: relative;
	height: clamp(380px, 47vw, 650px);
	background-color: var(--color-hero-grey);
}

.image-address--image {
	position: absolute;
	inset: 0;

}

/* .object-fit-cover > img fills the media box (cover) — see style.css */

/* Address graphic — vertically centred, hanging off the image's left edge */
.image-address--overlay {
	position: absolute;
	top: 50%;
	left: -15px;
	transform: translateY(-50%);
	width: clamp(150px, 19vw, 280px);
	height: auto;
	z-index: 2;
	pointer-events: none;
}

@media (min-width: 992px) {
	.image-address--overlay {
		left: -30px;
	}

	.image-address--section::before {
		height: 120px;
	}
}