/*
 * Nexus Local Team — the /quote/ "Your local team" section.
 * Mockup: TMB-quote-page-handoff-2026-09-25 04-mockup-desktop.png (y≈679–885 of
 * 759px ≈ 392px tall at 1440) and 07-mockup-mobile.png.
 *
 * Desktop: photo panel (41% of the width, diagonal right edge, full height) ·
 * text column · 336px map card. Below 900px: a centred single column
 * (eyebrow → heading → round photo → details → button) with the map as a
 * full-width band underneath.
 */

.nexus-local-team {
	--nlt-green-deep: #0f3528;
	--nlt-green: #1e5340;
	--nlt-orange: #c9712e;
	--nlt-body: #6b6558;
	--nlt-cream: #f5f1e8;
	--nlt-paper: #fcfaf3;
	--nlt-icon: #2fc47e;
	--nlt-display: var(--wp--preset--font-family--nexus-display, "Poppins", system-ui, sans-serif);
	--nlt-serif: var(--wp--preset--font-family--nexus-serif, "Lora", Georgia, serif);
	--nlt-sans: var(--wp--preset--font-family--nexus-body, "Mulish", system-ui, sans-serif);

	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: var(--nlt-cream);
	color: var(--nlt-green-deep);
	overflow: hidden;
}

.nexus-local-team *,
.nexus-local-team *::before,
.nexus-local-team *::after {
	box-sizing: border-box;
}

.nexus-local-team__inner {
	display: grid;
	/* 584px of 1440: the photo panel scales with the viewport, not with the
	   padded inner box, so the diagonal lands where the mockup puts it. */
	grid-template-columns: minmax(0, 40.56vw) minmax(0, 1fr) 336px;
	align-items: center;
	min-height: 392px;
	padding-right: 68px;
}

.nexus-local-team--no-map .nexus-local-team__inner {
	grid-template-columns: minmax(0, 40.56vw) minmax(0, 1fr);
}

.nexus-local-team--no-photo .nexus-local-team__inner {
	grid-template-columns: minmax(0, 1fr) 336px;
	padding-left: 68px;
}

.nexus-local-team--no-photo.nexus-local-team--no-map .nexus-local-team__inner {
	grid-template-columns: minmax(0, 1fr);
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 68px;
}

/* ── Photo panel ─────────────────────────────────────────────────────── */

.nexus-local-team__photo {
	position: relative;
	align-self: stretch;
	min-height: 392px;
	margin: 0;
	overflow: hidden;
	/* Diagonal right edge: 510px at the top, 584px at the bottom (1440). */
	clip-path: polygon(0 0, 87.3% 0, 100% 100%, 0 100%);
}

.nexus-local-team__stock {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 42% 55%;
}

/* A studio headshot, framed: a round portrait on a deep-green panel. */
.nexus-local-team__photo--headshot {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-right: 9%;
	background:
		radial-gradient(120% 90% at 30% 20%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(160deg, #1e5340 0%, #0f3528 70%);
}

.nexus-local-team__headshot-frame {
	display: block;
	width: 272px;
	height: 272px;
	max-width: 78%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: #e9e5da;
	border: 6px solid rgba(252, 250, 243, 0.92);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.nexus-local-team__headshot {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	/* The brand headshots are pre-cut circles on white with a grey ring;
	   a slight zoom keeps the ring and white corners outside the frame and
	   centres on the face. */
	object-position: 50% 30%;
	transform: scale(1.12);
}

/* ── Text column ─────────────────────────────────────────────────────── */

.nexus-local-team__body {
	min-width: 0;
	padding: 14px 24px 34px 0;
	margin-left: -10px;
}

.nexus-local-team--no-photo .nexus-local-team__body {
	margin-left: 0;
}

.nexus-local-team__eyebrow {
	margin: 0 0 12px;
	font: 600 16px/1.3 var(--nlt-display);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nlt-orange);
}

.nexus-local-team__heading {
	margin: 0 0 18px;
	padding: 0;
	font: 700 37px/1.24 var(--nlt-display);
	letter-spacing: -0.025em;
	color: var(--nlt-green-deep);
}

.nexus-local-team__heading-main,
.nexus-local-team__heading-em {
	display: block;
}

.nexus-local-team__heading-em {
	margin-top: 2px;
	font: italic 400 41px/1.2 var(--nlt-serif);
	letter-spacing: -0.005em;
	color: var(--nlt-green);
}

.nexus-local-team__details {
	padding-left: 12px;
}

.nexus-local-team__name {
	margin: 0 0 4px;
	font: 600 19px/1.45 var(--nlt-display);
	color: var(--nlt-green-deep);
}

.nexus-local-team__meta {
	margin: 0;
	font: 400 18px/1.55 var(--nlt-sans);
	color: var(--nlt-body);
}

.nexus-local-team__branch,
.nexus-local-team__tenure {
	display: block;
}

.nexus-local-team__quote {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	quotes: none;
}

.nexus-local-team__quote p {
	margin: 0;
	font: italic 400 18px/1.5 var(--nlt-serif);
	color: var(--nlt-green-deep);
}

.nexus-local-team__cta {
	margin: 22px 0 0;
}

.nexus-local-team__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 49px;
	min-width: 272px;
	padding: 10px 36px;
	border-radius: 999px;
	background: var(--nlt-green-deep);
	color: #fff;
	font: 600 19px/1.2 var(--nlt-display);
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.nexus-local-team__call:hover {
	background: var(--nlt-green);
	color: #fff;
}

.nexus-local-team__call:focus-visible {
	outline: 3px solid var(--nlt-orange);
	outline-offset: 3px;
}

.nexus-local-team__call-icon {
	flex: 0 0 auto;
	color: var(--nlt-icon);
}

/* ── Map card ────────────────────────────────────────────────────────── */

.nexus-local-team__map {
	margin: 0;
	width: 336px;
	height: 319px;
	display: flex;
	flex-direction: column;
	border: 1px solid #e3ddd0;
	border-radius: 12px;
	background: #fbf9f4;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 53, 40, 0.05);
}

.nexus-local-team__map-title {
	flex: 0 0 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 12px;
	border-bottom: 1px solid #e8e2d6;
	font: 600 12px/1 var(--nlt-display);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #2b4a40;
}

.nexus-local-team__map-link,
.nexus-local-team__map > .nexus-local-team__map-pic {
	position: relative;
	display: block;
	flex: 1 1 auto;
	min-height: 0;
}

.nexus-local-team__map-pic {
	display: block;
	width: 100%;
	height: 100%;
}

/* The image is requested in the frame's own shape (504×420 desktop,
   710×270 mobile), so cover only trims a pixel or two, never the
   attribution in its corner. */
.nexus-local-team__map-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
}

.nexus-local-team__map-link:focus-visible {
	outline: 3px solid var(--nlt-orange);
	outline-offset: -3px;
}

.nexus-local-team .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Narrower desktops ───────────────────────────────────────────────── */

@media (max-width: 1279px) and (min-width: 900px) {
	.nexus-local-team__inner {
		grid-template-columns: minmax(0, 36vw) minmax(0, 1fr) 300px;
		padding-right: 40px;
	}

	.nexus-local-team--no-map .nexus-local-team__inner {
		grid-template-columns: minmax(0, 38vw) minmax(0, 1fr);
	}

	.nexus-local-team__map {
		width: 300px;
		height: 288px;
	}

	.nexus-local-team__heading {
		font-size: 31px;
	}

	.nexus-local-team__heading-em {
		font-size: 34px;
	}

	.nexus-local-team__headshot-frame {
		width: 232px;
		height: 232px;
	}
}

/* ── Mobile / tablet: one centred column ─────────────────────────────── */

@media (max-width: 899px) {
	.nexus-local-team__inner,
	.nexus-local-team--no-map .nexus-local-team__inner,
	.nexus-local-team--no-photo .nexus-local-team__inner,
	.nexus-local-team--no-photo.nexus-local-team--no-map .nexus-local-team__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		max-width: none;
		margin: 0;
		padding: 20px 20px 30px;
		text-align: center;
	}

	.nexus-local-team--has-map .nexus-local-team__inner {
		padding-bottom: 0;
	}

	.nexus-local-team__body {
		display: contents;
	}

	.nexus-local-team__eyebrow {
		order: 1;
		margin: 0 0 12px;
		font-size: 10.5px;
		letter-spacing: 0.24em;
	}

	.nexus-local-team__heading {
		order: 2;
		margin: 0 0 16px;
		font-size: 20px;
		line-height: 1.25;
	}

	.nexus-local-team__heading-em {
		margin-top: 2px;
		font-size: 20px;
	}

	.nexus-local-team__photo {
		order: 3;
		align-self: center;
		min-height: 0;
		margin: 0 0 22px;
		clip-path: none;
	}

	.nexus-local-team__photo--headshot {
		padding: 0;
		background: none;
	}

	.nexus-local-team__headshot-frame {
		width: 130px;
		height: 130px;
		max-width: none;
		border-width: 0;
		box-shadow: none;
	}

	.nexus-local-team__photo--stock {
		align-self: stretch;
		width: 100%;
		aspect-ratio: 16 / 9;
		border-radius: 14px;
	}

	.nexus-local-team__details {
		order: 4;
		padding: 0;
	}

	.nexus-local-team__name {
		margin: 0 0 3px;
		font-size: 15px;
	}

	.nexus-local-team__meta {
		font-size: 13.5px;
		line-height: 1.5;
	}

	.nexus-local-team__branch,
	.nexus-local-team__tenure {
		display: inline;
	}

	.nexus-local-team__branch + .nexus-local-team__tenure::before {
		content: " ";
	}

	.nexus-local-team__quote {
		margin-top: 8px;
	}

	.nexus-local-team__quote p {
		font-size: 13.5px;
	}

	.nexus-local-team__cta {
		margin-top: 16px;
	}

	.nexus-local-team__call {
		min-width: 0;
		width: min(100%, 240px);
		min-height: 48px;
		padding: 10px 24px;
		font-size: 15px;
	}

	.nexus-local-team__map {
		order: 5;
		width: auto;
		height: auto;
		margin: 24px -20px 0;
		padding: 10px 17px 20px;
		border: 0;
		border-radius: 0;
		background: var(--nlt-paper);
		box-shadow: none;
	}

	.nexus-local-team__map-title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
		padding: 0;
	}

	.nexus-local-team__map-link,
	.nexus-local-team__map > .nexus-local-team__map-pic {
		aspect-ratio: 710 / 270;
		border-radius: 10px;
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nexus-local-team__call {
		transition: none;
	}
}
