/* MAPA DA FREGUESIA — v0.20 */
.map-page {
  background: #f4fbff;
}

.map-page h1,
.map-page h2,
.map-page h3 {
  font-family: "Montserrat", sans-serif;
}

.map-hero {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(4,46,75,.88), rgba(4,46,75,.38)),
    var(--map-hero-image, url("../../img/geral/hero/rio_mira2.JPG")) center 48% / cover no-repeat;
}

.map-hero-inner {
  display: flex;
  align-items: center;
  min-height: 285px;
  padding-top: 25px;
  padding-bottom: 76px;
}

.map-hero h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(2.7rem, 4.5vw, 4.2rem);
  font-weight: 800;
}

.map-hero p {
  margin: 0;
  color: #fff;
  font-size: clamp(1.08rem, 1.6vw, 1.4rem);
}

.map-waves {
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(60px, 7vw, 100px);
  pointer-events: none;
}

.map-waves svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-wave-blue { fill: rgba(58,171,221,.84); }
.map-wave-green { fill: rgba(35,151,73,.96); }
.map-wave-white { fill: #f4fbff; }

.map-content {
  padding: 28px 0 72px;
  background: #f4fbff;
}

.map-container {
  width: 100%;
  max-width: 1500px;
  margin-inline: auto;
  padding-inline: clamp(24px, 2.1vw, 34px);
}

.map-layout {
  display: grid;
  grid-template-columns: minmax(380px, 448px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.localities {
  display: flex;
  flex-direction: column;
  min-height: 640px;
  padding: 29px 28px 28px;
  border: 0;
  border-radius: 10px;
  background: #e7f3ff;
  box-shadow: none;
}

.localities h2 {
  margin: 0 0 4px;
  color: #17345d;
  font-size: clamp(2rem, 2.45vw, 2.55rem);
  font-weight: 800;
  line-height: 1.08;
}

.localities > p {
  margin: 0;
  color: #526c8a;
  font-size: 1rem;
  line-height: 1.45;
}

.locality-list {
  display: grid;
  gap: 7px;
  margin: 14px 0 15px;
  padding: 0;
  list-style: none;
}

.locality-list li {
  margin: 0;
}

.locality-button {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 48px;
  padding: 8px 16px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #19395f;
  font-family: "Montserrat", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.locality-button:hover,
.locality-button:focus-visible,
.locality-button[aria-pressed="true"] {
  background: #f8fcff;
  color: #0e6396;
  transform: translateX(2px);
  outline: none;
}

.locality-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(23,109,168,.18);
}

.locality-button .locality-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.locality-button span {
  min-width: 0;
}

.map-open-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 51px;
  margin-top: auto;
  padding: 11px 18px;
  border-radius: 9px;
  background: #0d4f8d;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .92rem;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition:
    background-color .18s ease,
    transform .18s ease;
}

.map-open-link:hover,
.map-open-link:focus-visible {
  background: #0a4277;
  color: #fff;
  transform: translateY(-1px);
  outline: none;
}

.map-open-link:focus-visible {
  box-shadow: 0 0 0 3px rgba(23,109,168,.22);
}

.map-location-panel {
  position: relative;
  min-height: 640px;
  overflow: hidden;
  border: 2px solid #abd7f1;
  border-radius: 9px;
  background: #eaf4f8;
  box-shadow: none;
}

#parishMap,
#parishMapFrame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 640px;
  border: 0;
}

#parishMap {
  visibility: hidden;
}

.map-location-panel .maplibregl-map {
  font-family: inherit;
}

.map-location-panel .maplibregl-ctrl-top-left {
  top: 9px;
  left: 9px;
}

.map-location-panel .maplibregl-ctrl-group {
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0,0,0,.24);
}

.map-location-panel .maplibregl-ctrl-attrib {
  font-size: 12px;
}

.map-fallback,
.boundary-load-warning {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 9px 12px;
  border-radius: 7px;
  background: rgba(255,255,255,.96);
  color: #183b5a;
  box-shadow: 0 3px 12px rgba(0,0,0,.13);
}

.map-fallback {
  inset: auto 16px 16px;
}

.boundary-load-warning {
  top: 12px;
  right: 12px;
}

@media (max-width: 1050px) {
  .map-layout {
    grid-template-columns: minmax(315px, 390px) minmax(0, 1fr);
  }

  .localities,
  .map-location-panel,
  #parishMap,
  #parishMapFrame {
    min-height: 580px;
  }

  .locality-button {
    gap: 12px;
    padding-inline: 13px;
  }
}

@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;
  }

  .localities {
    min-height: auto;
  }

  .locality-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-open-link {
    margin-top: 0;
  }

  .map-location-panel,
  #parishMap,
  #parishMapFrame {
    min-height: 520px;
  }
}

@media (max-width: 560px) {
  .map-content {
    padding-top: 18px;
  }

  .map-container {
    padding-inline: 14px;
  }

  .localities {
    padding: 21px 18px 18px;
  }

  .localities h2 {
    font-size: 2rem;
  }

  .locality-list {
    grid-template-columns: 1fr;
  }

  .map-location-panel,
  #parishMap,
  #parishMapFrame {
    min-height: 430px;
  }
}