/* =============================================================
   Post Preview List v2 – Stylesheet
   Tooltip position: absolute (widget-relativo) · BEM
   ============================================================= */

/* ── 1. Widget wrapper
   DEVE essere position:relative per ancorare il tooltip absolute
   ────────────────────────────────────────────────────── */
.ppl-widget {
    position   : relative;
    width      : 100%;
    box-sizing : border-box;
    /* overflow: visible di default → il tooltip può debordare se necessario */
}

/* ── 2. Lista
   ────────────────────────────────────────────────────── */
.ppl-list {
    list-style : none;
    margin     : 0;
    padding    : 0;
    position   : relative; /* sopra il tooltip in z-order */
    z-index    : 2;
}

.ppl-list__item {
    border-bottom : 1px solid rgba(0, 0, 0, 0.09);
    box-shadow    : inset 0 0 0 transparent;
    transition    : background-color 0.22s ease, box-shadow 0.22s ease;
}

.ppl-list__item:last-child {
    border-bottom : none;
}

.ppl-list__item:hover,
.ppl-list__item--active {
    background-color : rgba(0, 0, 0, 0.05);
}

.ppl-list__item--active {
    /* colore barra sinistra personalizzabile in Elementor */
    box-shadow : inset 3px 0 0 currentColor;
}

/* ── 3. Link lista
   ────────────────────────────────────────────────────── */
.ppl-list__link {
    display         : block;
    padding         : 0.6rem 0.5rem; /* sovrascrivibile da Elementor */
    color           : inherit;
    text-decoration : none;
    transition      : color 0.22s ease;
    word-break      : break-word;
    cursor          : pointer;
}

.ppl-list__link:hover,
.ppl-list__item--active .ppl-list__link {
    text-decoration : underline;
}

.ppl-list__link:focus-visible {
    outline        : 2px solid currentColor;
    outline-offset : 2px;
    border-radius  : 2px;
}

/* ── 4. Tooltip – position: absolute, ancorato al widget
   Il JS imposta `top` e togola `.ppl-tooltip--visible`
   ────────────────────────────────────────────────────── */
.ppl-tooltip {
    /* Dimensioni di default (sovrascrivibili da Elementor via selectors) */
    width  : 320px;
    height : 240px;

    position       : absolute;
    z-index        : 1;          /* sotto la lista (z:2) così i link restano cliccabili */
    top            : 0;          /* punto di partenza; JS calcola il valore reale */
    left           : 50%;        /* sovrascrivibile dal controllo Elementor */
    pointer-events : none;

    /* ── Stato nascosto di default ──
       Usiamo opacity + visibility (non display) per permettere le transizioni CSS.
       `visibility:hidden` assicura che non riceva eventi anche prima del JS. */
    opacity    : 0;
    visibility : hidden;

    /* ── Micro-animazione entry ── */
    transform  : translateX(-6px);

    /* ── Transizioni ──
       `top` ha duration più breve: l'immagine "segue" l'item senza ritardo.
       `transition-duration` è sovrascrivibile da Elementor (tooltip_transition). */
    transition-property        : opacity, visibility, transform, top;
    transition-duration        : 0.22s,  0.22s,      0.22s,     0.14s;
    transition-timing-function : ease,   ease,        ease,      ease-out;

    /* Stile base personalizzabile da Elementor */
    background-color : #1a1a1a;
    border-radius    : 6px;
    overflow         : hidden;
    box-shadow       : 0 8px 30px rgba(0, 0, 0, 0.25),
                       0 2px 8px  rgba(0, 0, 0, 0.12);
}

/* Stato visibile: aggiunto/rimosso da JS */
.ppl-tooltip--visible {
    opacity    : 1;
    visibility : visible;
    transform  : translateX(0);
}

/* ── 5. Immagine nel tooltip
   ────────────────────────────────────────────────────── */
.ppl-tooltip__img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover; /* sovrascrivibile da Elementor */
    opacity    : 0;
    transition : opacity 0.18s ease;
}

/* Il JS aggiunge questa classe dopo l'onload dell'immagine */
.ppl-tooltip__img--loaded {
    opacity : 1;
}

/* ── 6. Testo fallback (mostrato quando non c'è immagine)
   ────────────────────────────────────────────────────── */
.ppl-tooltip__fallback {
    position       : absolute;
    inset          : 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : rgba(255, 255, 255, 0.55);
    font-size      : 0.85em;
    font-style     : italic;
    text-align     : center;
    padding        : 1rem;
    pointer-events : none;
}

/* Nascosta quando l'immagine è caricata correttamente */
.ppl-tooltip--has-image .ppl-tooltip__fallback {
    display : none;
}

/* ── 7. Messaggi di sistema
   ────────────────────────────────────────────────────── */
.ppl-no-posts,
.ppl-notice {
    color      : #888;
    font-style : italic;
    margin     : 0;
    padding    : 0.5rem 0;
}

/* ── 8. Supporto prefers-reduced-motion
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ppl-list__item,
    .ppl-list__link,
    .ppl-tooltip,
    .ppl-tooltip__img {
        transition : none !important;
    }

    .ppl-tooltip {
        transform : none !important;
    }
}

/* ── 9. Mobile (≤ 767px): tooltip disabilitato
   Su schermi piccoli i nomi restano link cliccabili normali.
   Rimuovi questo blocco se vuoi il tooltip anche su mobile.
   ────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ppl-tooltip {
        display : none !important;
    }
}