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


/* ==========================================================
   4K / ULTRA WIDE
========================================================== */

@media (min-width:1921px){

:root{

    --container:1850px;

}

.content-area{

    padding:35px;

}

.hero-live{

    gap:30px;

}

.auto-grid{

    grid-template-columns:
    repeat(auto-fill,minmax(360px,1fr));

}

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width:1600px){

.content-area{

    padding:24px;

}

.hero-live{

    gap:24px;

}

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1400px){

.grid-5{

    grid-template-columns:
    repeat(4,1fr);

}

.auto-grid{

    grid-template-columns:
    repeat(auto-fill,minmax(300px,1fr));

}

.hero-live{

    grid-template-columns:
    60px
    minmax(0,2fr)
    330px
    60px;

}

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

.content-area{

    margin-left:var(--sidebar-mini);

}

.sidebar{

    width:var(--sidebar-mini);

}

.sidebar .label{

    display:none;

}

.sidebar .sidebar-logo span{

    display:none;

}

.sidebar:hover{

    width:var(--sidebar-width);

}

.sidebar:hover .label{

    display:block;

}

.sidebar:hover .sidebar-logo span{

    display:block;

}

.hero-live{

    grid-template-columns:
    50px
    1fr
    300px
    50px;

}

.carousel-btn{

    min-height:420px;

}

.section-title{

    font-size:24px;

}

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:992px){

.content-area{

    margin-left:0;

    padding:18px;

}

.sidebar{

    width:280px;

    transform:translateX(-100%);

}

.sidebar.show{

    transform:translateX(0);

}

.sidebar .label{

    display:block;

}

.sidebar .sidebar-logo span{

    display:block;

}

.sidebar:hover{

    width:280px;

}

.hero-live{

    grid-template-columns:1fr;

    gap:20px;

}

.carousel-btn{

    display:none;

}

.live-info{

    padding:22px;

}

.grid-4,
.grid-5{

    grid-template-columns:
    repeat(2,1fr);

}

.auto-grid{

    grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));

}

.header-search{

    max-width:420px;

}

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

.content-area{

    padding:15px;

}

.header-search{

    display:none;

}

.mobile-search{

    display:flex;

}

.section-title{

    font-size:22px;

}

.hero-live{

    margin-bottom:30px;

}

.live-info{

    padding:18px;

}

.channel-logo{

    width:64px;

    height:64px;

}

#liveChannel{

    font-size:22px;

}

#liveDescription{

    font-size:14px;

}

.live-meta{

    gap:8px;

}

.watch-btn{

    height:48px;

}

.grid-2,
.grid-3,
.grid-4,
.grid-5{

    grid-template-columns:1fr;

}

.auto-grid{

    grid-template-columns:1fr;

}

.channel-grid{

    grid-template-columns:1fr;

}

.live-grid{

    grid-template-columns:1fr;

}

.short-card{

    width:170px;

}

.horizontal-scroll{

    gap:14px;

}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

.content-area{

    padding:12px;

}

.sidebar{

    width:260px;

}

.hero-live{

    gap:16px;

}

.live-info{

    padding:16px;

}

.channel-logo{

    width:56px;

    height:56px;

}

#liveChannel{

    font-size:20px;

}

.card-title{

    font-size:15px;

}

.short-card{

    width:150px;

}

.section{

    margin-bottom:28px;

}

.site-logo img{

    width:34px;

    height:34px;

}

}


/* ==========================================================
   LANDSCAPE MOBILE
========================================================== */

@media (max-height:500px) and (orientation:landscape){

.sidebar{

    overflow-y:auto;

}

.hero-live{

    margin-bottom:20px;

}

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (hover:none){

.card:hover{

    transform:none;

}

.watch-btn:hover{

    transform:none;

}

.carousel-btn:hover{

    background:var(--card);

}

}


/* ==========================================================
   PRINT
========================================================== */

@media print{

.sidebar,
.site-header,
.carousel-btn,
.watch-btn{

    display:none !important;

}

.content-area{

    margin:0;

    padding:0;

}

body{

    background:#fff;

    color:#000;

}

}