/*
 * Locations page (templates/page-locations.php). Page-only, enqueued from
 * functions.php on is_page( 'locations' ); everything else on the page reuses
 * the bundled local-page and markets-rail components.
 */

/* Ten states would make the single-column local list taller than the copy
   beside it; two compact columns keep the intro grid balanced. */
.local-city-list--states {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 28px;
	border-top: 0;
}

.local-city-list--states li {
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
}

.locations-region + .locations-region {
	margin-top: clamp(36px, 4vw, 56px);
}

.locations-region__title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	font: 700 clamp(1.35rem, 2vw, 1.8rem) / 1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
}

.locations-region__title small {
	font: 700 .7rem var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.locations-region .markets-grid {
	margin-top: 20px;
}

.locations-projects .local-city-list a {
	color: inherit;
}

.locations-projects .local-city-list a:hover,
.locations-projects .local-city-list a:focus-visible {
	color: var(--sun-violet-text, var(--color-violet-text));
}

@media (max-width: 460px) {
	.local-city-list--states {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------ stats strip */
.locations-stats {
	border-block: 1px solid var(--line);
	background: var(--graphite);
}

.locations-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
}

.locations-stats__grid > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 8px;
	padding: clamp(22px, 2.6vw, 36px) clamp(14px, 2vw, 28px);
	border-left: 1px solid var(--line);
}

.locations-stats__grid > div:first-child {
	border-left: 0;
	padding-left: 0;
}

.locations-stats dt {
	font: 700 .7rem var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.locations-stats dd {
	margin: 0;
	font: 700 clamp(2.4rem, 4.6vw, 4.2rem) / .95 var(--display);
	letter-spacing: -.03em;
	color: var(--color-white);
}

.locations-stats dd small {
	margin-left: .35em;
	font: 700 .72rem var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-orange);
}

/* ---------------------------------------------------------------- LED map */
.locations-map {
	background: var(--color-void, #05070a);
}

.us-led-map {
	margin: clamp(28px, 4vw, 52px) 0 0;
	padding: clamp(12px, 2.6vw, 40px);
	background-color: #07090c;
	background-image:
		radial-gradient(circle at 30% 50%, rgba(255, 64, 64, .07) .55px, transparent .95px),
		radial-gradient(circle at 50% 50%, rgba(64, 255, 120, .06) .55px, transparent .95px),
		radial-gradient(circle at 70% 50%, rgba(72, 132, 255, .08) .55px, transparent .95px);
	background-size: 6px 6px;
	border: 1px solid #2a333c;
	border-radius: 6px;
	box-shadow: inset 0 0 70px #000, 0 30px 80px -40px rgba(0, 0, 0, .9);
}

.us-led-map__panel {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.us-led-map__dots {
	fill: none;
	stroke: #26313e;
	stroke-linecap: round;
}

/* Pins: a lit LED (core, specular dot, crisp ring, soft halo). */
.us-led-map__pin,
.us-led-map__tag {
	transition: opacity .2s ease;
}

.us-led-map__halo {
	fill: currentColor;
	opacity: .14;
}

.us-led-map__ring {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	opacity: .9;
}

.us-led-map__ring--outer {
	stroke-width: 1;
	opacity: .4;
}

.us-led-map__core {
	fill: currentColor;
	filter: drop-shadow(0 0 3px currentColor);
}

.us-led-map__spec {
	fill: #fff;
	opacity: .85;
}

.us-led-map__pin--growth .us-led-map__ring {
	stroke-width: 1.3;
	stroke-dasharray: 2.4 2.4;
}

.us-led-map__pulse {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: us-led-pulse 3.2s ease-out infinite;
	animation-delay: var(--pin-delay, 0s);
}

@keyframes us-led-pulse {
	0% { opacity: .7; transform: scale(.8); }
	70%, 100% { opacity: 0; transform: scale(2.4); }
}

/* Name chips: small lit sign faces joined to the pin by an elbow leader. */
.us-led-map__leader {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	opacity: .55;
}

.us-led-map__leader-end {
	fill: currentColor;
	opacity: .8;
}

.us-led-map__chip {
	fill: #0c1118;
	stroke: currentColor;
	stroke-width: 1;
	stroke-opacity: .6;
}

.us-led-map__label {
	fill: #eef1f4;
	font: 700 11.5px var(--mono);
	letter-spacing: .06em;
}

.us-led-map__tag--hub .us-led-map__chip {
	fill: #f98128;
	stroke-opacity: 1;
}

.us-led-map__tag--hub .us-led-map__label {
	fill: #160a00;
}

.us-led-map__tag--growth .us-led-map__chip {
	fill: rgba(12, 17, 24, .7);
	stroke-dasharray: 3 3;
}

.us-led-map__tag--growth .us-led-map__label {
	fill: #aab3bd;
}

/* Directory hover/focus lights one market and dims the rest. */
.us-led-map.has-active .us-led-map__pin:not(.is-active),
.us-led-map.has-active .us-led-map__tag:not(.is-active) {
	opacity: .2;
}

.us-led-map__pin.is-active .us-led-map__halo {
	opacity: .32;
}

.us-led-map__tag.is-active .us-led-map__chip {
	stroke-opacity: 1;
}

.us-led-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin-top: clamp(14px, 2vw, 24px);
	font: 700 .68rem var(--mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.us-led-map__legend span {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.us-led-map__key {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.us-led-map__key--hub {
	background: #f98128;
	box-shadow: 0 0 8px #f98128;
}

.us-led-map__key--market {
	background: conic-gradient(#ff3b30, #ff4fd8, #b48cff, #58aaff, #2ee6d6, #4cd964, #ffe14a, #ff3b30);
	box-shadow: 0 0 8px rgba(88, 170, 255, .6);
}

.us-led-map__key--growth {
	border: 1.5px dashed #c9d1da;
}

.us-led-map__key--panel {
	background: #26313e;
}

.locations-projects__hubs {
	margin: 28px 0 0;
	color: var(--muted);
}

@media (max-width: 760px) {
	.locations-stats__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.locations-stats__grid > div:nth-child(3) {
		border-left: 0;
		padding-left: 0;
	}

	.locations-stats__grid > div:nth-child(n + 3) {
		border-top: 1px solid var(--line);
	}

	.us-led-map {
		padding: 8px 4px;
	}

	.us-led-map__legend {
		padding: 0 8px 6px;
	}

	/* Below this the chips would be under 8px; the directory names them. */
	.us-led-map__tags {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.us-led-map__pulse {
		animation: none;
	}
}