/* annona.co.uk - Journey Map exhibit (js/exhibits/map.js): drawn world map, one 48 px pin per place, aria-live place card */

.journey{display:flex;flex-direction:column;gap:1rem}

/* ---------- toolbar + legend ---------- */
.journey-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.journey-progress{margin:0;font-weight:700;color:var(--green-900)}
.map-legend{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:0;padding:0;list-style:none;font-size:.95em;font-weight:700;color:var(--green-900)}
.map-legend li{display:inline-flex;align-items:center;gap:.4rem}
.map-legend .dot{width:.9em;height:.9em;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(31,77,43,.35)}

/* ---------- the map ---------- */
/* The inner map is never narrower than 640 px, so on a phone it scrolls sideways inside .map-wrap (the page never
   scrolls horizontally) and the pins keep their 48 px targets and their elbow room. */
.map-wrap{position:relative;overflow-x:auto;overflow-y:hidden;min-width:0;border-radius:12px;background:#9fd0ee;box-shadow:inset 0 0 0 1px rgba(31,77,43,.15);scrollbar-width:thin}
.map-inner{position:relative;min-width:max(100%,640px);aspect-ratio:2/1}
.map-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hop{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:10 8;opacity:0;transition:opacity .3s}
.hop.is-on{opacity:.95;animation:hop-march .7s linear 3}
@keyframes hop-march{to{stroke-dashoffset:-18}}

/* ---------- pins ---------- */
.pin{position:absolute;transform:translate(-50%,-100%);width:48px;height:48px;border:0;padding:0;background:none;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.pin:hover,.pin:focus-visible{z-index:4}
.pin.is-active{z-index:3}
.pin:focus-visible{outline:3px solid var(--seed);outline-offset:0;box-shadow:none} /* seed-dark: readable over the sea and the land */
/* The marker: a 22 px teardrop whose tip sits exactly at the bottom-centre of the button, i.e. on the place. Its head
   is centred 15.6 px (half the diagonal) above the tip. Colour = the first cousin found there. */
.pin-marker{position:absolute;left:13px;top:21.4px;width:22px;height:22px;box-sizing:border-box;border-radius:50% 50% 0 50%;transform:rotate(45deg);transform-origin:50% 50%;background:var(--c);border:2.5px solid #fff;box-shadow:0 1px 3px rgba(20,40,20,.45),0 0 0 1px rgba(31,77,43,.25);transition:scale .15s,box-shadow .15s}
.pin:hover .pin-marker,.pin:focus-visible .pin-marker{scale:1.18}
.pin.is-active .pin-marker{scale:1.3;outline:3px solid var(--accent);outline-offset:2px;box-shadow:0 2px 6px rgba(20,40,20,.5)}
.pin.is-visited .pin-marker::after{content:"✓" / "";position:absolute;inset:0;display:grid;place-items:center;transform:rotate(-45deg);font:900 11px/1 var(--font);color:#fff;text-shadow:0 0 2px rgba(0,0,0,.7),0 0 1px rgba(0,0,0,.9)}
/* The stop "Next stop" would go to bounces gently (never in reduced motion); a freshly picked pin gives a little pop. */
.pin.is-next .pin-marker{animation:pin-bounce 1.1s ease-in-out infinite}
.pin.is-active .pin-marker{animation:pin-pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pin-bounce{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes pin-pop{0%{scale:.6}60%{scale:1.45}100%{scale:1.3}}
/* Name tag above the head on hover/focus and while active. */
.pin-tag{position:absolute;left:50%;bottom:calc(100% - 13px);translate:-50% 0;white-space:nowrap;padding:.2rem .55rem;border-radius:6px;background:var(--paper);color:var(--green-900);font:700 .8rem/1.2 var(--font);box-shadow:0 2px 8px rgba(20,40,20,.25);opacity:0;pointer-events:none;transition:opacity .15s}
.pin:hover .pin-tag,.pin:focus-visible .pin-tag,.pin.is-active .pin-tag{opacity:1}
.pin.is-active .pin-tag{box-shadow:0 0 0 2px var(--accent),0 2px 8px rgba(20,40,20,.25)}
.pin.tag-left .pin-tag{left:auto;right:0;translate:0 0}
.map-scroll-hint{margin:-.5rem 0 0;font-size:.95em;font-weight:700;color:var(--green-900)}

/* ---------- place card ---------- */
.place-card{padding:1rem 1.25rem;background:var(--cream);border-radius:var(--radius);box-shadow:var(--shadow);border-left:10px solid var(--c,var(--green-600))}
.place-prompt{margin:0;font-weight:700;color:var(--green-900)}
.place-kicker{margin:0;font-size:.8em;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--green-900)}
.place-name{margin:0 0 .6rem;font:800 clamp(1.3rem,1rem + 1.2vw,1.8rem)/1.15 var(--font-display);color:var(--green-900)}
.place-cousins{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .75rem;padding:0;list-style:none}
.place-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:999px;background:var(--c);color:var(--seed);font-weight:700;font-size:.95em;box-shadow:inset 0 0 0 1px rgba(31,77,43,.2)}
.place-chip{background:color-mix(in srgb,var(--c) 55%,#fff)} /* the flat --c line above is the fallback without color-mix() */
.place-local{margin:0 0 .5rem}
.place-local strong{color:var(--green-900)}
.place-note{margin:0 0 .5rem;max-width:62ch;line-height:1.5}
.place-card .read-btn{margin-top:.25rem}

/* ---------- reduced motion: nothing bounces or marches; the map jumps rather than glides ---------- */
@media (prefers-reduced-motion:reduce){
  .pin.is-next .pin-marker,.pin.is-active .pin-marker,.hop.is-on{animation:none}
  .pin-marker,.pin-tag,.hop{transition:none}
}
.journey.is-static .pin.is-next .pin-marker,.journey.is-static .pin.is-active .pin-marker,.journey.is-static .hop.is-on{animation:none}
.journey.is-static .pin-marker,.journey.is-static .pin-tag,.journey.is-static .hop{transition:none}

/* ---------- narrow screens: the map bleeds to the exhibit's edges and scrolls sideways; the card is full width ---------- */
@media (max-width:560px){
  .map-wrap{margin-inline:-1.1rem;border-radius:0}
  .place-card{padding:.9rem 1rem;border-left-width:8px}
  .place-name{font-size:1.3rem}
}