/* ==========================================================================
   Maqueta · Ilustre Municipalidad de Pica
   explorer.css — explorador: números sobre una imagen (escudo, mapa)
   conectados con tarjetas. Lo maneja explorer.js. Usa las variables de commune.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Explorador: números sobre una imagen conectados con sus tarjetas
   -------------------------------------------------------------------------- */
.explorer {
  padding: 3.5rem 0 4.5rem;
  border-top: 1px solid var(--pm-line);
  background: linear-gradient(180deg, var(--pm-navy-900) 0%, var(--pm-navy-850) 100%);
}

.explorer__head {
  max-width: 640px;
  margin-bottom: 2rem;
}

.explorer__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* El escudo queda a la vista mientras se recorren las tarjetas */
.explorer__map {
  position: sticky;
  top: calc(var(--commune-sticky-top) + 1.5rem);
}

.explorer-map {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}

.explorer-map img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(3, 12, 28, .5));
  transition: filter .3s ease;
  user-select: none;
}

.explorer-map.has-active img {
  filter: drop-shadow(0 16px 26px rgba(3, 12, 28, .5)) saturate(.55) brightness(.8);
}

.explorer-marker {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--pm-navy-900);
  border-radius: 50%;
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
  font-family: var(--pm-font-condensed);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(247, 209, 56, .35), var(--pm-shadow-sm);
  translate: -50% -50%;
  transition: scale .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.explorer-marker:hover,
.explorer-marker:focus-visible,
.explorer-marker.is-active {
  z-index: 2;
  background: #fff;
  color: var(--pm-navy-900);
  scale: 1.3;
  box-shadow: 0 0 0 4px var(--pm-gold-500), 0 0 22px rgba(247, 209, 56, .75);
}

.explorer-marker:focus-visible {
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .explorer-marker.is-active::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid var(--pm-gold-500);
    border-radius: 50%;
    animation: explorer-ping 1.4s ease-out infinite;
  }
}

@keyframes explorer-ping {
  0% {
    opacity: .9;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1.9;
  }
}

.explorer-items {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explorer-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 3px solid var(--pm-blue-500);
  border-radius: 16px;
  background: var(--pm-navy-850);
  scroll-margin-top: calc(var(--commune-sticky-top) + 1rem);
  transition: border-color .25s ease, background-color .25s ease, translate .25s ease, box-shadow .25s ease;
}

.explorer-item:focus {
  outline: none;
}

.explorer-item.is-active {
  border-color: var(--pm-gold-500);
  background: linear-gradient(90deg, rgba(247, 209, 56, .12) 0%, var(--pm-navy-850) 60%);
  box-shadow: var(--pm-shadow);
  translate: 6px 0;
}

.explorer-item__number {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pm-gold-500);
  color: var(--pm-navy-900);
  font-family: var(--pm-font-condensed);
  font-weight: 700;
}

.explorer-item__title {
  margin-bottom: .3rem;
  color: var(--pm-gold-400);
  font-size: 1.05rem;
  font-weight: 700;
}

.explorer-item__title i {
  margin-right: .35rem;
  color: var(--pm-blue-400);
}

.explorer-item__text {
  margin: 0;
  color: var(--pm-text);
  font-size: .92rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Tablet y celular: la imagen queda fija arriba, compacta, sobre las tarjetas
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .explorer__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .explorer__map {
    top: var(--commune-sticky-top);
    z-index: 3;
    margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
    padding: .75rem 0;
    border-bottom: 1px solid var(--commune-line);
    background: rgba(8, 33, 66, .94);
    backdrop-filter: blur(8px);
  }

  .explorer-map {
    width: min(64%, 260px);
  }
}

@media (max-width: 575.98px) {
  .explorer-marker {
    width: 22px;
    height: 22px;
    border-width: 1.5px;
    font-size: .72rem;
  }

  .explorer-item {
    padding: .9rem;
  }

  .explorer-item.is-active {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorer-marker,
  .explorer-item,
  .explorer-map img {
    transition: none;
  }
}