/*
 * PrezzoTop – Core Web Vitals Fix
 * Previene CLS (Cumulative Layout Shift) riservando spazio prima che il JS carichi.
 * Previene LCP degradation con will-change e content-visibility.
 *
 * COME USARE:
 * Incoda questo file come stile separato OPPURE appendi il contenuto a ptop-price-index.css
 * e prezzotop-ci.css. Il file viene enqueue prima dello JS quindi le dimensioni
 * sono già riservate quando il parser arriva ai mount point.
 *
 * Versione: 1.0.0
 */

/* ─────────────────────────────────────────────
   1. MOUNT POINT — spazio riservato prima del JS
   Impedisce il layout shift quando il widget
   sostituisce il div vuoto con la card completa.
───────────────────────────────────────────── */
.ptop-ci-mount,
[data-ptop-ci="mount"] {
    min-height: 280px;

    /*
     * content-visibility: auto — il browser non renderizza il contenuto
     * finché non è vicino al viewport (lazy render nativo).
     * "auto 280px": il browser usa il valore misurato dopo il primo render
     * invece del fallback fisso, eliminando CLS residuo su mobile.
     */
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

/* ─────────────────────────────────────────────
   2. CARD PRINCIPALE — dimensione stabile
───────────────────────────────────────────── */
.ptop-ci-card {
    min-height: 260px;
    content-visibility: auto;
    contain-intrinsic-size: auto 260px;
}

/* ─────────────────────────────────────────────
   3. GAUGE — priorità render per LCP
   Il gauge è l'elemento visivo principale della card.
   will-change: background avvisa il browser di
   preparare un layer compositing, riducendo il
   tempo di paint iniziale.
───────────────────────────────────────────── */
.ptop-ci-gauge {
    will-change: background;
}

/* ─────────────────────────────────────────────
   4. REVIEW CARD — spazio riservato
───────────────────────────────────────────── */
.ptop-review-card {
    min-height: 120px;
    content-visibility: auto;
    contain-intrinsic-size: auto 120px;
}

/* ─────────────────────────────────────────────
   5. BANNER COMPATTO
───────────────────────────────────────────── */
.ptop-banner {
    min-height: 72px;
    content-visibility: auto;
    contain-intrinsic-size: auto 72px;
}

/* ─────────────────────────────────────────────
   6. FAQ — prevenzione reflow su apertura accordion
───────────────────────────────────────────── */
.prezzotop-faq-visual {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* ─────────────────────────────────────────────
   7. PRODOTTI CORRELATI
───────────────────────────────────────────── */
.ptop-related-products {
    content-visibility: auto;
    contain-intrinsic-size: auto 130px;
}

/* ─────────────────────────────────────────────
   8. BARRA DI PROGRESSO — transizione ottimizzata
   Usa transform invece di width per animare sul
   compositor thread (no reflow, no repaint).
   NOTA: richiede di aggiornare il JS per usare
   transform: scaleX() invece di width.
   Vedi commento in ptop-price-index.js.
───────────────────────────────────────────── */
.ptop-ci-bar span {
    transform-origin: left center;

    /*
     * Sostituisce la transizione su width con transform.
     * In ptop-price-index.js, invece di:
     *   mount.querySelector('.ptop-ci-bar span').style.width = score + '%';
     * usa:
     *   mount.querySelector('.ptop-ci-bar span').style.transform = 'scaleX(' + (score / 100) + ')';
     * e qui imposta width: 100% fisso.
     *
     * Attualmente lasciamo la compatibilità con il JS esistente,
     * ma se volete la massima performance abilitate la riga sotto
     * e aggiornate il JS.
     */
    /* width: 100% !important; */

    transition: transform 0.6s cubic-bezier(.4,0,.2,1),
                width     0.6s cubic-bezier(.4,0,.2,1); /* fallback */
}

/* ─────────────────────────────────────────────
   9. IMMAGINI DEI PRODOTTI CORRELATI
   loading="lazy" va già nel markup HTML,
   ma aspect-ratio evita il CLS durante il carico.
───────────────────────────────────────────── */
.ptop-related-products img,
.ptop-ci-card img {
    aspect-ratio: 1 / 1;
}

/* ─────────────────────────────────────────────
   10. PAGINE CATEGORIA — immagini stabili
───────────────────────────────────────────── */
.ptop-cat-page img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* ─────────────────────────────────────────────
   MEDIA: rispetta reduced-motion
   Le animazioni del gauge devono fermarsi se
   l'utente ha impostato prefers-reduced-motion.
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ptop-ci-bar span,
    .ptop-ci-gauge,
    .ptop-ci-gauge-score {
        transition: none !important;
        animation: none !important;
    }
}