/* [mg_exhibition_map] — pins positioned as percentages over an
   equirectangular base image. The wrapper takes its height from the image
   itself, so the pins stay aligned at every width with no JS. */
.mg-worldmap-section {
    margin: 5rem 0 3rem;
}

.mg-worldmap__heading {
    margin: 0 0 1.75rem;
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .18em;
    text-indent: .18em;
    color: var(--mg-ink-soft);
    text-align: center;
}

.mg-worldmap {
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
    line-height: 0;
}

.mg-worldmap__base {
    display: block;
    width: 100%;
    height: auto;
}

.mg-worldmap__pins {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cropped to the pins' bounding box.
   .mg-worldmap carries an inline aspect-ratio matching the cropped region.
   The image and the pin layer are each blown up and offset by the SAME inline
   geometry, so they stay in register and the pins keep their plain
   whole-world percentages — no per-pin recalculation.
   Only the image is clipped: tooltips have to be free to overhang the frame,
   which is why the clipping lives on __clip and not on .mg-worldmap. */
.mg-worldmap.is-cropped .mg-worldmap__clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* max-width:none is load-bearing. The global `img { max-width: 100% }` in
   style.css otherwise clamps the inline blow-up width back to the container
   while the inline height still applies — the image squashes to a distorted
   sliver and the pin layer, being a <ul>, scales past it and drifts off the
   coastlines. */
.mg-worldmap.is-cropped .mg-worldmap__base {
    position: absolute;
    max-width: none;
}

.mg-worldmap.is-cropped .mg-worldmap__pins {
    inset: auto;
}

.mg-worldmap__pin {
    position: absolute;
    /* left/top are set inline from the projected coordinates; the translate
       centres the dot on the point rather than hanging it below-right. */
    transform: translate(-50%, -50%);
    line-height: 1;
}

.mg-worldmap__pin:hover,
.mg-worldmap__pin:focus-within {
    z-index: 3;
}

.mg-worldmap__link {
    display: block;
    position: relative;
    text-decoration: none;
}

.mg-worldmap__dot {
    display: block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--mg-red);
    border: 2px solid var(--mg-paper);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    transition: transform .15s ease;
}

.mg-worldmap__link:hover .mg-worldmap__dot,
.mg-worldmap__link:focus-visible .mg-worldmap__dot {
    transform: scale(1.35);
}

.mg-worldmap__pin.is-past .mg-worldmap__dot {
    background: var(--mg-ink-soft);
}

.mg-worldmap__label {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: block;
    width: max-content;
    max-width: 13rem;
    padding: .5rem .7rem;
    background: var(--mg-ink);
    color: var(--mg-paper);
    text-align: center;
    line-height: 1.35;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
}

.mg-worldmap__link:hover .mg-worldmap__label,
.mg-worldmap__link:focus-visible .mg-worldmap__label {
    opacity: 1;
    visibility: visible;
}

.mg-worldmap__label::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--mg-ink);
}

.mg-worldmap__name {
    display: block;
    font-family: var(--mg-serif);
    font-size: .9rem;
}

.mg-worldmap__place,
.mg-worldmap__dates {
    display: block;
    font-family: var(--mg-fell);
    font-size: .72rem;
    opacity: .8;
}

.mg-worldmap__empty {
    margin: 2.5rem 0;
    font-family: var(--mg-fell);
    font-style: italic;
    color: var(--mg-ink-soft);
    text-align: center;
}

@media (max-width: 40em) {
    .mg-worldmap {
        margin: 2rem auto;
    }

    .mg-worldmap__dot {
        width: 9px;
        height: 9px;
        border-width: 1.5px;
    }

    .mg-worldmap__label {
        max-width: 9rem;
        padding: .4rem .55rem;
    }

    .mg-worldmap__name {
        font-size: .8rem;
    }
}