/* Noutoalueen kartta (lib/kartta.js, js/kartta.js) */
.mc-kartta {
  padding: 80px 30px 0;
}

.mc-kartta .container-18 {
  grid-column-gap: 48px;
  grid-row-gap: 32px;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  max-width: 1200px;
  display: grid;
}

.mc-kartta__merkki {
  color: #111;
  background: var(--primary);
  border-radius: 999px;
  margin: 0 0 14px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  display: inline-block;
}

.mc-kartta__otsikko {
  color: #fff;
  margin: 0 0 14px;
  font-family: Cabinetgrotesk, sans-serif;
  font-size: 40px;
  line-height: 1.1;
}

.mc-kartta__kuvaus {
  color: #ffffffcc;
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.6;
}

.mc-kartta__kaupungit {
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
}

.mc-kartta__kaupungit li {
  color: #fff;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 600;
}

.mc-kartta__kaupungit li span {
  color: #ffffff80;
  font-weight: 400;
}

.mc-kartta__tila {
  color: #fff;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}

.mc-kartta__tila-piste {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 60%, transparent);
  animation: mc-k-pulssi 1.6s ease-out infinite;
}

.mc-kartta__kuva {
  background: radial-gradient(90% 90% at 50% 50%, #1f1f1f 0%, #131313 100%);
  border: 1px solid #ffffff1a;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px #000;
}

.mc-kartta__svg {
  width: 100%;
  height: auto;
  display: block;
}

.mc-k-ruudukko line { stroke: #ffffff08; stroke-width: .15; }
.mc-k-jarvet ellipse { fill: #3a4a55; opacity: .35; }
.mc-k-alue { fill: none; stroke: var(--primary); stroke-width: .35; stroke-dasharray: 1.2 1; opacity: .7; }
.mc-k-sade { fill: var(--primary); font-size: 2.4px; font-weight: 700; text-anchor: middle; font-family: Inter, sans-serif; }
.mc-k-tiet polyline { fill: none; stroke: #ffffff2e; stroke-width: .55; stroke-linecap: round; stroke-linejoin: round; }
.mc-k-kaupunki circle { fill: #ffffffb3; }
.mc-k-kaupunki text:not([text-anchor]) { text-anchor: middle; }
.mc-k-kaupunki text { fill: #ffffffb3; font-size: 2.3px; font-family: Inter, sans-serif; font-weight: 600; transition: fill .3s; }
.mc-k-kaupunki.on circle { fill: var(--primary); }
.mc-k-kaupunki.on text { fill: var(--primary); }
.mc-k-koti circle { fill: var(--primary); }
.mc-k-koti text { fill: #fff; font-size: 2.2px; font-family: Inter, sans-serif; font-weight: 700; }
.mc-k-koti__pulssi { fill: var(--primary); opacity: .25; transform-origin: 0 0; animation: mc-k-koti 2.2s ease-out infinite; }
.mc-k-asiakas circle { fill: #111; stroke: #fff; stroke-width: .35; }
.mc-k-asiakas path { fill: #fff; }
.mc-k-asiakas.valmis circle { stroke: #6fdc97; fill: #16301f; }
.mc-k-asiakas.valmis path { fill: #6fdc97; }
.mc-k-auto image { filter: drop-shadow(0 .4px .6px #000); }
.mc-k-kiilto path { fill: #fff6d1; }
.mc-k-kiilto.pyorii path { transform-box: fill-box; transform-origin: center; animation: mc-k-kiilto 1.6s ease-in-out; }

@keyframes mc-k-pulssi { 70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 0%, transparent); } }
@keyframes mc-k-koti { from { scale: .6; opacity: .45; } to { scale: 2.6; opacity: 0; } }
@keyframes mc-k-kiilto { 0% { scale: .2; rotate: 0deg; } 50% { scale: 1.3; rotate: 90deg; } 100% { scale: .2; rotate: 180deg; } }

@media screen and (max-width: 991px) {
  .mc-kartta .container-18 { grid-template-columns: 1fr; }
}

@media screen and (max-width: 479px) {
  .mc-kartta { padding: 56px 15px 0; }
  .mc-kartta__otsikko { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-kartta__tila-piste, .mc-k-koti__pulssi { animation: none; }
}