/* ============================================================
   news-editor.css
   Stili per il layout delle immagini negli articoli.
   Caricato sia DENTRO TinyMCE (content_css) sia nel frontend.
   ============================================================ */

/* ------------------------------------------------------------
   Contenitore articolo: position:relative per ancorare le
   immagini absolute, min-height per non collassare quando il
   contenuto e' fatto solo di immagini absolute, overflow:visible
   per non tagliare le immagini.
   ------------------------------------------------------------ */
#article-content {
    position: relative;
    overflow: visible;
    min-height: 600px;   /* spazio minimo per immagini in drag libero */
}

/* ------------------------------------------------------------
   Filament — Pagina VIEW dell'articolo.
   Il pacchetto TinyEditor renderizza il contenuto in un <div>
   con x-html="state" e classe "prose". Senza position:relative
   e min-height, le immagini absolute escono dal contenitore.
   ------------------------------------------------------------ */
[x-html="state"].prose,
.fi-fo-field-wrp [x-html="state"] {
    position: relative;
    min-height: 600px;
    overflow: visible;
}

/* Lato editor: stessa logica.
   NB: NON forziamo background-color/color qui — lasciamo che il content_css
   "dark" nativo di TinyMCE gestisca il fondo scuro coerente con il suo skin.
   Le regole sotto migliorano solo la leggibilita' di elementi specifici. */
.mce-content-body {
    position: relative;
    overflow: visible;
    min-height: 500px;
}

/* Headings piu' chiare per contrasto */
.mce-content-body h1,
.mce-content-body h2,
.mce-content-body h3,
.mce-content-body h4,
.mce-content-body h5,
.mce-content-body h6 {
    color: rgb(243, 244, 246); /* gray-100 */
}

.mce-content-body a {
    color: rgb(96, 165, 250); /* blue-400 */
}

.mce-content-body blockquote {
    border-left: 3px solid rgb(75, 85, 99); /* gray-600 */
    color: rgb(209, 213, 219); /* gray-300 */
    padding-left: 1em;
}

.mce-content-body code,
.mce-content-body pre {
    background-color: rgb(17, 24, 39); /* gray-900 */
    color: rgb(243, 244, 246);
    border-radius: 4px;
    padding: 2px 6px;
}

.mce-content-body table {
    border-color: rgb(55, 65, 81); /* gray-700 */
}

#article-content img,
.mce-content-body img {
    height: auto;
}

/* ------------------------------------------------------------
   FLOAT — immagine a lato, testo che scorre attorno
   ------------------------------------------------------------ */
.news-img-left {
    float: left;
    margin: 0 16px 12px 0;
    max-width: 50%;
}

.news-img-right {
    float: right;
    margin: 0 0 12px 16px;
    max-width: 50%;
}

/* Clearfix dopo i float */
#article-content::after,
.mce-content-body::after {
    content: "";
    display: table;
    clear: both;
}

/* ------------------------------------------------------------
   CENTRATE — varie larghezze
   ------------------------------------------------------------ */
.news-img-center-large,
.news-img-center-medium,
.news-img-center-small,
.news-img-full {
    display: block;
    margin: 16px auto;
    clear: both;
}

.news-img-center-large  { max-width: 90%; }
.news-img-center-medium { max-width: 60%; }
.news-img-center-small  { max-width: 35%; }
.news-img-full          { max-width: 100%; width: 100%; }

/* ------------------------------------------------------------
   PICCOLA IN LINEA — icona/emoji inline col testo
   ------------------------------------------------------------ */
.news-img-inline-small {
    display: inline-block;
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin: 0 4px;
}

/* ------------------------------------------------------------
   DRAG LIBERO — immagine posizionata col mouse dall'editor.
   Lo style inline (top/left in px) viene scritto da TinyMCE.
   ------------------------------------------------------------ */
.news-img-free {
    position: absolute !important;
    z-index: 10;
    margin: 0 !important;
    float: none !important;
    max-width: none !important;
}

/* Nell'editor: bordo blu tratteggiato + cursore muovi */
.mce-content-body .news-img-free {
    cursor: move;
    outline: 2px dashed #3b82f6;
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   ANGOLI — posizione assoluta dentro #article-content
   ------------------------------------------------------------ */
.news-img-top-right    { position: absolute; top: 8px;    right: 8px;  max-width: 25%; z-index: 2; }
.news-img-top-left     { position: absolute; top: 8px;    left: 8px;   max-width: 25%; z-index: 2; }
.news-img-bottom-right { position: absolute; bottom: 8px; right: 8px;  max-width: 25%; z-index: 2; }
.news-img-bottom-left  { position: absolute; bottom: 8px; left: 8px;   max-width: 25%; z-index: 2; }

/* ------------------------------------------------------------
   WRAPPER RELATIVI — per ancorare gli "angoli" a una sezione
   ------------------------------------------------------------ */
.news-relative-box {
    position: relative;
    min-height: 400px;
    margin: 16px 0;
    overflow: hidden;
}

.news-relative-box-lg {
    position: relative;
    min-height: 600px;
    margin: 16px 0;
    overflow: hidden;
}

/* ------------------------------------------------------------
   TABELLE-GRIGLIA — per layout multi-colonna invisibile
   ------------------------------------------------------------ */
.news-grid-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    margin: 12px 0;
}

.news-grid-table td,
.news-grid-table th {
    border: 0;
    padding: 8px;
    vertical-align: top;
}

.news-table-bordered {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.news-table-bordered td,
.news-table-bordered th {
    border: 1px solid #d1d5db;
    padding: 8px;
}

/* ------------------------------------------------------------
   Hint visivi SOLO nell'editor (no impatto sul sito)
   ------------------------------------------------------------ */
.mce-content-body .news-relative-box,
.mce-content-body .news-relative-box-lg {
    outline: 1px dashed #9ca3af;
    outline-offset: -1px;
}

.mce-content-body .news-grid-table td {
    outline: 1px dashed #e5e7eb;
    outline-offset: -1px;
}