/* Hotspot map — accessible image-coordinate marker/zone primitive.
   Loaded only on pages that use a `hotspot-map` component (see
   components/hotspot-map.php), never site-wide, so sites without this
   primitive ship zero extra bytes for it. Reads theme tokens only — no
   hard-coded client colors. Positioning uses left/top/margin rather than
   `transform`, deliberately, so the shared [data-reveal] population
   animation (assets/css/motion.css) can safely use `transform` for its
   own fade/rise without fighting marker centering.

   Composition: full-bleed image, floating translucent panel on desktop
   (layered depth, no side-by-side boxed grid); panel drops into normal
   flow below the image on narrow viewports (the resolved mobile model —
   unchanged in substance from the boxed-layout version). The shared
   `.cleo-editorial-list*` classes (assets/css/base.css) supply the plain
   numbered-list visual language this reuses from `service-grid`. */

.hotspot-map-wrapper { position: relative; }
.hotspot-map { position: relative; }

.hotspot-map-image-wrap {
    position: relative;
    min-height: min(97vh, 940px);
    overflow: hidden;
}

/* Scroll-story mode (assets/js/hotspot-map.js, desktop + motion-safe only —
   see components/hotspot-map.php's doc comment). The wrapper gains extra
   scroll runway and the stage pins for the duration, so markers can reveal
   one at a time as the visitor scrolls through it. Absent this class (no
   JS, reduced motion, or narrow viewport), both rules are simply inert —
   the section renders exactly like the plain, non-pinned version. */
.hotspot-map-wrapper.scrollytelling-enabled {
    height: calc(100vh * 2.3);
}
.hotspot-map-wrapper.scrollytelling-enabled .hotspot-map {
    position: sticky;
    top: 0;
    height: 100vh;
}
.hotspot-map-wrapper.scrollytelling-enabled .hotspot-map-image-wrap {
    height: 100%;
    min-height: 0;
}

/* Markers reveal one at a time in scroll-story mode; every other mode
   (including this one with reduced motion / no-JS) shows them all via the
   existing shared [data-reveal-group] mechanism instead — see motion.css.
   Markers are never the only way to reach a service: the list beside them
   is always fully visible regardless of which mode is active. */
.scrollytelling-enabled .hotspot-marker { opacity: 0; transition: opacity .4s ease; }
.scrollytelling-enabled .hotspot-marker.is-revealed { opacity: 1; }

.hotspot-scroll-caption {
    display: none;
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    margin: 0;
    padding: 8px 16px;
    font-family: var(--cleo-font-heading);
    font-size: .85rem;
    letter-spacing: .04em;
    color: #fff;
    background: rgba(0,0,0,.4);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}
.scrollytelling-enabled .hotspot-scroll-caption.has-content { display: inline-block; }

.hotspot-map-image.cleo-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.hotspot-map-image-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 40%);
    pointer-events: none;
}

.hotspot-markers {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hotspot-marker {
    --hotspot-marker-size: 34px;
    position: absolute;
    left: var(--hx, 50%);
    top: var(--hy, 50%);
    width: var(--hotspot-marker-size);
    height: var(--hotspot-marker-size);
    margin: calc(var(--hotspot-marker-size) / -2) 0 0 calc(var(--hotspot-marker-size) / -2);
}

.hotspot-marker-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: color-mix(in srgb, var(--cleo-primary), transparent 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

.hotspot-marker-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cleo-accent);
    transition: transform .2s ease;
}

.hotspot-marker-btn:hover .hotspot-marker-dot,
.hotspot-marker-btn:focus-visible .hotspot-marker-dot,
.hotspot-marker.is-active .hotspot-marker-dot {
    transform: scale(1.5);
}

/* The floating panel — a "frosted glass" surface over the image on
   desktop. Falls back to a plain, fully opaque block in normal document
   flow on narrow viewports (see the max-width:759px block below), so
   translucency/backdrop-filter is a desktop-only enhancement, never load-
   bearing for readability. */
.hotspot-map-panel {
    position: relative;
    background: var(--cleo-bg);
    padding: 40px clamp(20px, 6vw, 48px);
}

.hotspot-map-panel .section-eyebrow { display: block; margin-bottom: 8px; }

@media (min-width: 760px) {
    .hotspot-map-panel {
        position: absolute;
        left: 0;
        bottom: 0;
        top: 22%;
        z-index: 2;
        width: min(360px, 84%);
        display: flex;
        flex-direction: column;
        background: color-mix(in srgb, var(--cleo-bg), transparent 14%);
        backdrop-filter: blur(18px) saturate(1.15);
        -webkit-backdrop-filter: blur(18px) saturate(1.15);
        padding: 32px 30px;
        border-radius: 0 var(--cleo-radius-lg) 0 0;
        box-shadow: 0 -8px 40px rgba(0,0,0,.18);
        overflow: hidden;
    }
    /* The classic flex-scroll fix: a flex child needs min-height:0 to be
       allowed to shrink below its content size and actually scroll,
       rather than forcing the flex container (and everything after it)
       to grow to fit all 6 zones — this is what let list items 5/6
       visually spill out of the panel and into the next section before
       this fix. */
    .hotspot-map-panel-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
}

.hotspot-list {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.hotspot-list-item.is-active { background: var(--cleo-surface); }

/* Narrow viewports: the resolved mobile model is a full-width property
   image with a vertically flowing service list beneath it — NOT a shrunk
   version of the desktop hover/marker interface. Marker buttons are
   hidden; the same marker elements instead become large, non-interactive
   "zone highlight" indicators the enhancement script may activate as the
   visitor scrolls the list (optional, never required). */
@media (max-width: 759px) {
    .hotspot-map-image-wrap { min-height: 62vh; }
    .hotspot-marker { --hotspot-marker-size: 36px; }
    .hotspot-marker-btn { display: none; }
    .hotspot-marker {
        border-radius: 50%;
        background: transparent;
        box-shadow: 0 0 0 0 transparent;
        transition: background-color .4s ease, box-shadow .4s ease;
    }
    .hotspot-marker.is-active {
        background: color-mix(in srgb, var(--cleo-accent), transparent 55%);
        box-shadow: 0 0 0 10px color-mix(in srgb, var(--cleo-accent), transparent 82%);
    }
}