/* Stili per il wrapper del video nel frontend */
.video-wrapper {
    position: relative;
    display: block; /* Assicura che si comporti come un elemento a livello di blocco */
    width: 100%; /* Assicura che occupi tutta la larghezza disponibile */
    padding-bottom: 56.25% !important; /* Mantiene un rapporto d'aspetto 16:9 (altezza = 56.25% della larghezza) */
    height: auto !important; /* Assicura che l'altezza sia determinata dal padding, sovrascrivendo qualsiasi altezza fissa */
    min-height: 0 !important; /* Sovrascrive qualsiasi potenziale min-height che potrebbe essere in conflitto */
    overflow: hidden;
    cursor: pointer; /* Indica che l'elemento è cliccabile */
    background: #000; /* Sfondo nero per il video */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombra leggera per profondità */
}

/* Stili per l'immagine di anteprima */
.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine copra l'area senza distorsioni */
    filter: grayscale(100%) !important; /* Forza la scala di grigi per l'anteprima */
    transition: filter 0.3s ease !important; /* Animazione fluida al passaggio del mouse */
}

/* Effetto hover sull'immagine di anteprima */
.video-thumbnail:hover {
    filter: grayscale(0%) !important; /* Rimuove la scala di grigi al passaggio del mouse */
}

/* Stili per l'iframe del video (quando il video è in riproduzione) */
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Stili specifici per la visualizzazione del blocco nell'editor di Gutenberg */
.video-wrapper-editor {
    border: 2px dashed #a0a0a0; /* Bordo tratteggiato per indicare l'area del blocco */
    padding: 25px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Spazio tra gli elementi interni */
    background-color: #f9f9f9; /* Sfondo leggero per l'editor */
    border-radius: 10px;
}

.video-wrapper-editor img {
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.video-wrapper-editor .components-button.is-primary {
    background-color: #007cba;
    color: white;
    border-radius: 5px;
    padding: 8px 15px;
}

.video-wrapper-editor .components-button.is-secondary {
    background-color: #e0e0e0;
    color: #333;
    border-radius: 5px;
    padding: 5px 10px;
}