/* Blocca il contenuto del blocco alla larghezza e altezza della finestra nel frontend */
.block-image-video-carousel-full {
    position: relative;
    width: 100%; /* Larghezza piena della finestra */
    height: clamp( 100px, 54vw, 200px ); /* Altezza piena della finestra */
    overflow: hidden; /* Assicura che nulla esca fuori dalla view */
}
.block-image-video-carousel-full .owl-item,
.block-image-video-carousel-full .owl-item .item {
    width: 100%;
    height: clamp( 100px, 54vw, 400px );
}
.block-image-video-carousel-full .owl-item .bg-image picture,
.block-image-video-carousel-full .owl-item .bg-image figure {
    width: 100%;
    height: clamp( 100px, 54vw, 400px );
    position: relative;
    overflow: hidden;
    display: block;
}


html body:not(.wp-admin) .block-image-video-carousel-full,
html body:not(.wp-admin) .block-image-video-carousel-full .owl-item,
html body:not(.wp-admin) .block-image-video-carousel-full .owl-item .item,
html body:not(.wp-admin) .block-image-video-carousel-full .owl-item .bg-image picture,
html body:not(.wp-admin) .block-image-video-carousel-full .owl-item .bg-image figure {
    height: 100vh;
}


.block-image-video-carousel-full .owl-item .bg-image picture source,
.block-image-video-carousel-full .owl-item .bg-image figure source,
.block-image-video-carousel-full .owl-item .bg-image picture img,
.block-image-video-carousel-full .owl-item .bg-image figure img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: auto;
}

.bg-image.mobile {
    display: none !important;
}

/* Gestione di immagini e video, devono coprire tutta l'area */
.block-image-video-carousel-full .bg-image,
.block-image-video-carousel-full .container-video iframe,
.block-image-video-carousel-full .container-video video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* L'immagine o il video coprono l'area senza deformarsi */
    z-index: -1; /* In modo che i contenuti testuali siano sopra */
}

/* Centra i testi sopra immagine o video */
.block-image-video-carousel-full .item-info {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Testi in bianco */
    z-index: 1; /* Assicura che il testo sia sopra l'immagine/video */
    padding: clamp(22px, 6vw);
}

/* Font dinamico per titoli e sottotitoli */
.block-image-video-carousel-full .item-info .title-1,
.block-image-video-carousel-full .item-info .sub-title {
    margin: 0;
    color: white;
}

.block-image-video-carousel-full .item-info .title-1 {
    font-size: clamp(38px, 6vw, 80px); /* Font-size dinamico */
    line-height: 1;
}

.block-image-video-carousel-full .item-info .sub-title {
    font-size: clamp(20px, 4vw, 24px); /* Font-size dinamico per il sottotitolo */
    margin-top: 10px;
    line-height: 1;
}

/* Posizionamento dei bottoni */
.block-image-video-carousel-full .item-info-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2; /* In modo che i bottoni siano sopra */
}

.block-image-video-carousel-full .item-info-btn .btn-white {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 12px 20px;
    text-transform: uppercase;
    font-size: clamp(14px, 3vw, 22px);
    display: inline-block;
    margin: 5px;
    text-decoration: none;
}

.block-image-video-carousel-full .item-info-btn .btn-white svg {
    margin-left: 10px;
    vertical-align: middle;
}

/* Aggiungere responsività se necessaria */
@media (max-width: 768px) {
    .block-image-video-carousel-full .item-info .title-1 {
        font-size: clamp(18px, 8vw, 60px); /* Ridurre il font-size su schermi piccoli */
    }
    .block-image-video-carousel-full .item-info .sub-title {
        font-size: clamp(14px, 6vw, 40px); /* Ridurre il sottotitolo */
    }
}

/* Backend modifiche per adattare il contenitore */
body.wp-admin .block-image-video-carousel-full {
    width: 100%; /* Usa la larghezza completa nel backend */
    height: auto; /* Mantieni l'altezza in modo che non esca dal contenitore */
}

/* Disabilita i link nel backend */
body.wp-admin .block-image-video-carousel-full a {
    pointer-events: none; /* Disabilita i clic sui link in admin */
    color: #999; /* Colore dei link disabilitati */
}



/* Stile del pulsante */
.block-editor-block-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#expand-sidebar-btn {
    background-color: #0073aa;
    color: white;
    border: none;
    padding: 6px 16px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
    width: 100%;
}

#expand-sidebar-btn:hover {
    background-color: #005177;
}

/* Stile della sidebar */
#post-body .wrap {
    transition: all 0.3s ease-in-out;
}

/* Stile per la sidebar allargata */
.interface-interface-skeleton__sidebar.sidebar-expanded {
    width: 70%; /* La sidebar occupa l'80% della larghezza */
}
.interface-interface-skeleton__sidebar.sidebar-expanded > *,
.interface-interface-skeleton__sidebar.sidebar-expanded > * > * {
    width: 100% !important;
}

/* Stile per la sidebar ridotta */
.interface-interface-skeleton__sidebar.sidebar-normal {
    width: auto; /* Impostazione iniziale della larghezza */
}