/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
/* Hallmark · genre: atmospheric · macrostructure: Constellation / Diagram · theme: Iconic Constellation · enrichment: Tier-B vector cartography · contrast: pass (40–41) · mobile: pass (34, 49, 50–57) */

html,
body { overflow-x: clip; }

.project-map-section {
  position: relative;
  min-width: 0;
  margin-block-start: 0;
  padding-block-start: 0;
  color: var(--color-paper);
  background: var(--color-paper-2);
  overflow: clip;
}

.project-map-intro {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: clamp(var(--space-xl), 6vw, var(--space-3xl)) 7vw;
  color: var(--color-ink);
  background: var(--color-paper-2);
}

.project-map-intro h2 {
  max-width: 16ch;
  margin: 0;
  font: 400 var(--text-display-map) / .98 var(--font-display);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.project-map-intro p {
  max-width: 72ch;
  margin: var(--space-lg) 0 0;
  color: var(--color-ink-soft);
  font: 300 var(--text-md) / 1.6 var(--font-body);
}

.project-map-archive {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 44px;
  margin-inline-start: var(--space-xs);
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-hairline) solid var(--color-accent);
  color: var(--color-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}

.project-map-archive:hover { color: var(--color-accent); }
.project-map-archive:active { color: var(--color-ink-soft); }
.project-map-archive:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-xs); }

.project-map-viewport {
  position: relative;
  width: 100%;
  height: clamp(46rem, 88svh, 61rem);
  overflow: hidden;
  background: var(--color-map-water);
  cursor: grab;
  touch-action: none;
}

.project-map-viewport.is-dragging { cursor: grabbing; }
.project-map-viewport:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.project-map-viewport svg { display: block; width: 100%; height: 100%; }
.project-map-camera { transform-origin: 0 0; }
.project-map-water { fill: var(--color-map-water); }
.project-map-country { fill: var(--color-map-land-1); stroke: var(--color-map-border); stroke-width: .52; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.project-map-country.tone-2, .project-map-country.tone-5 { fill: var(--color-map-land-2); }
.project-map-country.tone-3, .project-map-country.tone-6 { fill: var(--color-map-land-3); }
.project-map-country:is([data-iso="ITA"], [data-iso="AUT"], [data-iso="FRA"], [data-iso="DEU"], [data-iso="NLD"], [data-iso="BEL"], [data-iso="LUX"], [data-iso="GRC"], [data-iso="CYP"], [data-iso="ISR"]) { fill: var(--color-map-worked); }
.project-map-connections { pointer-events: none; }
.project-map-connection { fill: none; stroke: var(--color-map-connection); stroke-width: .82; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.project-map-region { fill: none; stroke: var(--color-map-border-soft); stroke-width: .34; stroke-linejoin: round; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity var(--dur-long) var(--ease-out); }
.project-map-viewport.is-detailed .project-map-region { opacity: .62; }
.project-map-province { fill: none; stroke: var(--color-map-border-soft); stroke-width: .25; stroke-linejoin: round; opacity: 0; vector-effect: non-scaling-stroke; transition: opacity var(--dur-long) var(--ease-out); }
.project-map-viewport.is-provincial .project-map-province { opacity: .45; }

.project-map-marker { color: var(--color-paper); text-decoration: none; outline: none; }
.project-map-marker .marker-halo { fill: var(--color-map-glow); stroke: var(--color-map-connection); stroke-width: .7; opacity: .78; vector-effect: non-scaling-stroke; }
.project-map-marker .marker-dot { fill: var(--color-map-marker); stroke: var(--color-map-water); stroke-width: 2.2; vector-effect: non-scaling-stroke; transition: fill var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.project-map-marker:hover .marker-dot,
.project-map-marker:focus-visible .marker-dot { fill: var(--color-paper); transform: scale(1.35); }
.project-map-marker:active .marker-dot { fill: var(--color-focus); }
.project-map-marker:focus-visible .marker-halo { stroke: var(--color-focus); stroke-width: 3; opacity: 1; }

.project-map-controls {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: var(--space-xl);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 48px) minmax(9rem, 13rem) 48px;
  border: var(--rule-hairline) solid var(--color-ink-border);
  background: var(--color-ink-overlay);
  transform: translateX(-50%);
}

.project-map-controls button {
  width: 48px;
  height: 48px;
  border: 0;
  border-inline-end: var(--rule-hairline) solid var(--color-rule);
  color: var(--color-paper);
  background: var(--color-ink-overlay);
  font: 400 var(--text-lg) / 1 var(--font-body);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out), background var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.project-map-controls button:last-child { border-inline-end: 0; }
.project-map-controls button:hover { color: var(--color-ink); background: var(--color-map-marker); }
.project-map-controls button:active { transform: scale(.96); }
.project-map-controls button:focus-visible { position: relative; outline: 3px solid var(--color-focus); outline-offset: -3px; }
.project-map-controls button:disabled { color: var(--color-rule); opacity: .55; cursor: not-allowed; }

.project-map-zoom {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-inline: var(--space-md);
  border-inline-end: var(--rule-hairline) solid var(--color-rule);
}

.project-map-zoom input {
  width: 100%;
  margin: 0;
  accent-color: var(--color-map-marker);
  cursor: pointer;
}

.project-map-zoom input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: var(--space-xs); }
.project-map-zoom input:disabled { opacity: .55; cursor: not-allowed; }

.project-map-tooltip {
  position: absolute;
  z-index: 30;
  min-width: 13rem;
  max-width: min(23rem, calc(100% - 2 * var(--space-md)));
  padding: var(--space-md) var(--space-lg);
  color: var(--color-paper);
  background: var(--color-ink);
  border-block-start: 2px solid var(--color-accent);
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - var(--space-md)));
  opacity: 0;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.project-map-tooltip.is-visible { opacity: 1; }
.project-map-tooltip strong { display: block; font: 400 var(--text-lg) / 1.1 var(--font-display); }
.project-map-tooltip span { display: block; margin-block-start: var(--space-xs); color: var(--color-paper-faint); font: 400 var(--text-sm) / 1.3 var(--font-body); }

.project-map-credit {
  position: absolute;
  z-index: 15;
  inset-inline-start: clamp(var(--space-md), 3vw, var(--space-xl));
  color: var(--color-paper-faint);
  background: var(--color-ink-overlay);
  font: 500 var(--text-xs) / 1.25 var(--font-body);
}
.project-map-credit { inset-block-end: var(--space-md); padding: var(--space-xs) var(--space-sm); }
.project-map-loading { position: absolute; inset: 50% auto auto 50%; z-index: 2; margin: 0; color: var(--color-ink-soft); font: 500 var(--text-sm) var(--font-body); transform: translate(-50%, -50%); }

@media (max-width: 47.99rem) {
  .project-map-section { margin-block-start: 0; padding-block-start: 0; }
  .project-map-intro { width: 100%; padding: var(--space-xl) var(--space-md); }
  .project-map-intro h2 { max-width: 15ch; font-size: clamp(2.25rem, 10vw, 3.4rem); }
  .project-map-intro p { margin-block-start: var(--space-md); }
  .project-map-archive { margin-inline-start: 0; margin-block-start: var(--space-sm); }
  .project-map-viewport { height: 48rem; min-height: 100svh; }
  .project-map-controls { inset-block-end: var(--space-3xl); grid-template-columns: repeat(4, 40px) minmax(6rem, 1fr) 44px; width: calc(100% - 2 * var(--space-md)); max-width: 22rem; }
  .project-map-controls button { width: 44px; }
  .project-map-controls button[data-project-map-pan] { width: 40px; }
  .project-map-zoom { padding-inline: var(--space-sm); }
  .project-map-tooltip { min-width: 11rem; }
}

@media (hover: none), (pointer: coarse) {
  .project-map-controls button { width: 44px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-map-region,
  .project-map-marker .marker-dot,
  .project-map-tooltip,
  .project-map-archive,
  .project-map-controls button { transition-duration: 150ms; }
}