/* Portfolio map: pins placed over the aerial photo, plus the step states that
   spd-portfolio.js toggles via [data-step]. Without JS every pin shows (final state). */
.spd-map {
	position: relative;
	overflow: hidden;
}

.spd-map > .wp-block-image { margin: 0; }
.spd-map > .wp-block-image img { display: block; width: 100%; }

.spd-pin {
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -100%);
	box-shadow: 0 10px 24px rgb(0 0 0 / 30%);
	pointer-events: none;
	transition: opacity 0.45s, transform 0.45s;
}

.spd-pin p { white-space: nowrap; }

/* stem and dot under each card */
.spd-pin::after,
.spd-pin::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.spd-pin::after {
	top: 100%;
	width: 2px;
	height: 44px;
	background: var(--wp--preset--color--white);
}

.spd-pin::before {
	top: calc(100% + 34px);
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	border: 4px solid var(--wp--preset--color--primary-20-darker);
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* building positions as % of the photo (from the art notes); the dot sits 44px below the card */
.spd-pin--office { left: 20%; top: calc(36% - 44px); }
.spd-pin--retail { left: 21%; top: calc(64% - 44px); }
.spd-pin--warehouse { left: 49%; top: calc(26% - 44px); }
.spd-pin--medical { left: 79%; top: calc(62% - 44px); }
.spd-pin--apartments { left: 86%; top: calc(24% - 44px); }

/* office card copy per step; with no step set, the last line shows */
.spd-pin__t1,
.spd-pin__t2 { display: none; }
[data-step="1"] .spd-pin__t1,
[data-step="2"] .spd-pin__t2 { display: block; }
[data-step="1"] .spd-pin__t3,
[data-step="2"] .spd-pin__t3 { display: none; }

[data-step] .spd-pin:not(.spd-pin--office) { opacity: 0; transform: translate(-50%, calc(-100% + 8px)); }
[data-step="4"] .spd-pin:not(.spd-pin--office) { opacity: 1; transform: translate(-50%, -100%); }

.spd-step { border-top: 4px solid var(--wp--preset--color--primary-20-lighter); }
.spd-step + .spd-step { border-left: 1px solid var(--wp--preset--color--primary-20-lighter); }
[data-step] .spd-step { cursor: pointer; }
.spd-step[aria-selected="true"] { border-top-color: var(--wp--preset--color--white); }

@media (max-width: 781px) {
	.spd-pin { padding: 0; box-shadow: none; }
	.spd-pin > * { display: none; }
	.spd-pin::after { height: 14px; }
	.spd-pin::before { top: calc(100% + 4px); }
	.spd-step + .spd-step { border-left: 0; }
}