/* =============================================================
   Gastineau Hotspot Image
   Module: gastineau-hotspot-image
   ============================================================= */

.gg-hotspot-image {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0; /* kills phantom gap under inline img */
    border-radius: 8px;
    overflow: hidden;
}

.gg-hotspot-image__img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}

/* ── Dot button ─────────────────────────────────────────────── */

.gg-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
    text-decoration: none !important;
}

.gg-hotspot:focus {
    outline: none;
}

.gg-hotspot:focus-visible .gg-hotspot__dot {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ── Pulse ring ─────────────────────────────────────────────── */

.gg-hotspot__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--clr-accent-500, #354F64);
    animation: gg-hotspot-pulse 2.4s ease-out infinite;
}

@keyframes gg-hotspot-pulse {
    0%   { transform: scale(1);   opacity: 0.7; }
    70%  { transform: scale(2.2); opacity: 0;   }
    100% { transform: scale(2.2); opacity: 0;   }
}

/* Stagger pulse animation per hotspot so they don't all fire together */
.gg-hotspot:nth-child(2) .gg-hotspot__pulse { animation-delay: 0.4s; }
.gg-hotspot:nth-child(3) .gg-hotspot__pulse { animation-delay: 0.8s; }
.gg-hotspot:nth-child(4) .gg-hotspot__pulse { animation-delay: 1.2s; }
.gg-hotspot:nth-child(5) .gg-hotspot__pulse { animation-delay: 1.6s; }
.gg-hotspot:nth-child(6) .gg-hotspot__pulse { animation-delay: 2.0s; }

/* ── Dot face ───────────────────────────────────────────────── */

.gg-hotspot__dot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--clr-primary-300, #8F9991);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border: none;
    /* outer white ring with genuine transparent gap via outline-offset */
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.18s ease;
}

.gg-hotspot:hover .gg-hotspot__dot,
.gg-hotspot:focus-visible .gg-hotspot__dot,
.gg-hotspot.is-active .gg-hotspot__dot {
    transform: scale(1.12);
}

/* ── Tooltip ────────────────────────────────────────────────── */

.gg-hotspot__tooltip {
    position: absolute;
    z-index: 20;
    width: 220px;
    pointer-events: none;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}

.gg-hotspot__tooltip-inner {
    display: block;
    background: var(--clr-accent-500, #354F64);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    text-align: left;
}

/* Arrow shared base */
.gg-hotspot__tooltip-inner::before {
    content: '';
    position: absolute;
    border: 7px solid transparent;
}

/* ── Tooltip open state ─────────────────────────────────────── */

.gg-hotspot:hover .gg-hotspot__tooltip,
.gg-hotspot:focus-visible .gg-hotspot__tooltip,
.gg-hotspot.is-active .gg-hotspot__tooltip {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ── Directional variants ───────────────────────────────────── */

/* RIGHT + DOWN (default: dot in top-left quadrant) */
.gg-hotspot--tip-right.gg-hotspot--tip-down .gg-hotspot__tooltip {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}
.gg-hotspot--tip-right.gg-hotspot--tip-down:hover .gg-hotspot__tooltip,
.gg-hotspot--tip-right.gg-hotspot--tip-down.is-active .gg-hotspot__tooltip {
    transform: translateY(-50%) translateX(0);
}
.gg-hotspot--tip-right.gg-hotspot--tip-down .gg-hotspot__tooltip-inner::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--clr-accent-500, #354F64);
}

/* LEFT + DOWN (dot in top-right quadrant) */
.gg-hotspot--tip-left.gg-hotspot--tip-down .gg-hotspot__tooltip {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}
.gg-hotspot--tip-left.gg-hotspot--tip-down:hover .gg-hotspot__tooltip,
.gg-hotspot--tip-left.gg-hotspot--tip-down.is-active .gg-hotspot__tooltip {
    transform: translateY(-50%) translateX(0);
}
.gg-hotspot--tip-left.gg-hotspot--tip-down .gg-hotspot__tooltip-inner::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--clr-accent-500, #354F64);
}

/* RIGHT + UP (dot in bottom-left quadrant) */
.gg-hotspot--tip-right.gg-hotspot--tip-up .gg-hotspot__tooltip {
    left: calc(100% + 10px);
    bottom: 50%;
    transform: translateY(50%) translateX(-4px);
}
.gg-hotspot--tip-right.gg-hotspot--tip-up:hover .gg-hotspot__tooltip,
.gg-hotspot--tip-right.gg-hotspot--tip-up.is-active .gg-hotspot__tooltip {
    transform: translateY(50%) translateX(0);
}
.gg-hotspot--tip-right.gg-hotspot--tip-up .gg-hotspot__tooltip-inner::before {
    right: 100%;
    bottom: 50%;
    transform: translateY(50%);
    border-right-color: var(--clr-accent-500, #354F64);
}

/* LEFT + UP (dot in bottom-right quadrant) */
.gg-hotspot--tip-left.gg-hotspot--tip-up .gg-hotspot__tooltip {
    right: calc(100% + 10px);
    bottom: 50%;
    transform: translateY(50%) translateX(4px);
}
.gg-hotspot--tip-left.gg-hotspot--tip-up:hover .gg-hotspot__tooltip,
.gg-hotspot--tip-left.gg-hotspot--tip-up.is-active .gg-hotspot__tooltip {
    transform: translateY(50%) translateX(0);
}
.gg-hotspot--tip-left.gg-hotspot--tip-up .gg-hotspot__tooltip-inner::before {
    left: 100%;
    bottom: 50%;
    transform: translateY(50%);
    border-left-color: var(--clr-accent-500, #354F64);
}

/* ── Mobile: tooltips below dot, full width ─────────────────── */

@media (max-width: 640px) {
    .gg-hotspot__tooltip {
        width: 180px;
        /* Override all directional placements */
        left: 50% !important;
        right: auto !important;
        top: calc(100% + 10px) !important;
        bottom: auto !important;
        transform: translateX(-50%) translateY(-4px) !important;
    }

    .gg-hotspot:hover .gg-hotspot__tooltip,
    .gg-hotspot.is-active .gg-hotspot__tooltip {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Arrow points up on mobile */
    .gg-hotspot__tooltip-inner::before {
        bottom: 100% !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        border-color: transparent !important;
        border-bottom-color: var(--clr-accent-500, #354F64) !important;
    }

    /* Suppress pulse on touch to avoid perpetual animation jank */
    .gg-hotspot__pulse {
        display: none;
    }
}

/* ── Reduced motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .gg-hotspot__pulse {
        animation: none;
    }
    .gg-hotspot__tooltip,
    .gg-hotspot__dot {
        transition: none;
    }
}