/* Overrides de marca para el mapa MapLibre. Se enlaza SOLO en páginas con mapa
   (content_for :head desde shared/_map), junto a maplibre-gl.css. Usa los tokens
   de public.css (--ink espresso, --greige, --line). */

/* El contenedor llena su celda (p. ej. .cmap en la ficha: position:relative con
   altura del grid). MapLibre necesita un contenedor con altura real. */
.map { position: absolute; inset: 0; }
.map .maplibregl-canvas { outline: none; }

/* Marcador de marca: pieza roja Montessori. Un único PNG (sombra ya horneada, sin
   filtro CSS) reutilizado en cada escuela. La punta apoya en el punto geográfico
   (anchor: "bottom" en el Marker de MapLibre). */
.mw-marker { width: 42px; height: 42px; display: block; cursor: pointer; }

/* Popup sobrio: tipografía heredada, tokens de marca. */
.map-popup .maplibregl-popup-content {
  font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 11px; box-shadow: 0 6px 20px rgba(45, 42, 38, .14); }
.map-popup .maplibregl-popup-tip { border-top-color: var(--line); }
.map-popup__name { font-family: "Fraunces", serif; font-weight: 560;
  font-size: .95rem; line-height: 1.15; color: var(--ink);
  /* Dos líneas como mucho: un nombre largo estiraba la tarjeta a lo alto y la
     dejaba de ser apaisada. El nombre entero está en su fila del lateral y en
     la ficha. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }

/* La tarjeta del pin: los mismos datos que la fila del lateral (foto, nombre,
   ciudad y distancia, etiquetas) en dos columnas — la foto a la izquierda y el
   resto apilado a su derecha.
   - La foto es un RECTÁNGULO apaisado de proporción fija (4:3, como la
     miniatura de la fila). Estirada al alto de la tarjeta, un nombre largo la
     convertía en una tira alta y estrecha.
   - Sin foto, __main ocupa él solo todo el ancho.
   - La tarjeta ENTERA es el enlace a la ficha (ver #popupHtml), así que el <a>
     es también el contenedor flex. */
.map-popup__body { display: flex; gap: 9px; align-items: flex-start;
  text-align: left; text-decoration: none; color: inherit; }
.map-popup__thumb { width: 76px; height: 66px; flex: none; display: block;
  border-radius: 6px; overflow: hidden; background: var(--cream-2); }
.map-popup__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map-popup__main { flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: flex-start; gap: 3px; }
.map-popup__meta { color: var(--ink-soft); font-size: .78rem; line-height: 1.25; }
/* Un respiro entre la localidad y las etiquetas: pegadas, la ciudad parecía
   otra etiqueta más. El resto de huecos de la columna los pone el `gap`. */
.map-popup__tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.map-popup__tags .dir-tag { font-size: .66rem; padding: 1px 7px; }
/* La flecha junto al nombre es la pista de que la tarjeta entera lleva a la
   ficha (no hay un "+ info" que lo diga). Al pasar por encima avanza un poco y
   el nombre se subraya. */
.map-popup__arrow { color: var(--greige); display: inline-block;
  transition: transform .15s ease, color .15s ease; }
.map-popup__body:hover .map-popup__arrow { color: var(--maroon); transform: translateX(2px); }
.map-popup__body:hover .map-popup__name { text-decoration: underline;
  text-decoration-color: var(--greige); text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .map-popup__arrow { transition: none; }
  .map-popup__body:hover .map-popup__arrow { transform: none; }
}
/* Enlace "cómo llegar" bajo el nombre: línea propia, discreta. */
.map-popup__directions { display: block; margin-top: 4px; text-align: center;
  font-size: .8125rem; color: var(--maroon); text-decoration: none; }
.map-popup__directions:hover { text-decoration: underline; }

/* Atribución discreta (estilo ludus): línea pequeña y tenue abajo a la derecha.
   Se mantiene visible siempre (licencia OSM/OpenMapTiles), pero sin peso visual. */
.map .maplibregl-ctrl-attrib {
  margin: 0;
  padding: 1px 6px;
  background: rgba(255, 255, 255, .82);
  border-radius: 5px 0 0 0;
  font-size: 8px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
}
.map .maplibregl-ctrl-attrib a { color: var(--ink-soft); text-decoration: none; }
.map .maplibregl-ctrl-attrib a:hover { color: var(--ink); text-decoration: underline; }
.map .maplibregl-ctrl-bottom-right { display: flex; align-items: flex-end; }