﻿.videos-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

    .videos-scroll::-webkit-scrollbar {
        display: none;
    }

.video-thumb img {
    transition: transform 0.4s ease, opacity 0.3s ease;
}

.video-thumb:hover img {
    transform: scale(1.08);
    opacity: 0.9;
}

.play-ico {
    transition: transform .25s ease, opacity .25s ease;
    opacity: .9;
}

.video-thumb:hover .play-ico {
    transform: scale(1.08);
    opacity: 1;
}

.free-prev[disabled],
.free-next[disabled],
.recent-prev[disabled],
.recent-next[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.popular-prev[disabled],
.popular-next[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.instructors-prev[disabled],
.instructors-next[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.mmlOffRibbon {
    background-color: transparent!important;
}

/* titolo cliccabile dei video */
.video-title-sm a:hover {
    opacity: .9;
}


.video-title-sm a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    filter: brightness(1.9);
}

/* card leggero highlight */
.videos-scroll .video-card {
    transition: transform .15s ease, box-shadow .15s ease;
}

    .videos-scroll .video-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,.35);
    }

/* view all: underline solo su hover */
.row .d-flex a[asp-action="Index"],
.row .d-flex a[asp-controller="Courses"],
.row .d-flex a[asp-controller="Live"],
.row .d-flex a[asp-controller="Instructors"] {
    text-decoration: none;
}

    .row .d-flex a[asp-action="Index"]:hover,
    .row .d-flex a[asp-controller="Courses"]:hover,
    .row .d-flex a[asp-controller="Live"]:hover,
    .row .d-flex a[asp-controller="Instructors"]:hover {
        text-decoration: underline;
    }


.view-all-link {
    text-decoration: none;
}

    .view-all-link:hover {
        text-decoration: underline!important;
    }

.video-card.is-filtered-out {
    display: none !important;
}

.video-card {
    transition: opacity .15s ease;
}

    .video-card.is-filtered-out {
        opacity: 0;
        pointer-events: none;
    }


.video-list-item {
    background: #111;
    border: 1px solid #222;
}

.video-current-desc {
    font-size: 14px;
    line-height: 1.4;
}

.related-thumb-link {
    position: relative;
    display: inline-block;
}

/* ----- CARD WRAPPER HOVER ----- */
.video-list-item {
    transition: background .25s, transform .25s;
}

    .video-list-item:hover {
        background: #181818;
    }

/* ----- THUMBNAIL IMAGE ----- */
.video-thumb-img {
    width: 260px;
    height: 150px;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    transition: transform .35s ease;
}

/* Zoom on hover */
.video-hover:hover .video-thumb-img {
    transform: scale(1.05);
}

/* ----- PLAY ICON ----- */
.play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: white;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
    opacity: 0.8;
}

.video-hover:hover .play-icon-overlay {
    opacity: 1;
}

/* ----- DURATION BADGE ----- */
.duration-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,.75);
    border-radius: 4px;
    font-size: 12px;
    padding: 3px 6px;
    color: #fff;
}

/* ----- TITLE HOVER EFFECT ----- */
.video-title-hover a h4 {
    transition: color .25s;
}

.video-title-hover a:hover h4 {
    color: #ff0381 !important; /* stesso highlight del resto del sito */
}


/* ─────────────────────────────── */
/*  FIX ALL VIDEOS + POPULAR VIDEOS (mobile)  */
/* ─────────────────────────────── */

@media (max-width: 768px) {

    /* la card deve diventare verticale */
    .video-list-item {
        display: block !important;
        padding: 1rem !important;
        text-align: left;
    }

        /* thumbnail full width */
        .video-list-item .thumb-wrap {
            width: 100% !important;
            flex: none !important;
            margin-bottom: 0.9rem;
        }

        .video-list-item img.video-thumb-img,
        .video-list-item img.video-current-thumb {
            width: 100% !important;
            height: auto !important;
            object-fit: cover;
            border-radius: 8px;
        }

        /* testo deve andare a capo e occupare tutta la linea */
        .video-list-item .flex-grow-1 {
            width: 100% !important;
            flex: none !important;
        }

    /* titolo leggibile */
    .video-title-hover,
    .video-current-item h6,
    .video-current-item h4 {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* descrizione fluida */
    .video-current-desc {
        white-space: normal !important;
        word-break: break-word !important;
        font-size: .9rem !important;
        line-height: 1.35 !important;
        margin-top: .3rem !important;
    }

    /* badge durata va sotto */
    .video-list-item .badge {
        position: static !important;
        margin-top: .4rem !important;
        display: inline-block !important;
    }
}
