/* ─────────────────────────────────────────────────────────────
   Map — shared by the project pages and the contact page
   ───────────────────────────────────────────────────────────── */

/* The panel gutter and gap belong to the block, not to whichever page is
   hosting it — otherwise the map is correctly inset on the project pages
   (which set their own panel rhythm) and flush to the screen edge anywhere
   else. Same two values the project stack uses, so nothing moved there. */
.jm-map-section {
    padding: 0;
    margin-inline: clamp(12px, 2.4vw, 28px);
    margin-top: clamp(16px, 2.4vw, 30px);
}

.jm-map-section__panel {
    padding: clamp(26px, 3.6vw, 48px) clamp(16px, 3vw, 40px);
}

.jm-map {
    position: relative;
    aspect-ratio: 16 / 9;
    /* A thin dark mount — enough to seat the bright Google tiles on the page
       without the frame becoming the loudest thing in the section. */
    border: 1px solid rgba(64, 103, 118, 0.45);
    border-radius: 12px;
    overflow: hidden;
    background: var(--primary-dark);
    padding: 3px;
    box-shadow: 0 16px 36px -28px rgba(16, 32, 40, 0.55);
}

/* 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: var(--sp-2);
    background: var(--bg-white);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    color: var(--primary);
    font-size: var(--fs-small);
    font-weight: 600;
    letter-spacing: var(--ls-heading);
    transition: background 0.35s var(--ease);
}

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

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

.jm-map__link {
    text-align: center;
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-small);
}