/* =============================================================
   cms-2col.css
   Task #90 - Blocco "2 colonne" (cms-2col) - stili editor + pubblici.

   Regole editor (dentro .note-editable) e pubbliche (dentro .cms-body)
   sono nello stesso file per portabilita'. Le regole editor mostrano
   toolbar/helper visibili, quelle pubbliche li nascondono.
   ============================================================= */

/* ─── STILI COMUNI (editor + pubblico) ────────────────── */
.cms-2col {
    margin: 2rem 0;
    padding: 0;
    border-radius: 0;
    /* nessun background di default: se l'operatore lo imposta,
       lo style inline con !important vince */
}
.cms-2col-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: start;
}
.cms-2col-col {
    padding: 0;
    border-radius: 0;
    min-width: 0; /* previene overflow su immagini larghe */
}
/* Padding interno SOLO sul contenuto di testo. Le immagini escono
   dal padding con margin negativi cosi' restano a filo con il bordo
   della colonna (immagini "bleed"). Uso :has() (supportato in tutti
   i browser evergreen da fine 2023). */
.cms-2col-content {
    padding: 1.25rem;
}
.cms-2col-content > :first-child { margin-top: 0; }
.cms-2col-content > :last-child { margin-bottom: 0; }
.cms-2col-content > p { margin: 0 0 1rem 0; }
.cms-2col-content > p:last-child { margin-bottom: 0; }
/* Paragrafo "solo immagine" (classe iniettata dal JS): fa "bleed"
   fuori dal padding cosi' l'immagine va a filo con TUTTI i bordi colonna. */
.cms-2col-content > p.cms-2col-img {
    margin: 0 -1.25rem;
    padding: 0;
}
/* Se l'immagine e' il PRIMO/ULTIMO elemento, esce anche dal padding
   verticale del content (top/bottom a filo). */
.cms-2col-content > p.cms-2col-img:first-child { margin-top: -1.25rem; }
.cms-2col-content > p.cms-2col-img:last-child  { margin-bottom: -1.25rem; }
.cms-2col-content > p.cms-2col-img + * { margin-top: 1.25rem; }
/* Fallback :has() per contenuti legacy senza classe */
.cms-2col-content > p:has(> img),
.cms-2col-content > p:has(> a > img) {
    margin: 0 -1.25rem;
    padding: 0;
}
.cms-2col-content > p:has(> img):first-child,
.cms-2col-content > p:has(> a > img):first-child { margin-top: -1.25rem; }
.cms-2col-content > p:has(> img):last-child,
.cms-2col-content > p:has(> a > img):last-child  { margin-bottom: -1.25rem; }
.cms-2col-content img {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.cms-2col-content p.cms-2col-img { line-height: 0; }

@media (max-width: 768px) {
    .cms-2col-body {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ─── STILI SOLO EDITOR ──────────────────────────────── */
.note-editable .cms-2col {
    position: relative;
    padding-top: 42px; /* spazio per la toolbar in alto */
    border: 1.5px dashed #adb5bd;
    background: rgba(248, 249, 250, .5);
}
.note-editable .cms-2col-col {
    border: 1px dotted #ced4da;
    background: #fff;
    min-height: 100px;
    position: relative;
}
/* Se il blocco ha bg custom, le colonne diventano trasparenti
   per lasciar vedere il colore scelto attraverso il gap. */
.note-editable .cms-2col[style*="background-color"] .cms-2col-col:not([style*="background-color"]) {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
}

/* Toolbar in alto (helper editor) */
.note-editable .cms-2col-toolbar {
    position: absolute;
    top: 6px; left: 6px; right: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: #212529;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: .75rem;
    z-index: 5;
}
.note-editable .cms-2col-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #ffc107;
}
.note-editable .cms-2col-toolbar-btns {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

/* Tools per-colonna (in fondo alla colonna) */
.note-editable .cms-2col-tools {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .75rem;
    padding-top: .5rem;
    border-top: 1px dashed #ced4da;
}

/* Pulsanti helper (comune) */
.note-editable .cms-2col-btn {
    background: #fff;
    border: 1px solid #0d6efd;
    color: #0d6efd;
    padding: .25rem .6rem;
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.2;
    transition: background .15s, color .15s, border-color .15s;
    font-family: inherit;
}
.note-editable .cms-2col-btn:hover {
    background: #0d6efd;
    color: #fff;
}
.note-editable .cms-2col-btn i { margin-right: .25rem; }
/* Pulsanti in toolbar (fondo scuro) - stile scuro */
.note-editable .cms-2col-toolbar .cms-2col-btn {
    background: transparent;
    border-color: rgba(255,255,255,.4);
    color: #fff;
    padding: .2rem .5rem;
}
.note-editable .cms-2col-toolbar .cms-2col-btn:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}
.note-editable .cms-2col-toolbar .cms-2col-remove {
    border-color: rgba(220,53,69,.7);
    color: #ffb3ba;
}
.note-editable .cms-2col-toolbar .cms-2col-remove:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}
/* Reset in rosso */
.note-editable .cms-2col-bg-reset,
.note-editable .cms-2col-col-bg-reset {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}
.note-editable .cms-2col-bg-reset:hover,
.note-editable .cms-2col-col-bg-reset:hover {
    background: #dc3545 !important;
    color: #fff !important;
}
.note-editable .cms-2col-toolbar .cms-2col-bg-reset {
    border-color: rgba(255,180,180,.6) !important;
    color: #ffb3ba !important;
}

/* Feedback visivo: immagini con link */
.note-editable .cms-2col-content img { cursor: zoom-in; }
.note-editable .cms-2col-content a > img {
    outline: 2px dashed rgba(13,110,253,.4);
    outline-offset: 2px;
}

/* Placeholder .cms-2col-content vuoto (visivo) */
.note-editable .cms-2col-content:empty::before {
    content: 'Colonna vuota';
    color: #adb5bd;
    font-style: italic;
    font-size: .85rem;
}

/* ─── STILI SOLO PUBBLICO ────────────────────────────── */
.cms-body .cms-2col-toolbar,
.cms-body .cms-2col-tools {
    display: none;
}

/* ─── Task #91: Full-width (schermo intero) ───────────
   Tecnica full-bleed: il blocco esce dal container centrato e prende
   100vw. Funziona quando il container ha margin-left/right auto (come
   .cms-body { max-width: 900px; margin: 0 auto }). */
.cms-body .cms-2col.cms-2col-full {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Previene scrollbar orizzontale su schermi con scrollbar verticale
       visibile: alcuni browser contano 100vw includendo la scrollbar. */
}
/* Segnale visivo in editor (senza spingere davvero a 100vw: rompe il
   layout del pannello Summernote). Il badge sulla toolbar diventa
   arancione e il blocco riceve un outline distinguibile. */
.note-editable .cms-2col.cms-2col-full {
    outline: 3px solid #fd7e14;
    outline-offset: -3px;
}
.note-editable .cms-2col-fullwidth.active {
    background: #fd7e14 !important;
    border-color: #fd7e14 !important;
    color: #fff !important;
}
.note-editable .cms-2col.cms-2col-full .cms-2col-label::after {
    content: ' · FULL WIDTH';
    color: #fd7e14;
    font-weight: 700;
}