/* MAPPA – layout assoluto pixel-perfect (XD 1920×1073) */

.page--mappa {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

.mappa-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  --mappa-nav-gap: 24px;
  margin-top: calc(-1 * var(--nav-height) + var(--mappa-nav-gap));
}

.mappa-canvas__inner {
  --mappa-canvas-height: 1073px;
  --mappa-map-x: 661px;
  --mappa-map-y: 231.762px;
  --mappa-map-w: 580.556px;
  --mappa-map-h: 687.969px;

  position: relative;
  width: var(--page-width);
  height: var(--mappa-canvas-height);
  margin-inline: auto;
}

.mappa-watermark {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}

.mappa-watermark__graphic {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  object-position: center;
}

.mappa-map-wrap {
  position: absolute;
  left: var(--mappa-map-x);
  top: var(--mappa-map-y);
  width: var(--mappa-map-w);
  height: var(--mappa-map-h);
  z-index: 1;
}

.mappa-map-wrap:has(.mappa-pin__card:hover) .mappa-map,
.mappa-map-wrap:has(.mappa-pin__card:focus-within) .mappa-map,
.mappa-map-wrap:has(.mappa-pin.is-active) .mappa-map {
  opacity: 0.35;
}

.mappa-map {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

.mappa-pin {
  --mappa-pin-card-w: 186px;
  --mappa-pin-card-h: 103px;
  --mappa-pin-marker: 10px;

  position: absolute;
  width: var(--mappa-pin-marker);
  height: var(--mappa-pin-marker);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.mappa-pin:has(.mappa-pin__card:hover),
.mappa-pin:has(.mappa-pin__card:focus-within),
.mappa-pin.is-active {
  z-index: 5;
}

.mappa-pin__card {
  --mappa-pin-expand-ms: 500ms;
  --mappa-pin-text-delay: 420ms;

  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--mappa-pin-marker);
  height: var(--mappa-pin-marker);
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  pointer-events: auto;
}

/* Box nero: scala dall'angolo TL (come XD), indipendente dal testo */
.mappa-pin__card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--mappa-pin-card-w);
  min-height: var(--mappa-pin-card-h);
  height: 100%;
  background: var(--black);
  transform-origin: top left;
  transform: scale(
    calc(var(--mappa-pin-marker) / var(--mappa-pin-card-w)),
    calc(var(--mappa-pin-marker) / var(--mappa-pin-card-h))
  );
  transition: transform var(--mappa-pin-expand-ms) cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.mappa-pin__card:hover,
.mappa-pin__card:focus-within,
.mappa-pin.is-active .mappa-pin__card {
  width: var(--mappa-pin-card-w);
  min-height: var(--mappa-pin-card-h);
  height: auto;
  padding: 10px;
  overflow: visible;
}

.mappa-pin__card:hover::before,
.mappa-pin__card:focus-within::before,
.mappa-pin.is-active .mappa-pin__card::before {
  transform: scale(1);
}

.mappa-pin__title,
.mappa-pin__address,
.mappa-pin__cta {
  margin: 0;
  position: relative;
  z-index: 1;
  opacity: 0;
  /* In chiusura: testo sparisce subito */
  transition: opacity 0.12s ease-out;
}

.mappa-pin__card:hover .mappa-pin__title,
.mappa-pin__card:hover .mappa-pin__address,
.mappa-pin__card:hover .mappa-pin__cta,
.mappa-pin__card:focus-within .mappa-pin__title,
.mappa-pin__card:focus-within .mappa-pin__address,
.mappa-pin__card:focus-within .mappa-pin__cta,
.mappa-pin.is-active .mappa-pin__title,
.mappa-pin.is-active .mappa-pin__address,
.mappa-pin.is-active .mappa-pin__cta {
  opacity: 1;
  /* Dopo l'espansione: testo già nella posizione finale */
  transition: opacity 0.2s ease-in var(--mappa-pin-text-delay);
}

.mappa-pin__title {
  font-size: 20px;
  font-weight: 700;
  font-variation-settings: 'wght' 700;
  line-height: 22px;
  letter-spacing: 0;
}

.mappa-pin__address {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  line-height: 22px;
  letter-spacing: 0;
}

.mappa-pin__cta {
  display: inline-block;
  margin-top: auto;
  padding-top: 6px;
  font-size: 16px;
  font-weight: 500;
  font-variation-settings: 'wght' 500;
  line-height: 22px;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
}

.mappa-pin__cta:hover,
.mappa-pin__cta:focus-visible {
  text-decoration: underline;
  outline: none;
}

.mappa-pin--1,
.mappa-pin--2,
.mappa-pin--3,
.mappa-pin--4 {
  /* Posizione da CMS (style inline) */
}

/* Legacy fallback se mancano coordinate */
.mappa-pin--1:not([style*="left"]) { left: 51.45%; top: 54.09%; }
.mappa-pin--2:not([style*="left"]) { left: 41.11%; top: 30.55%; }
.mappa-pin--3:not([style*="left"]) { left: 52.31%; top: 67.61%; }
.mappa-pin--4:not([style*="left"]) { left: 22%; top: 79.82%; }

/* ── Desktop 900–1919: canvas scala come home ── */
@media (min-width: 900px) and (max-width: 1919px) {
  .mappa-canvas {
    position: relative;
    overflow: visible;
    height: calc(var(--mappa-canvas-height) * var(--canvas-scale-down));
  }

  .mappa-canvas__inner {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(var(--canvas-scale-down));
    transform-origin: top left;
  }
}

/* ── Desktop ≥1920 ── */
@media (min-width: 1920px) {
  .mappa-canvas {
    margin-top: calc(-1 * var(--nav-height) * var(--stage-scale) + var(--mappa-nav-gap));
    position: relative;
    overflow: visible;
    height: calc(var(--mappa-canvas-height) * var(--stage-scale));
  }

  .mappa-canvas__inner {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) scale(var(--stage-scale));
    transform-origin: top center;
  }
}

/* ── Mobile / tablet stretti ── */
@media (max-width: 899px) {
  html:has(.page--mappa),
  body:has(.page--mappa),
  .page--mappa,
  .page--mappa .mappa-canvas {
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  .mappa-canvas {
    margin-top: 0;
    max-width: 100%;
  }

  .mappa-canvas__inner {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: clamp(24px, 5vw, 40px) var(--gutter) 64px;
    box-sizing: border-box;
  }

  .mappa-watermark {
    display: none;
  }

  .mappa-watermark__graphic {
    display: none;
  }

  .mappa-map-wrap {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 581px;
    height: auto;
    aspect-ratio: 580.556 / 687.969;
    margin-inline: auto;
    overflow: visible;
  }

  .mappa-pin {
    --mappa-pin-marker: 10px;
    --mappa-pin-card-w: min(186px, calc(100vw - 48px));
    --mappa-pin-card-h: 103px;
    min-height: var(--mappa-pin-marker);
  }

  .mappa-pin.is-card-left .mappa-pin__card {
    left: auto;
    right: 0;
  }

  .mappa-pin.is-card-left .mappa-pin__card::before {
    left: auto;
    right: 0;
    transform-origin: top right;
  }

  .mappa-pin.is-card-up .mappa-pin__card {
    top: auto;
    bottom: 0;
  }

  .mappa-pin.is-card-up .mappa-pin__card::before {
    top: auto;
    bottom: 0;
    transform-origin: bottom left;
  }

  .mappa-pin.is-card-left.is-card-up .mappa-pin__card::before {
    transform-origin: bottom right;
  }

  .mappa-pin--1:not([style*="left"]) {
    left: 51.45%;
    top: 54.09%;
  }

  .mappa-pin--2:not([style*="left"]) {
    left: 41.11%;
    top: 30.55%;
  }

  .mappa-pin--3:not([style*="left"]) {
    left: 52.31%;
    top: 67.61%;
  }

  .mappa-pin--4:not([style*="left"]) {
    left: 22%;
    top: 79.82%;
  }
}