/* ─── Map facade (.hzo-map) ────────────────────────────────────────────
   Static map preview + "Load interactive map" button — the maps iframe
   (and its megabyte of third-party JS) never loads until the visitor asks.
     <div class="hzo-map" data-hzo-map
          data-hzo-map-src="<Google Maps EMBED url>"
          data-hzo-map-title="Map of …">
       <img class="hzo-map__preview" src="…" alt="Map preview of …">   ← optional screenshot
       <span class="hzo-map__pin" aria-hidden="true"><svg …></svg></span> ← placeholder pin (omit with a real screenshot)
       <button type="button" class="hzo-map__load" data-hzo-map-load>Load interactive map</button>
     </div>
   map.js (this widget's behavior — moved out of main.js in Phase 2)
   injects the iframe, moves focus to it, and fires a bubbling hzo:mapopen.
   The [hzo_map] shortcode (map.php) emits this same markup from settings.
   --map-aspect reshapes the frame; --map-radius: 0 when nested in an
   already-clipped .hzo-card__media (both settable via shortcode
   aspect/radius). Markup: blocks/map.html; live use:
   page-variants/contact-1.html. */
.hzo-map {
    position: relative;
    aspect-ratio: var(--map-aspect, 16 / 9);
    border-radius: var(--map-radius, var(--radius-panel));
    overflow: hidden;
    background: var(--bg-alt);
}
.hzo-map > iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* G45 — spinner shown while the maps iframe loads (map.js toggles
   .hzo-map-loading, cleared on the iframe load event). Self-contained keyframe
   so it never depends on the gated spinner.css; ::after paints above the blank
   iframe until it loads. */
@keyframes hzo-map-spin { to { transform: rotate(360deg); } }
.hzo-map-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: hzo-map-spin 0.6s linear infinite;
    pointer-events: none;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hzo-map-loading::after { animation-duration: 1.4s; }
}
.hzo-map__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hzo-map__pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);   /* pin tip marks the spot */
    width: 40px;
    height: 40px;
    color: var(--brand);
    pointer-events: none;
}
.hzo-map__pin svg { width: 100%; height: 100%; display: block; }
.hzo-map__load {
    position: absolute;
    left: 50%;
    bottom: var(--space-lg);
    transform: translateX(-50%);
    z-index: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: var(--border-1) solid var(--surface-border, transparent);
    border-radius: var(--radius-full);
    background: var(--surface, #fff);
    color: var(--on-surface, var(--text-heading));
    font-family: var(--font-body);
    font-size: var(--fs-100);
    font-weight: var(--fw-600, 600);
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard);
}
.hzo-map__load:hover { background: var(--bg-alt); }
.hzo-map__load:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .hzo-map__load { transition: none; }
}