/* 
 * Stili per il blocco MultiLayer Image and Text
 * Version: 1.0.0
 * Ultimo aggiornamento: Test modifica
 */

/* Stili per l'editor */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block {
    position: relative;
    padding: 20px 20px 0 20px; /* 20px top, 20px right, 0 bottom, 20px left */
    background-color: transparent !important; /* Forza trasparente in editor */
}

/* Background nel editor per fixed-width */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    background-color: var(--container-background-color) !important;
}

/* Regola specifica per l'editor */
.editor-styles-wrapper [data-fit-mode="free"] {
    top: var(--layer-top-calc) !important;
    /* Aggiunta trasformazione per centratura vera quando necessario */
    transform: var(--layer-transform, none) !important;
}

/* Stili comuni per editor e front-end */
.wp-block-nick-digital-plugins-multilayer-image-text-block {
    position: relative !important;
    box-sizing: border-box !important;
    margin: 0 auto !important; /* Auto per centrare quando è a larghezza fissa */
    overflow: visible !important;
    background-color: var(--general-background-color, transparent) !important;
    transition: background-color 0.01s; /* Forza reflow */
    will-change: background-color; /* Forza il browser a tenere traccia dello stile */
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important; /* Tornato a hidden per impedire che gli elementi escano dal contenitore */
    display: block !important;
    box-sizing: border-box !important;
    /* Rimosse le proprietà di trasformazione 3D che causavano la discrepanza */
    /* transform-style: preserve-3d !important;
    perspective: 1000px !important; */
    /* Supporto per il tema corrente */
    border-radius: var(--wp--custom--border-radius, 0) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .layers-wrapper {
    position: absolute !important;
     top: 0 !important; 
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden !important;
}

/* Allineamento frontend MultiLayer */
.wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-align-wrapper {
    display: flex;
    width: 100%;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="right"] .multi-layer-align-wrapper {
    justify-content: flex-end;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="center"] .multi-layer-align-wrapper {
    justify-content: center;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-alignment="left"] .multi-layer-align-wrapper {
    justify-content: flex-start;
}

/* Base layer styles */
.wp-block-nick-digital-plugins-multilayer-image-layer {
    grid-area: 1/1 !important;
    align-self: start !important;
    justify-self: start !important;
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer {
    grid-area: 1/1 !important;
    align-self: start !important;
    justify-self: start !important;
    position: absolute !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* Non-free fit mode */
.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]) {
    /* width: 100% !important; */
    height: 100% !important;
    overflow: hidden !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer:not([data-fit-mode="free"]) {
    /* width: 100% !important; */
    height: auto !important;
    /* top: 0 !important; */
    /* left: 0 !important; */
    overflow: hidden !important;
    max-height: 100%;
    /* Il testo in eccesso verrà semplicemente nascosto, senza ellissi multilinea */
    white-space: pre-wrap;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]) img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img {
    transform: translate(var(--x-pos, 0), var(--y-pos, 0)) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img[style*="cover"],
.wp-block-nick-digital-plugins-multilayer-image-layer:not([data-fit-mode="free"]):not([data-is-svg="true"]) img[style*="fill"] {
    object-position: center !important;
}

/* Free fit mode */
.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] {
    overflow: visible !important;
    position: absolute !important;
    /* Utilizziamo le variabili CSS per dimensioni e posizionamento */
    width: var(--layer-width) !important;
    height: var(--layer-height) !important;
    left: var(--layer-left) !important;
    top: var(--layer-top) !important;
    transform: none !important; /* Previene trasformazioni indesiderate */
}

.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] img,
.wp-block-nick-digital-plugins-multilayer-image-layer[data-fit-mode="free"] .mlitb-text-layer-content {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    max-width: none !important;
    max-height: none !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block .button-container {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

/* Supporto per allineamenti */
.wp-block-nick-digital-plugins-multilayer-image-text-block.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.alignwide {
    width: calc(100% + 4rem) !important;
    max-width: calc(100% + 4rem) !important;
    margin-left: -2rem !important;
    margin-right: -2rem !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-left {
    float: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right {
    float: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Gestione del colore di sfondo */


/* Applica il colore di sfondo anche in modalità FIXED */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"]:not(.has-background) .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
    width: 100% !important;
}

/* Modalità FULL WIDTH: solo se non c'è la palette */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
    position: relative;
}

/* Modalità FIXED: solo se non c'è la palette */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
}


/* Permetti a WordPress di gestire il colore della palette in full width 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"].has-background {
    background-color: unset !important;
} */

/* Applica il colore tramite variabile CSS solo se NON c'è la palette di WordPress */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"]:not(.has-background) {
    background-color: var(--general-background-color, transparent) !important;
    position: relative;
}

/* Assicura che il container interno erediti il colore */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] .multi-layer-container {
    background-color: inherit !important;
}

/* Stile specifico per l'editor */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] {
    background-color: var(--general-background-color, transparent) !important;
}

/* Rimuove eventuali sfondi bianchi sovrapposti */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="full"] > div:not(.multi-layer-container) {
    background-color: transparent !important;
}



/* Applica il colore di sfondo anche al fixed-bg-layer e overlay, usando la variabile CSS */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer,
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .bg-overlay-element {
    background-color: var(--container-background-color, transparent) !important;
}
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer[style],
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .bg-overlay-element[style] {
    background-color: var(--container-background-color, transparent) !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    width: 100% !important;
    min-height: var(--container-height, 400px);
    box-sizing: border-box;
}



.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer {
    background-color: var(--container-background-color, transparent) !important;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 780px) {
    .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container .fixed-bg-layer {
        display: none !important;
    }
}

/* Nuova regola per applicare il colore di sfondo tramite variabile CSS */

/* Wrapper flex per frontend */
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-left,
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center,
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right {
    display: flex !important;
    justify-content: flex-start;
    float: none !important;
    margin: 0 auto !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center {
    justify-content: center !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right {
    justify-content: flex-end !important;
}



/* Regole specifiche per i diversi allineamenti */
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-left .multi-layer-container,
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center .multi-layer-container,
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right .multi-layer-container {
    width: 100% !important;
}

/* Forza il colore di sfondo anche per align-center e align-right in modalità fixed */
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-center[data-width-mode="fixed"] .multi-layer-container,
.wp-block-nick-digital-plugins-multilayer-image-text-block.align-right[data-width-mode="fixed"] .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* Fix per blocchi fixed-width con allineamento che causano problemi con i contenitori */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"].align-left,
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"].align-right {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Usiamo un approccio di posizionamento più semplice invece di flexbox */
    display: block !important; /* Cambiato da flex a block */
    width: auto !important;
    max-width: 100% !important;
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"].align-left {
    margin-right: auto !important; /* Allinea a sinistra */
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"].align-right {
    margin-left: auto !important; /* Allinea a destra */
    margin-right: 0 !important; /* Assicura che sia allineato all'estremità destra */
}

.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"].align-center {
    margin-left: auto !important; /* Allinea al centro */
    margin-right: auto !important;
}

/* Assicuriamoci che il blocco fixed-width rispetti sempre i confini del suo contenitore ma non si espanda */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    box-sizing: border-box !important;
    overflow: visible !important; /* Permette ai contenuti di essere visibili */
    pointer-events: auto !important; /* Garantisce che gli eventi mouse funzionino */
}

/* Fix per assicurarsi che il contenitore interno mantenga la larghezza specificata */

/* OVERRIDE DEFINITIVO: il container principale è SEMPRE trasparente in modalità fixed */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    background-color: transparent !important;
    width: var(--fixed-width, 500px) !important; /* Usa la larghezza specificata */
    display: block !important;
    box-sizing: border-box !important;
}
/* Wrapper esterno SEMPRE trasparente in fixed */


/* Supporto responsive per colonne e gruppi */
@media (max-width: 781px) {
    .wp-block-column .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
        padding-bottom: 50% !important; /* Aspect ratio 1:1 */
    }
}

@media (max-width: 599px) {
    .wp-block-column .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
        padding-bottom: 50% !important; /* Aspect ratio 1:1 */
    }
    .wp-block-nick-digital-plugins-multilayer-image-text-block.alignwide,
    .wp-block-nick-digital-plugins-multilayer-image-text-block.alignfull {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Editor specific styles */
.wp-block-nick-digital-plugins-multilayer-image-text-block .components-placeholder {
    min-height: 200px !important;
    background: transparent !important;
}

/* Supporto per il tema corrente nei pulsanti */
.wp-block-nick-digital-plugins-multilayer-image-text-block .components-button {
    background: var(--wp--preset--color--background, #fff) !important;
    color: var(--wp--preset--color--foreground, #000) !important;
    border-color: var(--wp--preset--color--foreground, #000) !important;
}

/* === OVERRIDE FINALE PER L'EDITOR === */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[class*="has-"] {
    background-color: transparent !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* 
 * FIX: Altezza layer assoluti (es: .fixed-bg-layer) in editor Gutenberg
 * In editor (WordPress/Gutenberg), i layer assoluti vuoti possono collassare a height: 0
 * anche se il contenitore ha height > 0, a causa di override o rendering React.
 * Questa regola forza il layer a riempire il parent SOLO in editor, senza effetti collaterali in frontend.
 * Da riutilizzare per ogni blocco con layer assoluti che deve essere visibile in editor!
 */

.editor-styles-wrapper .fixed-bg-layer {
    height: 100% !important;
    min-height: 1px !important;
}

.editor-styles-wrapper 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] 
.multi-layer-container 
.fixed-bg-layer {
    background-color: var(--container-background-color, transparent) !important;
    height: 100% !important;
    min-height: 1px !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.editor-styles-wrapper 
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] 
.multi-layer-container {
    width: var(--container-width, 500px) !important;
    max-width: 100% !important;
    position: relative !important;
}

.editor-styles-wrapper .fixed-bg-layer {
    width: 100% !important;
    min-width: 1px !important;
    height: 100% !important;
    min-height: 1px !important;
}

/* Allineamento blocco multilayer in editor Gutenberg */
/* Allineamento del wrapper interno in editor Gutenberg */
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    margin-left: auto !important;
    margin-right: auto !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    margin-left: auto !important;
    margin-right: 0 !important;
}
.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-align-wrapper {
    width: fit-content !important;
    max-width: 100% !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] {
    width: 100% !important;
    /* display: block !important; */
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    align-self: center !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    align-self: flex-end !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    align-self: flex-start !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="center"] .multi-layer-align-wrapper {
    text-align: center !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="right"] .multi-layer-align-wrapper {
    text-align: right !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"][data-alignment="left"] .multi-layer-align-wrapper {
    text-align: left !important;
}

.editor-styles-wrapper .wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    display: block !important;
    width: var(--container-width, 400px);
    margin-left: auto;
    margin-right: auto;
}

/* Forza il colore di sfondo del container SOLO in editor */
.editor-styles-wrapper .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

/* Forza il colore custom del blocco in modalità fixed anche in presenza di colore wrapper Gutenberg (solo frontend) */
.wp-block-nick-digital-plugins-multilayer-image-text-block[data-width-mode="fixed"] .multi-layer-container {
    background-color: var(--container-background-color, transparent) !important;
}

.wp-block-nick-digital-plugins-multilayer-text-layer,
.wp-block-nick-digital-plugins-multilayer-text-layer > div {
    box-sizing: border-box;
    word-break: break-word;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    overflow: hidden;
}

/* Outline tratteggiato solo in editor Gutenberg */
.block-editor-block-list__block .wp-block-nick-digital-plugins-multilayer-text-layer > div {
    outline: 2px dashed #007cba;
    outline-offset: -2px;
}

/* Nessun outline in frontend */
.wp-block-nick-digital-plugins-multilayer-text-layer > div {
    outline: none;
}