/**
 * Louisville Service Stories page helpers introduced in v0.5.4.9.2.
 *
 * Layout, column order, spacing, surfaces, typography, and responsive stacking
 * are owned by native WPBakery/Impreza settings in the page payload. These
 * selectors cover only effects that those controls cannot express cleanly.
 */

:root {
	--ret-city-gold: #d9c77e;
}

/* The hero uses a plugin-bundled image, so its image and layered shade live here. */
.ret-city-stories-hero {
	isolation: isolate;
	background: #111 url("../images/homepage-concepts/louisville.jpg") no-repeat center 55% / cover;
}

.ret-city-stories-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.65) 42%, rgba(0, 0, 0, 0.18) 76%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.58), transparent 42%);
	pointer-events: none;
}

.ret-city-stories-hero-title strong {
	color: var(--ret-city-gold);
	font-weight: inherit;
}

/* The route line is one editable Text Block containing its four labels. */
.ret-city-stories-route .wpb_wrapper {
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.ret-city-stories-route span {
	font-size: 0.61rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ret-city-stories-route i {
	flex: 1;
	height: 1px;
	background: rgba(217, 199, 126, 0.68);
}

/* Decorative background treatment behind the native introduction row. */
.ret-city-stories-intro {
	isolation: isolate;
	background-image:
		linear-gradient(rgba(26, 26, 26, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(26, 26, 26, 0.025) 1px, transparent 1px);
	background-size: 80px 80px;
}

.ret-city-stories-intro::after {
	content: "";
	position: absolute;
	right: -14vw;
	top: -28vw;
	z-index: 0;
	width: 58vw;
	height: 58vw;
	border: 1px solid rgba(164, 115, 6, 0.12);
	border-radius: 50%;
	box-shadow: 0 0 0 7vw rgba(164, 115, 6, 0.025), 0 0 0 15vw rgba(164, 115, 6, 0.02);
	pointer-events: none;
}

/*
 * Impreza's Image element exposes height but not object-fit. This is the only
 * service-story presentation rule: it crops the selected image to its native
 * element/column height without changing row or column geometry.
 */
.ret-city-story-manual__image .w-image-h {
	height: 100%;
	overflow: hidden;
}

.ret-city-story-manual__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}