/**
 * NovaBP Tax Planning — Find Tax Planning Services Near Me
 *
 * Section 7 of the Tax Planning page: a centred header over a row that pairs a
 * 560px map plate with a navy address panel.
 *
 * Depends on `novabp-tax-base` for tokens, the section shell and the eyebrow /
 * heading / lede primitives.
 *
 * Figma reference: node 2261:8236 (map plate 2261:8247, marker 2261:8248,
 * panel 2261:8304, address row 2261:8322, watermark 2261:8965)
 */

.nova-plan-location {
	background-color: var(--nova-plan-location-bg, var(--nova-tax-surface));
}

.nova-plan-location__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-plan-location-gap, 80px);
}

.nova-plan-location__header {
	--nova-tax-header-max: 800px;
}

.nova-plan-location__body {
	display: flex;
	align-items: stretch;
	gap: 20px;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Map plate
 * ------------------------------------------------------------------------ */

/*
 * The map is a flat exported image, not an embed — the same call the
 * Bookkeeping location section makes, and for the same reason: a live Google
 * Maps iframe would drag a third-party script and a consent question into a
 * section that only has to say "we are in Newcastle". The marker links out to
 * directions instead, which costs nothing on load.
 *
 * Figma strokes the plate with a vertical #C5CDE0 gradient fading to 40%. As
 * with the Core Benefits tray, a gradient border is two backgrounds clipped
 * differently: the map paints to the padding box, the stroke to the border box.
 */
.nova-plan-location__map {
	--nova-plan-location-edge-from: #c5cde0;
	--nova-plan-location-edge-to: rgb(197 205 224 / 0.4);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--nova-plan-location-map-width, 560px);
	width: var(--nova-plan-location-map-width, 560px);
	min-height: var(--nova-plan-location-map-min-height, 360px);
	padding: 32px;
	border: 4px solid transparent;
	border-radius: 20px;
	background-color: var(--nova-tax-surface);
	background-image:
		var(--nova-plan-location-map-image, none),
		linear-gradient(179deg, var(--nova-plan-location-edge-from) 0%, var(--nova-plan-location-edge-to) 100%);
	background-position: center, center;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, auto;
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

/*
 * The marker: a translucent navy halo around a solid disc. Figma pads the halo
 * 14px and gives the disc a 4px white-60% ring and a soft drop shadow, which is
 * what lifts it off the map underneath.
 */
.nova-plan-location__marker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border: 0;
	border-radius: 100px;
	background-color: var(--nova-plan-location-halo, rgb(2 17 55 / 0.1));
	cursor: pointer;
}

.nova-plan-location__marker-disc {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 4px solid rgb(255 255 255 / 0.6);
	border-radius: 100px;
	background-color: var(--nova-plan-location-pin, var(--nova-tax-primary));
	box-shadow: 0 4px 12px rgb(1 0 32 / 0.2);
	color: var(--nova-plan-location-pin-glyph, var(--nova-tax-green));
}

/*
 * The NovaBP mark rather than a square glyph — Figma draws it 30 x 19.5 inside
 * the 44px disc, so both dimensions are set rather than one. Same treatment the
 * Bookkeeping location marker gets.
 */
.nova-plan-location__marker-disc .nova-tax-icon {
	width: 30px;
	height: 19.5px;
}

/* ---------------------------------------------------------------------------
 * Address panel
 * ------------------------------------------------------------------------ */

.nova-plan-location__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;
	gap: 28px;
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
	background-color: var(--nova-plan-location-panel-bg, var(--nova-tax-primary));
	overflow: hidden;
}

/*
 * The oversized pin glyph Figma drops into the panel's lower right — green, not
 * white, at 10%, and tilted. Pure texture: `aria-hidden` in the markup, inert to
 * the pointer, and clipped by the panel's own `overflow` so it cannot widen the
 * row.
 *
 * Figma reports the node as a 172.47px square because that is the *rotated*
 * bounding box; the glyph inside it is 134.56px (172.47 / (cos20° + sin20°)).
 * The offsets below place that 134.56px box, so the tilted shape bleeds ~5px
 * past the right edge and ~18px past the bottom exactly as the design does.
 */
.nova-plan-location__watermark {
	position: absolute;
	inset-block-end: 1px;
	inset-inline-end: 14px;
	z-index: 0;
	width: 135px;
	height: 135px;
	transform: rotate(-20deg);
	color: var(--nova-plan-location-watermark, var(--nova-tax-green));
	opacity: 0.1;
	pointer-events: none;
}

.nova-plan-location__panel > *:not(.nova-plan-location__watermark) {
	position: relative;
	z-index: 1;
}

.nova-plan-location__panel-copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
}

.nova-plan-location .nova-plan-location__panel-title {
	font-family: var(--nova-tax-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-white);
}

.nova-plan-location__panel-lede {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	/* Figma paints this white at 70% layer opacity; baked in, as the base does. */
	color: var(--nova-plan-location-panel-lede, rgb(255 255 255 / 0.7));
}

/*
 * The address row. Both the fill and the hairline are horizontal gradients in
 * Figma — #0F1D41 fading to 20%, over white fading 10% to 2% — so this is the
 * same padding-box / border-box pair the map plate and the Core Benefits tray
 * use.
 */
.nova-plan-location__address {
	display: flex;
	align-items: center;
	gap: 16px;
	width: 100%;
	padding: 16px;
	border: 1px solid transparent;
	border-radius: 16px;
	background-image:
		linear-gradient(90deg, rgb(15 29 65 / 1) 0%, rgb(15 29 65 / 0.2) 100%),
		linear-gradient(90deg, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0.02) 100%);
	background-origin: border-box;
	background-clip: padding-box, border-box;
}

.nova-plan-location__address-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background-color: rgb(255 255 255 / 0.1);
	color: var(--nova-tax-white);
}

.nova-plan-location__address-icon .nova-tax-icon {
	width: 28px;
	height: 28px;
}

.nova-plan-location__address-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.nova-plan-location__address-label {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.5);
}

.nova-plan-location__address-value {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--nova-tax-white);
}

/*
 * Buttons / Primary / Outline in the Figma set — a white button with a hairline
 * and navy label. It is the only one on the site, so it stays here rather than
 * becoming a fourth `.nova-tax-btn--*` in the base.
 */
.nova-plan-location .nova-plan-location__cta {
	border: 1px solid var(--nova-tax-rule);
	background-color: var(--nova-plan-location-cta-bg, var(--nova-tax-white));
	color: var(--nova-plan-location-cta-color, var(--nova-tax-primary));
}

.nova-plan-location .nova-plan-location__cta:hover,
.nova-plan-location .nova-plan-location__cta:focus {
	background-color: var(--nova-tax-surface);
	color: var(--nova-plan-location-cta-color, var(--nova-tax-primary));
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies the 1440 frame only; everything below is an addition.
 * ------------------------------------------------------------------------ */

@media (max-width: 1366px) {
	/*
	 * The map is the only fixed width in the row, so at a narrower measure it is
	 * what squeezes the address value onto a second line. Giving back 80px keeps
	 * that line intact.
	 */
	.nova-plan-location__body {
		--nova-plan-location-map-width: 480px;
	}
}

@media (max-width: 1024px) {
	.nova-plan-location__inner {
		--nova-plan-location-gap: 56px;
	}

	/*
	 * The address row cannot hold its 20px value beside a 56px tile much under
	 * 420px, and the map stops being readable under about 400px. Below 1024 the
	 * pair stacks: the map runs full width as a band with the panel under it.
	 */
	.nova-plan-location__body {
		flex-direction: column;
		gap: 20px;
	}

	.nova-plan-location__map {
		flex: 0 0 auto;
		width: 100%;
		min-height: 320px;
	}

	.nova-plan-location .nova-plan-location__panel-title {
		font-size: 24px;
	}

	.nova-plan-location__panel-lede {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.nova-plan-location__inner {
		--nova-plan-location-gap: 40px;
	}

	.nova-plan-location__map {
		min-height: 240px;
		padding: 20px;
	}

	.nova-plan-location__panel {
		gap: 20px;
		padding: 20px;
	}

	/* The tile and the two lines no longer share a row at this width. */
	.nova-plan-location__address {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
	}

	.nova-plan-location__address-value {
		font-size: 18px;
	}

	.nova-plan-location .nova-plan-location__cta {
		width: 100%;
	}
}