.map {
  width: 100%;
  min-width: 0;
}

.map-title {
  margin: 0 0 24px;
  color: var(--blue);
  font-size: clamp(54px, 7vw, 82px);
  line-height: 0.95;
  letter-spacing: 0;
  font-weight: var(--font-heavy);
}

.zone {
  cursor: pointer;
  outline: none;
}

.shape {
  stroke: rgba(0, 0, 0, 0.72);
  stroke-width: 3;
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.16));
}

.zone:hover .shape,
.zone:focus-visible .shape,
.zone.active .shape {
  transform: translate(-5px, -5px);
  filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.24));
}

.zone:focus-visible .shape {
  stroke: #000;
  stroke-width: 5;
}

.programme-divider {
  stroke: var(--blue);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 10 8;
}

.programme-group-shape {
  stroke: var(--blue);
  stroke-width: 3;
  filter: drop-shadow(4px 4px 0 rgba(66, 133, 244, 0.32));
}

.programme-group-zone:hover .programme-group-shape,
.programme-group-zone:focus-visible .programme-group-shape {
  filter: drop-shadow(7px 7px 0 rgba(66, 133, 244, 0.42));
}

.map text {
  pointer-events: none;
  fill: #000;
  font-weight: var(--font-heavy);
  text-anchor: middle;
  dominant-baseline: middle;
}

.white {
  fill: #fff !important;
}

.label-xl {
  font-size: 54px;
}

.label-lg {
  font-size: 45px;
}

.label-md {
  font-size: 37px;
}

.label-sm {
  fill: var(--blue);
  font-size: 23px;
  font-weight: var(--font-medium);
}

.white.label-sm {
  fill: #fff !important;
}

.vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.legend button {
  border: 2px solid #000;
  background: var(--paper);
  box-shadow: 4px 4px 0 #000;
  padding: 9px 12px;
  font-weight: var(--font-medium);
  cursor: pointer;
}

.legend button:hover,
.legend button:focus-visible {
  outline: none;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.dot {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  border: 2px solid #000;
  vertical-align: -1px;
}

@media (max-width: 1000px) {
  .map-wrap {
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .map-wrap {
    width: 100%;
  }

  .map-title {
    margin-bottom: 8px;
  }

  .map {
    width: 100%;
    max-height: 60svh;
  }

  .legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .legend button {
    min-height: 52px;
    padding: 10px 12px;
    font-size: 16px;
    box-shadow: 4px 4px 0 #000;
    text-align: center;
  }

  .legend button:last-child {
    grid-column: 1 / -1;
  }

  .dot {
    width: 15px;
    height: 15px;
    margin-right: 7px;
  }
}