/* =========================================================
   SoftVide - Video Cards
   File: assets/css/video-card.css
   ========================================================= */


/* ---------- Video Card ---------- */

.video-card {
    width: 100%;
    min-width: 0;

    color: var(--sv-text);
}


/* ---------- Thumbnail ---------- */

.video-thumbnail {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: var(--sv-radius-medium);

    background: #222;
}


/* ---------- Thumbnail Placeholder ---------- */

.thumbnail-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #202020 0%,
            #303030 50%,
            #1a1a1a 100%
        );

    color: #777;

    font-size: 28px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ---------- Real Thumbnail ---------- */

.video-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.25s ease;
}

.video-card:hover .video-thumbnail img {
    transform: scale(1.03);
}


/* ---------- Video Duration ---------- */

.video-duration {
    position: absolute;

    right: 8px;
    bottom: 8px;

    padding: 3px 6px;

    border-radius: 4px;

    background: rgba(0, 0, 0, 0.85);
    color: #fff;

    font-size: 12px;
    font-weight: 600;

    line-height: 1.2;
}


/* ---------- Video Information ---------- */

.video-info {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    padding-top: 12px;
}


/* ---------- Channel Avatar ---------- */

.channel-avatar {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--sv-surface-hover);
    color: var(--sv-text);

    font-size: 14px;
    font-weight: 700;

    overflow: hidden;
}

.channel-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ---------- Video Meta ---------- */

.video-meta {
    flex: 1;

    min-width: 0;
}


/* ---------- Video Title ---------- */

.video-meta h2 {
    display: -webkit-box;

    margin: 0 0 5px;

    overflow: hidden;

    color: var(--sv-text);

    font-size: 15px;
    font-weight: 600;

    line-height: 1.35;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* ---------- Channel Name ---------- */

.channel-name {
    margin: 0 0 2px;

    color: var(--sv-text-secondary);

    font-size: 13px;

    line-height: 1.4;
}


/* ---------- Video Stats ---------- */

.video-stats {
    margin: 0;

    color: var(--sv-text-secondary);

    font-size: 13px;

    line-height: 1.4;
}


/* ---------- Placeholder Card ---------- */

.placeholder-card {
    cursor: default;
}


/* ---------- Card Hover ---------- */

.video-card {
    transition:
        opacity 0.15s ease;
}

.video-card:hover {
    opacity: 0.96;
}


/* ---------- Mobile ---------- */

@media (max-width: 700px) {

    .video-info {
        gap: 10px;

        padding-top: 10px;
    }

    .channel-avatar {
        flex-basis: 34px;

        width: 34px;
        height: 34px;
    }

    .video-meta h2 {
        font-size: 14px;
    }

    .channel-name,
    .video-stats {
        font-size: 12px;
    }

}