/* ==============================================================
   article.css — Fix responsive contenuto articoli (post)
   --------------------------------------------------------------
   Problema: articoli "vecchi" importati hanno immagini legacy con
   attributi HTML align/border/hspace, width/height fissi in px e
   src talvolta rotti, senza vincolo max-width. Su mobile sfondano
   il contenitore e obbligano a fare zoom-out.

   Scope: contenuto articolo, sia via tema (.entry-content) sia via
   widget Elementor Pro (.elementor-widget-theme-post-content).
   NON tocca i template Elementor: agisce solo sul contenuto HTML.
   ============================================================== */

/* Alias comodo per i due contenitori del contenuto articolo. */
.entry-content,
.elementor-widget-theme-post-content .elementor-widget-container {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --------------------------------------------------------------
   IMMAGINI — vincolo responsive universale.
   Neutralizza width/height fissi (attributo O style inline)
   mantenendo le proporzioni. Le immagini piccole restano piccole
   (usiamo max-width, NON width), le grandi si rimpiccioliscono.
   !important mirato: gli articoli legacy hanno width/height nello
   style inline (che altrimenti vincerebbe sul CSS), es.
   style="width:2988px" -> senza !important sfonderebbe su mobile.
   -------------------------------------------------------------- */
.entry-content img,
.elementor-widget-theme-post-content img {
    max-width: 100% !important;
    height: auto !important;
}

/* --------------------------------------------------------------
   IMMAGINI ALLINEATE (legacy align="left"/"right" + classi WP
   alignleft/alignright). Su desktop mantengono il float storico;
   su mobile impilano a tutta larghezza per leggibilita'.
   -------------------------------------------------------------- */
.entry-content img[align="left"],
.entry-content img.alignleft,
.elementor-widget-theme-post-content img[align="left"],
.elementor-widget-theme-post-content img.alignleft {
    float: left;
    margin: 4px 18px 12px 0;
}
.entry-content img[align="right"],
.entry-content img.alignright,
.elementor-widget-theme-post-content img[align="right"],
.elementor-widget-theme-post-content img.alignright {
    float: right;
    margin: 4px 0 12px 18px;
}
.entry-content img.aligncenter,
.elementor-widget-theme-post-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------
   TABELLE / IFRAME / EMBED / VIDEO — responsivi per sicurezza,
   cosi nessun elemento largo sfonda il contenitore.
   -------------------------------------------------------------- */
.entry-content table,
.elementor-widget-theme-post-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.entry-content iframe,
.entry-content video,
.entry-content embed,
.entry-content object,
.elementor-widget-theme-post-content iframe,
.elementor-widget-theme-post-content video,
.elementor-widget-theme-post-content embed,
.elementor-widget-theme-post-content object {
    max-width: 100%;
}

/* --------------------------------------------------------------
   CAPTION — testo delle didascalie a capo, mai in overflow.
   -------------------------------------------------------------- */
.entry-content .wp-caption,
.elementor-widget-theme-post-content .wp-caption {
    max-width: 100%;
    box-sizing: border-box;
}
.entry-content .wp-caption-text,
.entry-content figcaption,
.elementor-widget-theme-post-content .wp-caption-text,
.elementor-widget-theme-post-content figcaption {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 8px 10px;
    margin: 0;
}

/* --------------------------------------------------------------
   MOBILE (<=782px, breakpoint standard WordPress).
   Le immagini allineate perdono il float e vanno a tutta
   larghezza, impilate sopra/sotto il testo.
   -------------------------------------------------------------- */
@media (max-width: 782px) {
    /* Impila TUTTE le immagini del contenuto su mobile: neutralizza
       sia il float da classe/attributo sia il float:left/right nello
       style inline legacy (serve !important per batterlo). */
    .entry-content img,
    .elementor-widget-theme-post-content img {
        float: none !important;
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}