/* --- CONTAINER PRINCIPALE --- */
.elaboranext-video-container {
    width: 100%;
    margin-bottom: 1.5rem;
}

/* --- LINK TRIGGER (Avvolge tutto ed è cliccabile per il modale) --- */
.elaboranext-video-item {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    text-decoration: none; /* Rimuove sottolineatura dal titolo */
    transition: all 0.3s ease;
}

/* --- WRAPPER MINIATURA (Gestisce il ritaglio e il rapporto 16:9) --- */
.video-thumb-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Rapporto standard video */
    overflow: hidden;    /* Fondamentale: nasconde le bande nere scalate */
    background-color: #000;
    border-radius: 8px;
    margin-bottom: 15px;
}

.video-thumb-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    
    /* TRUCCO RIMOZIONE BANDE: 
       Ingrandiamo l'immagine del 20% in modo che le bande nere 
       (sopra e sotto) finiscano oltre i bordi del wrapper. */
    transform: scale(1.2); 
    
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Effetto Hover sull'immagine (già scalata) */
.elaboranext-video-item:hover img {
    transform: scale(1.3); /* Un ulteriore leggero zoom */
}

/* --- ICONA PLAY --- */
.video-thumb-wrapper .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background: url('https://cdn.jsdelivr.net/npm/simple-icons@v9/icons/youtube.svg') no-repeat center center;
    background-size: contain;
    
    /* FILTRO PER IL ROSSO YOUTUBE */
    filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
    
    opacity: 0.9;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.elaboranext-video-item:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

/* --- TITOLO DEL VIDEO --- */
.video-title {
       
    /* Limita il titolo a 2 righe con tre puntini (...) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- LAYOUT GRID: MOBILE (DEFAULT) --- */
.video-home-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.video-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* --- LAYOUT GRID: DESKTOP (>= 1025px) --- */
@media (min-width: 1025px) {
    .video-home-grid {
        display: block;
    }

    .video-main {
        width: 100%;
        margin-bottom: 3rem;
    }

    .video-sidebar {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 colonne uguali */
        gap: 2rem;
        align-items: start;
    }
    
    .video-secondary .video-title {
        font-size: 1rem;
    }

    div.video-secondary h3.recent-post-title {
        font-size: 1rem;
    }
}