/* Interactive Image / Infographic Blocks (SOW: Interactive Image Hotspots)
   Dot + popup accents inherit the convention year's palette via --siteColor /
   --siteText, but only inside .site-style (the block's "Global Convention
   Year" toggle, or a convention page) — PDAC orange everywhere else. */

.interactive-image {
    position: relative;
}

.interactive-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Image + dots only: its height always equals the image, so the static
   mobile popup below it can never shift the dot positions. */
.interactive-image-canvas {
    container-type: inline-size;
    position: relative;
}

/* --- Hotspot dot: frosted glass with a brand-colour plus icon ----------- */

.interactive-image-hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(4px) saturate(1.4);
    backdrop-filter: blur(4px) saturate(1.4);
    /* Hairline edge + lifted shadow keep the dot legible on light AND dark
       areas of the image. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 2px 12px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .2s ease-out, background-color .2s ease-out, box-shadow .2s ease-out;
    z-index: 2;
}

/* Plus icon: SVG with rounded caps, painted through a mask so the colour is
   just background-color (brand orange, or --siteColor inside .site-style). */
.interactive-image-hotspot::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background-color: #F48120;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15M4.5 12h15' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform .25s ease, background-color .2s ease;
}

.interactive-image-hotspot:hover,
.interactive-image-hotspot:focus-visible {
    transform: translate(-50%, -50%) scale(1.12);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .45);
    z-index: 4;
}

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

/* Open: dot inverts to the brand colour, icon turns white and rotates into
   an x (close affordance). */
.interactive-image-hotspot[aria-expanded="true"] {
    background: #F48120;
    transform: translate(-50%, -50%) scale(1.12);
    z-index: 4;
}

.interactive-image-hotspot[aria-expanded="true"]::after {
    background-color: #fff;
    transform: rotate(45deg);
}

/* Pulsing ring: white with a hairline dark edge so it reads everywhere;
   GPU-friendly transform/opacity only. */
.interactive-image-hotspot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    pointer-events: none;
    animation: interactive-image-pulse 1.4s cubic-bezier(.2, .55, .4, 1) infinite;
}

/* Rings pulse until their dot is opened (below). Hovering the image or another
   dot must not pause them - client request. */
.interactive-image-hotspot[aria-expanded="true"] .interactive-image-hotspot-ring {
    animation: none;
    opacity: 0;
}

@keyframes interactive-image-pulse {
    0%   { transform: scale(1);   opacity: .9; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-image-hotspot-ring { animation: none; }
    .interactive-image-hotspot,
    .interactive-image-hotspot::after { transition: none; }
}

/* --- Popup ------------------------------------------------------------- */

.interactive-image-popup {
    position: absolute;
    z-index: 5;
    width: min(320px, 90%);
    background: #fff;
    color: #212529;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
    padding: 1rem 2.25rem 1rem 1.25rem;
    text-align: left;
}

/* Set by the JS while a popup is open: lifts the whole section above the
   following sections (each `section .container` is z-index 3), so a long
   popup overflowing the image stays on top. Below the header (9999). */
section.interactive-image-raised {
    position: relative;
    z-index: 10;
}

.interactive-image-popup-header {
    font-weight: 700;
    margin-bottom: .375rem;
    padding-right: .5rem;
    color: #F48120;
}

.interactive-image-popup-body { font-size: .9375rem; }
.interactive-image-popup-body p:last-child { margin-bottom: 0; }

.interactive-image-popup-close {
    position: absolute;
    top: .375rem;
    right: .375rem;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    color: inherit;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
}

.interactive-image-popup-close:hover,
.interactive-image-popup-close:focus-visible {
    background: rgba(0, 0, 0, .18);
}

.popup-scheme-dark .interactive-image-popup-close {
    background: rgba(255, 255, 255, .18);
}

/* Small phones: the bubble presents full-width under the image so text stays
   readable. */
@media (max-width: 575.98px) {
    .interactive-image-popup {
        position: relative;
        width: 100%;
        margin-top: .75rem;
    }
}

/* --- Per-block styling presets ------------------------------------------ */

/* Text size */
.popup-text-small .interactive-image-popup-body { font-size: .8125rem; }
.popup-text-small .interactive-image-popup-header { font-size: .875rem; }
.popup-text-large .interactive-image-popup-body { font-size: 1.0625rem; }
.popup-text-large .interactive-image-popup-header { font-size: 1.375rem; }

/* Popup width (desktop; phones stay full-width) */
.popup-size-narrow .interactive-image-popup { width: min(240px, 90%); }
.popup-size-wide .interactive-image-popup { width: min(420px, 90%); }

/* Phones: every size preset goes full-width under the image. */
@media (max-width: 575.98px) {
    .popup-size-narrow .interactive-image-popup,
    .popup-size-wide .interactive-image-popup { width: 100%; }
}

/* Colour schemes - popups AND dots. Default (base styles above): white popup
   with brand/convention accent header, frosted dot with accent icon.
   Light: neutral - light grey popup, dot icon in dark neutral.
   Dark: dark popup, dark glass dot with white icon. */

/* Light: neutral dot icon; open state fills dark neutral. */
.popup-scheme-light .interactive-image-hotspot::after { background-color: #212529; }
.popup-scheme-light .interactive-image-hotspot[aria-expanded="true"] {
    background: #212529;
}
.popup-scheme-light .interactive-image-hotspot[aria-expanded="true"]::after { background-color: #fff; }

/* Dark: dark glass dot, white icon; open state inverts to white. */
.popup-scheme-dark .interactive-image-hotspot {
    background: rgba(33, 37, 41, .88);
}
.popup-scheme-dark .interactive-image-hotspot::after { background-color: #fff; }
.popup-scheme-dark .interactive-image-hotspot[aria-expanded="true"] {
    background: #fff;
}
.popup-scheme-dark .interactive-image-hotspot[aria-expanded="true"]::after { background-color: #212529; }

.popup-scheme-light .interactive-image-popup {
    background: #f5f6f7;
    color: #212529;
}
.popup-scheme-light .interactive-image-popup-header { color: #212529; }

/* Dark: plain white text on the dark panel - header and links included -
   with or without the convention toggle (client request). */
.popup-scheme-dark .interactive-image-popup {
    background: #212529;
    color: #fff;
}
.popup-scheme-dark .interactive-image-popup-header,
.popup-scheme-dark .interactive-image-popup-body,
.popup-scheme-dark .interactive-image-popup-close { color: #fff; }
.popup-scheme-dark .interactive-image-popup-body a {
    color: #fff;
    text-decoration: underline;
}

/* --- Responsive dot scaling -------------------------------------------- */

@media (max-width: 767.98px) {
    .interactive-image-hotspot { width: 34px; height: 34px; }
    .interactive-image-hotspot::after { width: 15px; height: 15px; }
}

@media (max-width: 575.98px) {
    .interactive-image-hotspot { width: 30px; height: 30px; }
    .interactive-image-hotspot::after { width: 13px; height: 13px; }
}

/* --- Loading state ------------------------------------------------------ */
/* While lazysizes fetches the real image: grey skeleton with a shimmer sweep,
   image faded out, dots hidden. On load: image fades in, dots pop in with a
   small stagger. */

.interactive-image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(233, 236, 239, 0) 30%, rgba(255, 255, 255, .9) 50%, rgba(233, 236, 239, 0) 70%) #e9ecef;
    background-size: 200% 100%;
    transition: opacity .4s ease;
}

.interactive-image:has(img.lazyload:not(.lazyloaded))::before,
.interactive-image:has(img.lazyloading)::before {
    opacity: 1;
    animation: interactive-image-shimmer 1.2s linear infinite;
}

@keyframes interactive-image-shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

.interactive-image img { transition: opacity .5s ease; }
.interactive-image img.lazyload,
.interactive-image img.lazyloading { opacity: 0; }
.interactive-image img.lazyloaded { opacity: 1; }

/* Dots stay hidden until the image is there... */
.interactive-image img:not(.lazyloaded) ~ .interactive-image-hotspot {
    opacity: 0;
    pointer-events: none;
}

/* ...then pop in with a slight stagger. */
.interactive-image img.lazyloaded ~ .interactive-image-hotspot {
    animation: interactive-image-hotspot-pop .4s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(2) { animation-delay: .07s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(3) { animation-delay: .14s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(4) { animation-delay: .21s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(5) { animation-delay: .28s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(6) { animation-delay: .35s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(7) { animation-delay: .42s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(8) { animation-delay: .49s; }
.interactive-image img.lazyloaded ~ .interactive-image-hotspot:nth-of-type(n+9) { animation-delay: .56s; }

@keyframes interactive-image-hotspot-pop {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-image:has(img.lazyload:not(.lazyloaded))::before,
    .interactive-image:has(img.lazyloading)::before { animation: none; }
    .interactive-image img { transition: none; }
    .interactive-image img.lazyloaded ~ .interactive-image-hotspot { animation: none; }
}

/* --- Convention colours ------------------------------------------------- */
/* Applies only inside .site-style (block toggle or convention page). */

.site-style .interactive-image-hotspot::after { background-color: var(--siteColor, #F48120); }
.site-style .interactive-image-hotspot[aria-expanded="true"] { background: var(--siteColor, #F48120); }
.site-style .interactive-image-hotspot[aria-expanded="true"]::after { background-color: #fff; }
.site-style .interactive-image-popup-header { color: var(--siteColor, #F48120); }
.popup-scheme-light.site-style .interactive-image-popup-header,
.site-style .popup-scheme-light .interactive-image-popup-header { color: #212529; }

/* Light scheme keeps its neutral dot colours even on convention pages. */
.site-style .popup-scheme-light .interactive-image-hotspot::after { background-color: #212529; }
.site-style .popup-scheme-light .interactive-image-hotspot[aria-expanded="true"] { background: #212529; }
.site-style .popup-scheme-light .interactive-image-hotspot[aria-expanded="true"]::after { background-color: #fff; }

/* Dark scheme on a convention page: dots take the convention colour with a
   white icon (open dot inverts to white with a convention-colour icon). The
   popup stays the dark panel with white header/text, as everywhere else (the
   base .site-style header rule above would otherwise colour the header). */
.popup-scheme-dark.site-style .interactive-image-hotspot,
.site-style .popup-scheme-dark .interactive-image-hotspot {
    background: var(--siteColor, #212529);
}
.popup-scheme-dark.site-style .interactive-image-hotspot::after,
.site-style .popup-scheme-dark .interactive-image-hotspot::after { background-color: #fff; }
.popup-scheme-dark.site-style .interactive-image-hotspot[aria-expanded="true"],
.site-style .popup-scheme-dark .interactive-image-hotspot[aria-expanded="true"] { background: #fff; }
.popup-scheme-dark.site-style .interactive-image-hotspot[aria-expanded="true"]::after,
.site-style .popup-scheme-dark .interactive-image-hotspot[aria-expanded="true"]::after {
    background-color: var(--siteColor, #212529);
}

.popup-scheme-dark.site-style .interactive-image-popup-header,
.site-style .popup-scheme-dark .interactive-image-popup-header { color: #fff; }

/* --- Dot size preset (per block) ---------------------------------------- */
/* Normal = the base sizes above (40 / 34 / 30px by breakpoint). */

.dot-size-small .interactive-image-hotspot { width: 30px; height: 30px; }
.dot-size-small .interactive-image-hotspot::after { width: 13px; height: 13px; }
.dot-size-small .interactive-image-hotspot-ring { border-width: 4px; }

.dot-size-large .interactive-image-hotspot { width: 52px; height: 52px; }
.dot-size-large .interactive-image-hotspot::after { width: 24px; height: 24px; }
.dot-size-large .interactive-image-hotspot-ring { border-width: 8px; }

@media (max-width: 767.98px) {
    .dot-size-small .interactive-image-hotspot { width: 26px; height: 26px; }
    .dot-size-small .interactive-image-hotspot::after { width: 11px; height: 11px; }
    .dot-size-large .interactive-image-hotspot { width: 40px; height: 40px; }
    .dot-size-large .interactive-image-hotspot::after { width: 18px; height: 18px; }
}

@media (max-width: 575.98px) {
    .dot-size-small .interactive-image-hotspot { width: 24px; height: 24px; }
    .dot-size-small .interactive-image-hotspot::after { width: 10px; height: 10px; }
    .dot-size-large .interactive-image-hotspot { width: 32px; height: 32px; }
    .dot-size-large .interactive-image-hotspot::after { width: 14px; height: 14px; }
}

/* --- Dots scale with the IMAGE, not the viewport ------------------------ */
/* A 40px dot on a small image (phone, or a narrow column on desktop) hides
   too much of the picture. Where container queries are supported the dot,
   icon and ring size follow the canvas width, clamped to the preset's
   phone/desktop pixel sizes. The breakpoint sizes above remain the fallback. */
@supports (width: 1cqw) {
    .interactive-image .interactive-image-hotspot {
        width: clamp(22px, 5cqw, 40px);
        height: clamp(22px, 5cqw, 40px);
    }
    .interactive-image .interactive-image-hotspot::after {
        width: clamp(10px, 2.25cqw, 18px);
        height: clamp(10px, 2.25cqw, 18px);
    }
    .interactive-image .interactive-image-hotspot-ring {
        border-width: clamp(3px, .75cqw, 6px);
    }

    .dot-size-small .interactive-image-hotspot {
        width: clamp(18px, 3.75cqw, 30px);
        height: clamp(18px, 3.75cqw, 30px);
    }
    .dot-size-small .interactive-image-hotspot::after {
        width: clamp(8px, 1.6cqw, 13px);
        height: clamp(8px, 1.6cqw, 13px);
    }
    .dot-size-small .interactive-image-hotspot-ring {
        border-width: clamp(2px, .5cqw, 4px);
    }

    .dot-size-large .interactive-image-hotspot {
        width: clamp(26px, 6.5cqw, 52px);
        height: clamp(26px, 6.5cqw, 52px);
    }
    .dot-size-large .interactive-image-hotspot::after {
        width: clamp(12px, 3cqw, 24px);
        height: clamp(12px, 3cqw, 24px);
    }
    .dot-size-large .interactive-image-hotspot-ring {
        border-width: clamp(4px, 1cqw, 8px);
    }
}