/* =============================================================================
 * BRAIN INTERACTIVE — Foglio di stile
 * =============================================================================
 *
 * Per cambiare i COLORI, il FONT e le DIMENSIONI del popup non serve toccare
 * le regole CSS qui sotto: modifica solo le VARIABILI definite nel blocco
 * .brain-interactive { ... } subito sotto questo commento.
 *
 *   --bi-color-primary    Colore titoli e bordi (default: #911D09)
 *   --bi-color-text       Colore del testo del paragrafo (default: #000)
 *   --bi-color-subtle     Colore sottotitolo grigio (default: #666)
 *   --bi-color-popup-bg   Sfondo del popup (default: #FFF8F5)
 *   --bi-color-close-bg   Sfondo del pulsante X (default: #ECECEC)
 *   --bi-radius           Border radius generale (default: 15px)
 *   --bi-shadow           Ombra del popup
 *   --bi-font             Font family
 *   --bi-popup-width      Larghezza popup su desktop (default: 380px)
 *   --bi-fade             Durata cross-fade tra PNG e popup (default: 250ms)
 *   --bi-easing           Easing delle transizioni (default: ease-in-out)
 *
 * Tutto il resto è strutturale: cambia le variabili, non le regole.
 * ============================================================================= */

.brain-interactive {
    /* ---- Variabili tematiche ---- */
    --bi-color-primary:  #911D09;
    --bi-color-text:     #000000;
    --bi-color-subtle:   #666666;
    --bi-color-popup-bg: #FFF8F5;
    --bi-color-close-bg: #ECECEC;
    --bi-radius:         15px;
    --bi-shadow:         0 4px 24px rgba(0, 0, 0, 0.12);
    --bi-font:           'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --bi-popup-width:    380px;
    --bi-fade:           250ms;
    --bi-easing:         ease-in-out;

    position: relative;
    display: block;
    width: 100%;
    font-family: var(--bi-font);
    color: var(--bi-color-text);
    box-sizing: border-box;
}

.brain-interactive *,
.brain-interactive *::before,
.brain-interactive *::after {
    box-sizing: border-box;
}

/* ---- Stage (cervello + overlay + SVG) ---- */
.brain-interactive__stage {
    position: relative;
    width: 100%;
    line-height: 0;
}

.brain-interactive__base {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}

.brain-interactive__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bi-fade) var(--bi-easing);
    user-select: none;
    -webkit-user-drag: none;
}

.brain-interactive__overlay.is-active {
    opacity: 1;
}

/* ---- Hotspot SVG (invisibili in produzione) ---- */
.brain-interactive__hotspots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.brain-interactive__hotspot {
    fill: transparent;
    stroke: transparent;
    cursor: pointer;
    pointer-events: all;
    transition: fill var(--bi-fade) var(--bi-easing),
                stroke var(--bi-fade) var(--bi-easing);
    outline: none;
}

.brain-interactive__hotspot:focus-visible {
    outline: none;
    stroke: var(--bi-color-primary);
    stroke-width: 4;
    fill: rgba(145, 29, 9, 0.08);
}

/* ---- Modalità debug ---- */
.brain-interactive--debug .brain-interactive__hotspot {
    fill: rgba(255, 0, 0, 0.3);
    stroke: red;
    stroke-width: 2;
}

.brain-interactive__debug-label {
    font-family: var(--bi-font);
    font-size: 28px;
    font-weight: 700;
    fill: #fff;
    paint-order: stroke;
    stroke: #000;
    stroke-width: 4;
    pointer-events: none;
}

/* ---- Popup (desktop: sovraimpressione assoluta sul lato sinistro) ---- */
.brain-interactive__popup {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(-8px);
    width: var(--bi-popup-width);
    max-width: calc(100% - 32px);
    z-index: 10;
    background: var(--bi-color-popup-bg);
    border-radius: var(--bi-radius);
    box-shadow: var(--bi-shadow);
    padding: 28px 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bi-fade) var(--bi-easing),
                transform var(--bi-fade) var(--bi-easing);
}

.brain-interactive__popup[hidden] {
    display: none;
}

.brain-interactive__popup.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

/* Variante "lato destro" (desktop): popup ancorato a destra del cervello.
   Vale solo per le aree indicate in RIGHT_SIDE_AREAS nel JS. */
.brain-interactive__popup.is-right {
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(8px);
}

.brain-interactive__popup.is-right.is-visible {
    transform: translateY(-50%) translateX(0);
}

.brain-interactive__close {
    /* Nascosto su desktop: non serve, la chiusura avviene uscendo col mouse. */
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    font-size: 22px;
    font-weight: 700;
    color: var(--bi-color-primary);
    background: var(--bi-color-close-bg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.brain-interactive__close:hover,
.brain-interactive__close:focus-visible {
    background: #e0e0e0;
    outline: 2px solid var(--bi-color-primary);
    outline-offset: 2px;
}

.brain-interactive__title {
    margin: 0 36px 6px 0;
    font-family: var(--bi-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: var(--bi-color-primary);
    text-transform: uppercase;
}

.brain-interactive__title sup {
    font-size: 0.55em;
    font-weight: 700;
    vertical-align: super;
    margin-left: 4px;
    letter-spacing: 0;
}

.brain-interactive__subtitle {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 400;
    color: var(--bi-color-subtle);
    line-height: 1.4;
}

.brain-interactive__paragraph {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bi-color-text);
}

.brain-interactive__functions-label {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bi-color-text);
}

.brain-interactive__functions {
    margin: 0;
    padding: 0;
    list-style: none;
}

.brain-interactive__functions li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bi-color-text);
}

.brain-interactive__functions li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bi-color-primary);
}

/* =====================================================================
 * MOBILE (< 768px) — Il popup diventa un pannello che si apre SOTTO il
 * cervello e SPINGE il contenuto della pagina invece di sovrapporsi.
 * ===================================================================== */
@media (max-width: 767px) {
    .brain-interactive__close {
        display: flex;
    }

    .brain-interactive__popup,
    .brain-interactive__popup.is-right {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 16px;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transition: max-height var(--bi-fade) var(--bi-easing),
                    opacity var(--bi-fade) var(--bi-easing),
                    padding var(--bi-fade) var(--bi-easing),
                    margin var(--bi-fade) var(--bi-easing);
    }

    .brain-interactive__popup.is-visible,
    .brain-interactive__popup.is-right.is-visible {
        transform: none;
        max-height: 2000px;
        opacity: 1;
        padding-top: 28px;
        padding-bottom: 28px;
        pointer-events: auto;
    }

    .brain-interactive__popup[hidden] {
        display: block;
        max-height: 0;
        opacity: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        pointer-events: none;
    }
}

/* Riduzione movimento per chi ha "prefers-reduced-motion" */
@media (prefers-reduced-motion: reduce) {
    .brain-interactive__overlay,
    .brain-interactive__popup,
    .brain-interactive__hotspot {
        transition: none !important;
    }
}