/* ==========================================================
   YouAndYou TV v2.0 RC2
   Cards CSS
   Production Ready
==========================================================*/


/* ===================================
   COMMON CARD
=================================== */

.card{

    background:var(--card);

    border-radius:18px;

    overflow:hidden;

    transition:var(--transition);

    border:1px solid transparent;

}

.card:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    background:var(--card-hover);

    box-shadow:var(--shadow);

}


/* ===================================
   VIDEO CARD
=================================== */

.video-card{

    display:flex;

    flex-direction:column;

}

.video-thumbnail{

    position:relative;

    overflow:hidden;

    aspect-ratio:16/9;

    background:#000;

}

.video-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.video-card:hover .video-thumbnail img{

    transform:scale(1.05);

}

.video-duration{

    position:absolute;

    right:10px;

    bottom:10px;

    background:rgba(0,0,0,.8);

    color:#fff;

    padding:4px 8px;

    border-radius:6px;

    font-size:12px;

    font-weight:600;

}


/* ===================================
   CARD BODY
=================================== */

.card-body{

    padding:16px;

}

.card-title{

    font-size:17px;

    font-weight:700;

    color:#fff;

    line-height:1.4;

    margin-bottom:10px;

}

.card-title:hover{

    color:var(--secondary);

}

.card-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    color:var(--text-muted);

    font-size:14px;

}


/* ===================================
   LIVE CARD
=================================== */

.live-card{

    position:relative;

}

.live-card::before{

    content:"LIVE";

    position:absolute;

    top:12px;

    left:12px;

    background:var(--primary);

    color:#fff;

    font-size:12px;

    font-weight:700;

    padding:5px 10px;

    border-radius:999px;

    z-index:5;

}


/* ===================================
   CHANNEL CARD
=================================== */

.channel-card{

    text-align:center;

    padding:24px;

}

.channel-avatar{

    width:90px;

    height:90px;

    border-radius:50%;

    object-fit:cover;

    margin:auto;

    border:3px solid var(--secondary);

}

.channel-name{

    margin-top:18px;

    font-size:20px;

    font-weight:700;

}

.channel-subs{

    margin-top:6px;

    color:var(--text-muted);

}


/* ===================================
   SHORTS CARD
=================================== */

.short-card{

    width:220px;

    flex-shrink:0;

}

.short-thumbnail{

    position:relative;

    aspect-ratio:9/16;

    overflow:hidden;

    border-radius:18px;

}

.short-thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.3s;

}

.short-card:hover img{

    transform:scale(1.06);

}

.short-title{

    margin-top:12px;

    font-size:15px;

    font-weight:600;

}


/* ===================================
   FEATURED CHANNEL
=================================== */

.featured-channel{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px;

}

.featured-channel img{

    width:68px;

    height:68px;

    border-radius:50%;

    object-fit:cover;

}

.featured-channel h4{

    font-size:18px;

    margin-bottom:5px;

}

.featured-channel p{

    font-size:14px;

}


/* ===================================
   TRENDING
=================================== */

.trending-card{

    display:flex;

    gap:16px;

}

.trending-thumb{

    width:180px;

    flex-shrink:0;

    border-radius:14px;

    overflow:hidden;

}

.trending-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.trending-info{

    display:flex;

    flex-direction:column;

    justify-content:center;

}


/* ===================================
   WATCH PROGRESS
=================================== */

.watch-progress{

    width:100%;

    height:4px;

    background:#333;

    margin-top:12px;

    border-radius:999px;

    overflow:hidden;

}

.watch-progress span{

    display:block;

    height:100%;

    width:40%;

    background:var(--primary);

}


/* ===================================
   BADGES
=================================== */

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.badge-live{

    background:var(--primary);

    color:#fff;

}

.badge-new{

    background:var(--success);

    color:#fff;

}

.badge-premium{

    background:var(--warning);

    color:#000;

}


/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1200px){

.short-card{

width:190px;

}

}

@media(max-width:992px){

.trending-card{

flex-direction:column;

}

.trending-thumb{

width:100%;

}

}

@media(max-width:768px){

.channel-avatar{

width:72px;

height:72px;

}

.channel-name{

font-size:18px;

}

.card-title{

font-size:16px;

}

.short-card{

width:170px;

}

.featured-channel{

padding:14px;

}

}

@media(max-width:480px){

.card-body{

padding:14px;

}

.card-title{

font-size:15px;

}

.short-card{

width:150px;

}

}