/* /harta: harta OpenStreetMap în culorile hărții desenate de Raluca.
   Tokenii (culori, fonturi, bula, butoanele) vin din ../styles.css. */

.page-harta { background: var(--hartie); }
.page-harta [hidden] { display: none !important; }

.map-wrap {
  position: relative;
  height: calc(100vh - var(--bar-h));
  height: calc(100svh - var(--bar-h));
  margin-top: var(--bar-h);
  overflow: hidden;
  background: #F2F1EC;
}
.map { position: absolute; inset: 0; }
.no-js .map-wrap { display: none; }

/* titlul și filtrele, sus */
.map-top {
  position: absolute; z-index: 3; top: .75rem; left: .75rem; right: .75rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  pointer-events: none;
}
.map-title {
  margin: 0; padding: .45rem .9rem .35rem;
  font: var(--w-display) 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  color: var(--roz); background: var(--alb);
  border: 2px solid var(--indigo); border-radius: 999px; box-shadow: 3px 3px 0 var(--indigo);
  pointer-events: auto;
}
.chips { display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; pointer-events: auto; max-width: 100%; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .35rem .8rem .35rem .5rem;
  font: 400 .95rem/1 var(--f-body); color: var(--indigo);
  background: var(--alb); border: 2px solid var(--indigo); border-radius: 999px; cursor: pointer;
}
.chip b { font-weight: 700; opacity: .6; }
.chip[aria-pressed="false"] { background: transparent; opacity: .55; text-decoration: line-through; }
.chip__mk { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; }
.chip--carte .chip__mk { background: center / cover url("../assets/stickere/ateneul_roman.webp"); box-shadow: 0 0 0 2px var(--coral); }
.chip--grafica .chip__mk { background: #D67C5C; border-radius: 4px 4px 2px 2px; }
.chip--alte .chip__mk { background: var(--alb); border: 2px dashed var(--coral); }

/* markerii */
/* fără position aici: MapLibre poziționează markerul (position: absolute + transform) */
.mk { display: flex; flex-direction: column; align-items: center; cursor: pointer; background: none; border: 0; padding: 0; }
.mk:focus-visible { outline: 3px solid var(--indigo); outline-offset: 4px; border-radius: 12px; }
.mk__label {
  margin-top: 2px; padding: 1px 6px;
  font: var(--w-display) 12px/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; text-align: center;
  color: var(--text); background: rgba(253, 253, 249, .85); border-radius: 6px;
  white-space: nowrap; pointer-events: none;
}
.mk--carte img { width: 46px; height: auto; filter: drop-shadow(0 3px 0 rgba(44, 41, 80, .18)); transition: transform .2s ease; }
.mk--grafica img { height: 42px; width: auto; transition: transform .2s ease; }
/* locurile cu sticker pe harta din carte: desenul stickerului, decupat, fără cerc */
.mk.mk--sticker img { width: auto; height: 50px; filter: drop-shadow(0 2px 0 rgba(44, 41, 80, .16)); }
.z-lt12 .mk.mk--sticker img { width: auto; height: 36px; }
/* locurile din carte cu silueta desenată de Raluca (ca la Colecțiile de Artă) */
.mk.mk--silueta img { width: auto; height: 42px; filter: none; }
.z-lt12 .mk.mk--silueta img { width: auto; height: 32px; }
.mk--alte .mk__dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--alb); border: 2.5px dashed var(--coral);
  transition: transform .2s ease;
}
.mk:hover img, .mk:hover .mk__dot, .mk.is-open img, .mk.is-open .mk__dot { transform: scale(1.15) translateY(-2px); }
.mk.is-open .mk__label { background: var(--indigo); color: var(--alb); }

/* etichetele apar treptat cu zoomul, ca harta să nu se aglomereze */
.z-lt13 .mk--grafica .mk__label, .z-lt13 .mk--alte .mk__label,
.z-lt15 .mk--alte .mk__label { display: none; }
.z-lt12 .mk--carte .mk__label { display: none; }
.z-lt12 .mk--carte img { width: 34px; }

[data-hide-carte] .mk--carte, [data-hide-grafica] .mk--grafica, [data-hide-alte] .mk--alte { display: none; }

/* Pix pe hartă */
.pix-mk { width: 78px; pointer-events: auto; cursor: pointer; }
.pix-mk img { width: 78px; height: auto; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 5px 0 rgba(44, 41, 80, .12)); }
.pix-mk.is-left img { transform: scaleX(-1); }
.pix-mk.is-walking img { animation: pix-pas .3s ease-in-out infinite alternate; }
.pix-mk.is-walking.is-left img { animation-name: pix-pas-st; }
@keyframes pix-pas    { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-6px) rotate(3deg); } }
@keyframes pix-pas-st { from { transform: scaleX(-1) translateY(0) rotate(-3deg); } to { transform: scaleX(-1) translateY(-6px) rotate(3deg); } }
.pix-mk .bubble {
  position: absolute; left: 56px; bottom: 62px; margin: 0;
  white-space: nowrap; font-size: 1rem; padding: .4rem .8rem .35rem;
  transition: opacity .3s ease, transform .3s ease;
}
.pix-mk .bubble.is-gone { opacity: 0; transform: translateY(6px); pointer-events: none; }

/* cardul locului: același card ca pe Home */
.card {
  position: absolute; z-index: 4; left: 1rem; top: 5.5rem; width: 380px; max-height: calc(100% - 7rem); overflow: auto;
  display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--alb); border: 2px solid var(--indigo); border-radius: var(--r); box-shadow: var(--umbra);
  animation: card-in .3s ease;
}
.card[hidden] { display: none; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.card__close {
  position: absolute; top: .35rem; right: .45rem; width: 40px; height: 40px;
  font: 400 1.6rem/1 var(--f-body); color: var(--indigo); background: none; border: 0; cursor: pointer; border-radius: 50%;
}
.card__close:hover { background: color-mix(in srgb, var(--indigo) 8%, transparent); }
.card__visual img { width: 96px; height: auto; max-height: 112px; object-fit: contain; }
.card__visual .card__dot { width: 64px; height: 64px; margin: .5rem auto 0; border-radius: 50%; border: 3px dashed var(--coral); background: var(--alb); }
.card__kicker { margin: 0 0 .1rem; font: var(--w-display) .95rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.card__title { margin: 0 2rem .7rem 0; font: var(--w-display) 1.9rem/1 var(--f-display); text-transform: uppercase; color: var(--roz); }
.card__bubble { font-size: 1.05rem; }
.card__fact { margin: 0 0 .8rem; }
.card__book { margin: 0 0 1rem; font-size: .93rem; color: var(--text-2); }
.card__label { margin: 0 0 .3rem; font: var(--w-display) .95rem/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--indigo); }
.card__challenge { margin: 0 0 1rem; padding: .7rem .85rem; border: 2px dashed var(--coral); border-radius: 14px; background: #FFF8F5; }
.card__challenge-text { margin: 0; font-size: .98rem; }
.card__near { margin: 0 0 1rem; }
.card__near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.card__near-list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .3rem .4rem; text-align: left; font: inherit; color: var(--text); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.card__near-list button:hover { background: color-mix(in srgb, var(--indigo) 7%, transparent); }
.card__near-list img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.card__near-list b { display: block; font-size: .92rem; line-height: 1.2; }
.card__near-list small { color: var(--text-2); font-size: .82rem; }
.card__dot { display: block; }
.card__dot--mic { width: 22px !important; height: 22px !important; margin: 0 6px !important; border-width: 2.5px !important; flex: 0 0 auto; }
.place__challenge { margin: .35rem 0 0; font-size: .9rem; padding-left: .6rem; border-left: 3px dashed var(--coral); }
.card__go { min-height: 44px; font-size: 1rem; padding: .55rem 1.1rem; }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } .pix-mk.is-walking img { animation: none; } }

@media (max-width: 720px) {
  .map-title { font-size: 1.25rem; }
  .card {
    left: .6rem; right: .6rem; top: auto; bottom: .6rem; width: auto;
    grid-template-columns: 72px 1fr; gap: .8rem; padding: .9rem 1rem 1rem;
    max-height: 60%; overflow: auto;
  }
  .card__visual img { width: 72px; }
  .card__title { font-size: 1.55rem; margin-bottom: .5rem; }
  .card__bubble { font-size: .98rem; margin-bottom: .6rem; }
  .card__book { font-size: .88rem; margin-bottom: .8rem; }
}

.map-error { position: absolute; inset: auto 1rem 1rem; z-index: 5; margin: 0; padding: .8rem 1rem; background: var(--alb); border: 2px solid var(--indigo); border-radius: 12px; }

/* controalele MapLibre, în stilul paginii */
.maplibregl-ctrl-group { border-radius: 14px !important; border: 2px solid var(--indigo); box-shadow: 3px 3px 0 var(--indigo) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
.maplibregl-ctrl-attrib { font-size: 11px; }

/* lista de sub hartă: conținutul real, și fără JavaScript */
.places { padding: 4rem 0 5rem; }
.places__lead { max-width: 42rem; color: var(--text-2); margin: 0 0 2.5rem; }
.places__group + .places__group { margin-top: 2.5rem; }
.places__group h3 { margin: 0 0 1rem; }
.places__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.place { display: grid; grid-template-columns: 52px 1fr; gap: .75rem; align-items: center; padding: .6rem .75rem; background: var(--alb); border: 1.5px solid color-mix(in srgb, var(--indigo) 18%, transparent); border-radius: 14px; }
.place__vis img { width: 52px; height: 52px; object-fit: contain; }
.place__vis .card__dot { width: 30px; height: 30px; margin: 0 auto; border-width: 2.5px; }
.place__name { margin: 0; font-weight: 700; line-height: 1.25; }
.place__meta { margin: .15rem 0 0; font-size: .88rem; color: var(--text-2); }
.place__links { display: flex; gap: .9rem; margin-top: .3rem; font-size: .9rem; }
.place__links a, .place__links button { color: var(--indigo); font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }