/* ─────────────────────────────────────────────────────────────
   Map — shared by any page that needs one
   ───────────────────────────────────────────────────────────── */

/* The gutter belongs to the BLOCK, not to whichever page is hosting it.
   When the host page supplied it instead, the map was correctly inset on
   the one page that had been built and went flush to the screen edge
   everywhere else. */
.jm-map-section {
    padding: 0 0 60px;
    margin-inline: clamp(12px, 2.4vw, 28px);
}

.jm-map-section__panel {
    max-width: var(--container-max, 1140px);
    margin: 0 auto;
}

.jm-map-section__label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
}

.jm-map {
    position: relative;
    aspect-ratio: 16 / 9;
    /* A thin mount — enough to seat the bright Google tiles on the page
       without the frame becoming the loudest thing in the section. */
    border: 1px solid var(--border-light);
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-white);
    padding: 3px;
}

/* A map you cannot zoom is a picture. Give it room to be usable. */
@media (max-width: 700px) {
    .jm-map { aspect-ratio: 3 / 4; }
}

@media (max-width: 640px) {
    .jm-map { aspect-ratio: 4 / 3; }
}

.jm-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 9px;
}

.jm-map__load {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-white);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--primary);
    font-size: 15px;
    font-weight: 600;
    transition: background 0.35s ease;
}

.jm-map__load small {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: var(--text-light);
}

@media (hover: hover) and (pointer: fine) {
    .jm-map__load:hover {
        background: var(--primary-light);
        transform: none;
    }
}

.jm-map__link {
    text-align: center;
    margin: 16px 0 0;
    font-size: 15px;
}

.jm-map__link .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}