/**
 * NovaBP Bookkeeping — Contact a Bookkeeper Near Me (section 10)
 *
 * Centred header, a map plate with a marker at its centre, then two service
 * area cards side by side. Card typography reuses `.nova-tax-card__title` and
 * `.nova-tax-card__body` from `novabp-tax-base.css`; the card shell here is a
 * horizontal icon-beside-text layout rather than the stacked `.nova-tax-card`,
 * so it is written out.
 *
 * Figma reference: node 2165:8955
 */

.nova-book-location {
	--nova-book-location-bg: var(--nova-tax-surface);
	--nova-book-location-gap: 80px;
	--nova-book-location-map-h: 400px;
	--nova-book-location-pin: var(--nova-tax-primary);

	background-color: var(--nova-book-location-bg);
}

.nova-book-location__inner {
	display: flex;
	flex-direction: column;
	gap: var(--nova-book-location-gap);
}

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

.nova-book-location__stack {
	--nova-book-location-card-gap: 20px;

	display: flex;
	flex-direction: column;
	gap: var(--nova-book-location-card-gap);
}

/* ---------------------------------------------------------------------------
 * Map plate
 *
 * Figma gives it a 4px border that is itself a gradient, which no `border-color`
 * can express — so the border is transparent and two background layers paint
 * it: the map clipped to the padding box, the gradient to the border box.
 * ------------------------------------------------------------------------ */

.nova-book-location__map {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--nova-book-location-map-h);
	padding: 32px;
	background:
		var(--nova-book-location-media) center / cover no-repeat padding-box,
		linear-gradient(179deg, #c5cde0 0%, rgb(197 205 224 / 0.4) 100%) border-box;
	background-color: var(--nova-tax-surface);
	border: 4px solid transparent;
	border-radius: 20px;
}

/*
 * The marker: a halo around a solid disc with a white ring, exactly as Figma
 * draws it (2165:8967) — no caption; the address rides on the anchor as
 * screen-reader-only text.
 *
 * Figma paints the halo `rgb(2 17 55 / 0.1)`; `#e6e7eb` is that colour flattened
 * onto white, and flat is the point. The map export is cropped so Google's own
 * red pin sits dead centre, directly under this halo, and only an opaque fill
 * hides it. The halo is 72px across against a ~61px pin at the 1280px measure —
 * keep that margin if the padding is ever retuned.
 */
.nova-book-location__pin {
	display: inline-flex;
	align-items: center;
	padding: 14px;
	background-color: #0211371A;
	border-radius: 100px;
	transition: background-color 0.2s ease;
}

a.nova-book-location__pin:hover,
a.nova-book-location__pin:focus-visible {
	background-color: var(--nova-tax-border);
}

a.nova-book-location__pin:focus-visible {
	outline: 2px solid var(--nova-book-location-pin);
	outline-offset: 3px;
}

/*
 * The disc is 44px of solid navy and the white ring sits *outside* it — Figma
 * draws the ring as a 48px stroked circle around the 44px fill (2165:8967), so
 * it overflows 2px into the halo's 14px padding rather than eating into the
 * disc. `.nova-tax *` is `border-box`, so a real 4px border would shrink the
 * navy to 36px and leave the mark looking oversized inside it; the ring is a
 * spread shadow instead, stacked in front of the same drop shadow Figma gives
 * the group.
 */
.nova-book-location__pin-dot {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background-color: var(--nova-book-location-pin);
	border-radius: 100px;
	box-shadow:
		0 0 0 4px rgb(255 255 255 / 0.6),
		0 4px 12px 0 rgb(1 0 32 / 0.2);
	color: var(--nova-tax-white);
}

/*
 * The NovaBP mark, not a square glyph — Figma draws it 30 x 19.5 inside the 44px
 * disc, so both dimensions are set rather than one.
 */
.nova-book-location__pin-dot .nova-tax-icon {
	width: 30px;
	height: 19.5px;
}

/* ---------------------------------------------------------------------------
 * Service area cards
 * ------------------------------------------------------------------------ */

.nova-book-location__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nova-book-location-card-gap);
}

.nova-book-location__card {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	padding: 24px;
	background-color: var(--nova-tax-white);
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
}

/* The shared tile, but tinted rather than white — it sits on white here, not
 * on a tinted card. */
.nova-book-location__card-icon {
	background-color: var(--nova-tax-surface);
}

.nova-book-location__card-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Responsive
 *
 * Figma supplies desktop only. Everything below 1440 is an addition.
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.nova-book-location__card {
		gap: 16px;
		padding: 20px;
	}
}

@media (max-width: 767px) {
	/*
	 * Two cards across leaves each about 160px of measure once the icon tile and
	 * the padding are paid for, so they stack. The tile stays beside the text
	 * rather than above it — the pair reads as one line of a list.
	 */
	.nova-book-location__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.nova-book-location__map {
		padding: 20px;
		border-width: 3px;
	}

	/*
	 * The plate is a third of its desktop height here, so the marker comes down
	 * with it. The map scales faster than the marker does, so the halo still
	 * covers the pin underneath at this size.
	 */
	.nova-book-location__pin {
		padding: 10px;
	}

	.nova-book-location__pin-dot {
		width: 36px;
		height: 36px;
		box-shadow:
			0 0 0 3px rgb(255 255 255 / 0.6),
			0 4px 12px 0 rgb(1 0 32 / 0.2);
	}

	/* 30 x 19.5 scaled to the 36px disc, same ratio as desktop. */
	.nova-book-location__pin-dot .nova-tax-icon {
		width: 24.5px;
		height: 15.9px;
	}
}