/*==================================================
    IndiaRadio 2026
    File : home.css
==================================================*/


/*=========================================
HOME PAGE
=========================================*/

.home-page{

    width:100%;

}


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

h2{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:clamp(22px,2vw,30px);

    font-weight:700;

    color:var(--text);

    margin-bottom:18px;

}


/*==================================================
TAB WRAPPER
==================================================*/

.tab-scroll{

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

    gap:8px;

    width:100%;

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    flex-wrap:nowrap;

    white-space:nowrap;

    margin-bottom:20px;

    padding:0;

}

.tab-scroll::-webkit-scrollbar{

    display:none;

}


/*==================================================
TAB BUTTON
==================================================*/

.tab-btn{

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

    flex:0 0 auto;

    min-width:82px;

    height:44px;

    padding:0 12px;

    border-radius:12px;

    text-decoration:none;

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

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

    transition:.25s;

}

.tab-btn:hover{

    background:var(--primary);

    color:#fff;

}

.tab-btn:active{

    transform:scale(.97);

}

.active-tab{

    background:var(--primary);

    color:#fff;

    box-shadow:0 8px 20px rgba(124,58,237,.35);

}

.tab-btn:focus-visible{

    outline:2px solid var(--primary-light);

    outline-offset:2px;

}


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

@media (min-width:768px){

    .tab-scroll{

        justify-content:flex-start;

        overflow-x:visible;

    }

}

/*==================================================
TAB CONTENT
==================================================*/

.tab-content{

    width:100%;

    display:block;

    animation:homeFade .30s ease;

}

@keyframes homeFade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/*==================================================
HOME SECTIONS
==================================================*/

#featured-tab,
#popular-tab,
#latest-tab,
#favorites-tab{

    margin-bottom:38px;

}

.home-section{

    margin-top:18px;

}

.home-section:first-child{

    margin-top:0;

}


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

.section-title{

    margin-bottom:18px;

}

.home-divider{

    margin:46px 0;

    border:none;

    border-top:1px solid var(--border);

}

.home-gap{

    margin-top:32px;

}


/*==================================================
EMPTY FAVORITES
==================================================*/

#favoritesGrid:empty{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

    border:2px dashed rgba(255,255,255,.08);

    border-radius:20px;

    background:linear-gradient(
        180deg,
        var(--surface),
        var(--surface-2)
    );

}

#favoritesGrid:empty::before{

    content:"No favorite stations yet.";

    color:var(--text-muted);

    font-size:15px;

}


/*=========================================
HOME INTRO
=========================================*/

.home-intro{

    margin-bottom:30px;

}


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

@media(max-width:480px){

    .tab-btn{

        min-width:60px;

        height:42px;

        font-size:13px;

    }

}

@media(min-width:767px){

    .tab-scroll{

        display:flex;

        gap:6px;

        overflow-x:auto;

        scrollbar-width:none;

    }

    .tab-scroll::-webkit-scrollbar{

        display:none;

    }

    .tab-btn{

        min-width:60px;

        height:42px;

        font-size:13px;

        padding:0 10px;

    }

}

@media(prefers-reduced-motion:reduce){

    .tab-content{

        animation:none;

    }

}