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


/* ===================================
   APP LAYOUT
=================================== */

.app-layout{

    display:flex;

    min-height:100vh;

    background:var(--bg);

}


/* ===================================
   MAIN CONTENT
=================================== */

.content-area{

    flex:1;

    min-width:0;

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

    padding:25px;

    transition:var(--transition);

}


/* ===================================
   PAGE WRAPPER
=================================== */

.page-wrapper{

    width:100%;

    max-width:var(--container);

    margin:auto;

}


/* ===================================
   SECTION
=================================== */

.section{

    margin-bottom:45px;

}

.section:last-child{

    margin-bottom:0;

}


/* ===================================
   SECTION HEADER
=================================== */

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:20px;

}

.section-title{

    font-size:28px;

    font-weight:700;

}

.section-action{

    color:var(--secondary);

    font-weight:600;

}

.section-action:hover{

    color:var(--secondary-hover);

}


/* ===================================
   GRID SYSTEM
=================================== */

.grid-2{

    display:grid;

    grid-template-columns:

    repeat(2,1fr);

    gap:25px;

}

.grid-3{

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:25px;

}

.grid-4{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:25px;

}

.grid-5{

    display:grid;

    grid-template-columns:

    repeat(5,1fr);

    gap:22px;

}


/* ===================================
   AUTO GRID
=================================== */

.auto-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(320px,1fr));

    gap:25px;

}


/* ===================================
   CHANNEL GRID
=================================== */

.channel-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(240px,1fr));

    gap:22px;

}


/* ===================================
   LIVE GRID
=================================== */

.live-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fill,minmax(260px,1fr));

    gap:22px;

}


/* ===================================
   SHORTS ROW
=================================== */

.shorts-row{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:8px;

}

.shorts-row::-webkit-scrollbar{

    display:none;

}


/* ===================================
   HORIZONTAL SCROLL
=================================== */

.horizontal-scroll{

    display:flex;

    gap:20px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

}

.horizontal-scroll::-webkit-scrollbar{

    display:none;

}


/* ===================================
   TWO COLUMN
=================================== */

.two-column{

    display:grid;

    grid-template-columns:

    2fr 1fr;

    gap:25px;

}


/* ===================================
   THREE COLUMN
=================================== */

.three-column{

    display:grid;

    grid-template-columns:

    1fr 1fr 1fr;

    gap:25px;

}


/* ===================================
   HERO WRAPPER
=================================== */

.hero-wrapper{

    margin-top:20px;

    margin-bottom:45px;

}


/* ===================================
   CARD WRAPPER
=================================== */

.card-wrapper{

    display:flex;

    flex-direction:column;

    gap:20px;

}


/* ===================================
   STICKY
=================================== */

.sticky{

    position:sticky;

    top:90px;

}


/* ===================================
   SPACING
=================================== */

.space-top{

    margin-top:40px;

}

.space-bottom{

    margin-bottom:40px;

}


/* ===================================
   DIVIDER
=================================== */

.divider{

    width:100%;

    height:1px;

    background:var(--border);

    margin:35px 0;

}


/* ===================================
   EMPTY STATE
=================================== */

.empty-state{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    min-height:250px;

    background:var(--card);

    border-radius:var(--radius);

    text-align:center;

    padding:30px;

}

.empty-state h2{

    margin-top:15px;

}

.empty-state p{

    margin-top:10px;

}


/* ===================================
   LOADER
=================================== */

.page-loader{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}


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


/* Large Desktop */

@media (max-width:1600px){

.content-area{

padding:22px;

}

}


/* Laptop */

@media (max-width:1200px){

.content-area{

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

padding:20px;

}

.grid-5{

grid-template-columns:

repeat(4,1fr);

}

}


/* Tablet */

@media (max-width:992px){

.content-area{

margin-left:0;

padding:18px;

}

.grid-4,

.grid-5{

grid-template-columns:

repeat(2,1fr);

}

.two-column{

grid-template-columns:1fr;

}

}


/* Mobile */

@media (max-width:768px){

.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;

}

.content-area{

padding:15px;

}

.section-title{

font-size:22px;

}

}


/* Small Mobile */

@media (max-width:480px){

.content-area{

padding:12px;

}

.section{

margin-bottom:30px;

}

}