/*
 * Neighbourhood. Figma section/neighborhood 1896:35901 desktop (440 text
 * column, 64 gap, 716x374 maparea with border and a 30% shadow, picture right
 * -199), 1896:35902 mobile (text over a 350 map, 24 gap, picture right -400).
 * Inner padding as the page frames (2196:48960 desktop: 502 high, 64 above
 * and below the 374 row; 2204:45957 mobile: 644 high, 35 above and below the
 * 574 column), on top of the page gap between sections.
 *
 * .map-preview is shared with projects.css (identical rules) until it moves
 * to base.css.
 */

.neighbourhood__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 64px;
	padding-block: 64px;
}

.neighbourhood__text {
	display: flex;
	flex: 0 1 440px;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

/* searchbox 1224:27684 */
.neighbourhood__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding-inline: 16px;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-pill);
	background: var(--c-bg-grey);
	transition: border-color .15s ease;
}

.neighbourhood__search:focus-within { border-color: var(--c-primary); }

/* Not a postcode or a known council: nothing happens, the field just says so. */
.neighbourhood__search:has([aria-invalid="true"]) { border-color: var(--c-error, #e80303); }

.neighbourhood__search-icon { --icon-size: 16px; color: var(--c-text-dark); }

.neighbourhood__search-field {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: var(--f-subtitle-l);
	color: var(--c-text-dark);
}

.neighbourhood__search-field::placeholder { color: var(--c-text-grey); opacity: 1; }
.neighbourhood__search-field:focus { outline: none; }
.neighbourhood__search-field::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- map-preview (maparea) ---------- */
.map-preview {
	--map-w: 1308px;
	--map-h: 959px;
	--map-top: -427px;
	--map-right: 0px;
	--map-pin-top: 178px;
	--map-open-top: 295px;
	position: relative;
	display: block;
	align-self: stretch;
	height: 374px;
	overflow: hidden;
	border-radius: var(--r-l);
	background: var(--c-bg-white);
	color: var(--c-text-dark);
}

.map-preview__image {
	position: absolute;
	top: var(--map-top);
	right: var(--map-right);
	width: var(--map-w);
	max-width: none;
	height: var(--map-h);
	object-fit: cover;
	pointer-events: none;
}

.map-preview__pin {
	position: absolute;
	top: var(--map-pin-top);
	left: 50%;
	width: 61px;
	height: 54px;
	filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, .15));
	transform: translateX(-50%);
}

.map-preview__pin-shape { width: 100%; height: 98.5%; }

.map-preview__pin-label {
	position: absolute;
	top: calc(50% - 12.5px);
	inset-inline: 13.64%;
	font: var(--f-subtitle-m);
	text-align: center;
	white-space: nowrap;
}

.map-preview__open {
	--icon-size: 12px;
	position: absolute;
	top: var(--map-open-top);
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	padding: 7px 16px 8px;
	border-radius: var(--r-pill);
	background: var(--c-primary);
	color: var(--c-text-white);
	font: var(--f-subtitle-m);
	white-space: nowrap;
	transform: translateX(-50%);
	transition: background-color .15s ease;
}

.map-preview:hover .map-preview__open { background: var(--c-primary-hover); }

.map-preview.neighbourhood__map {
	--map-top: -427px;
	--map-right: -199px;
	flex: 0 1 716px;
	min-width: 0;
	border: 1px solid var(--c-border-light);
	box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .3);
}

/* The pin and button are measured from the outer edge in Figma. */
.neighbourhood__map .map-preview__pin { margin-top: -1px; }
.neighbourhood__map .map-preview__open { margin-top: -1px; }

@media (max-width: 767px) {
	.neighbourhood__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		padding-block: 35px;
	}

	.neighbourhood__text { flex: none; }

	.map-preview.neighbourhood__map {
		--map-right: -400px;
		flex: none;
	}
}