/*
 * Estilos del plugin "Mapa Interactivo de Euskadi"
 * Autor: Inigo Lopez Menendez
 */

:root{
  --emi-color-primary:#e60026; /* Rojo del pin */
  --emi-color-bg:#ffffff;
  --emi-color-text:#222;
  --emi-shadow:0 10px 25px rgba(0,0,0,.18);
}

/* Contenedor del mapa */
.emi-map-container{
  position:relative;
  width:100%;
  max-width:900px;
  margin-inline:auto;
  user-select:none;
}

/* Imagen del mapa */
.emi-map{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
}

/* Puntos clicables */
.emi-point{
  position:absolute;
  z-index:2;
  transform:translate(-50%,-50%);
  background:var(--emi-color-primary);
  color:#fff;
  font:600 14px/1.1 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  padding:.35rem .6rem;
  border:none;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.emi-point:hover,
.emi-point:focus{
  outline:none;
  transform:translate(-50%,-50%) scale(1.04);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}

/* Modal: fondo */
.emi-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:9999;
  display:none; /* lo abre el JS */
}

/* Modal: tarjeta */
.emi-modal-content{
  position:relative;
  background:var(--emi-color-bg);
  color:var(--emi-color-text);
  width:min(92vw, 760px);
  margin:6vh auto;
  padding:24px;
  border-radius:12px;
  box-shadow:var(--emi-shadow);
  max-height:88vh;
  overflow:auto;
}

/* Botón cerrar */
.emi-close{
  position:absolute;
  top:10px;
  right:12px;
  background:transparent;
  border:none;
  color:#444;
  font-size:28px;
  line-height:1;
  padding:2px 6px;
  cursor:pointer;
}
.emi-close:hover{ color:#000; }

/* Secciones de ciudad: ocultas por defecto; el JS las muestra */
.emi-city-content{ display:none; }

/* Galería */
.emi-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-block:8px 18px;
}
.emi-gallery img{
  width:calc(50% - 5px);
  height:auto;
  border-radius:8px;
  display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}

/* Bloques con separación vertical */
.emi-block{ margin-block:8px 16px; }

/* Responsive */
@media (max-width:560px){
  .emi-point{ font-size:12px; padding:.3rem .5rem; }
  .emi-gallery img{ width:100%; }
}
.emi-gallery img {
    width: 48%;
    margin: 1%;
}