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


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

.station-layout{

    display:flex;

    flex-direction:column;

    gap:5px;

}


/*=========================================
BREADCRUMB
=========================================*/

.breadcrumb{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:center;

    margin-bottom:8px;

    color:var(--text-muted);

    font-size:14px;

}

.breadcrumb a{

    color:var(--primary-light);

}

.breadcrumb a:hover{

    color:#fff;

}


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

.station-header{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;
    
    margin-bottom: 5px;

}


/*=========================================
LOGO
=========================================*/

.station-logo{

    width:110px;

    aspect-ratio:1;

    object-fit:cover;

    border-radius:8px;

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

    background:var(--surface);

    box-shadow:var(--shadow-lg);

    margin-bottom:5px;

}


/*=========================================
TITLE
=========================================*/

.station-page-title{

    font-size:clamp(22px,4vw,42px);

    font-weight:700;

    margin-bottom:14px;

    line-height:1.25;

}


/*=========================================
PLAYER BOX
=========================================*/

.player-box{

    width:100%;

    max-width:460px;

    background:var(--surface);

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

    border-radius:10px;

    padding:15px;

}


/*=========================================
PLAYER CONTROLS
=========================================*/

.player-controls-row{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}


.station-play-circle{

    width:88px;

    height:88px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    transition:.25s;

}

.station-play-circle:hover{

    transform:scale(1.05);

    background:var(--primary-dark);

}


.nav-control-btn{

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--surface-2);

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

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

}

.nav-control-btn:hover{

    background:var(--primary);

}

.nav-control-btn:disabled{

    opacity:.45;

    cursor:not-allowed;

}


/*=========================================
EQUALIZER
=========================================*/

.equalizer-bar{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:4px;

    margin:15px 0;

    height:18px;

}

.equalizer-bar span{

    width:4px;

    height:12px;

    background:var(--primary);

    border-radius:30px;

}

.equalizer-bar.playing span{

    animation:equalizer .8s infinite ease-in-out;

}

.equalizer-bar span:nth-child(2){

    animation-delay:.1s;

}

.equalizer-bar span:nth-child(3){

    animation-delay:.2s;

}

.equalizer-bar span:nth-child(4){

    animation-delay:.3s;

}

.equalizer-bar span:nth-child(5){

    animation-delay:.4s;

}

.equalizer-bar span:nth-child(6){

    animation-delay:.5s;

}

@keyframes equalizer{

0%{height:8px;}
50%{height:28px;}
100%{height:10px;}

}


/*=========================================
ACTION ROW
=========================================*/

.station-action-row{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}


.icon-action-btn{

    width:48px;

    height:48px;

    border-radius:14px;

    background:var(--surface-2);

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

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    transition:.25s;

}

.icon-action-btn:hover{

    background:var(--primary);

}


.views-inline{

    display:flex;

    align-items:center;

    padding:0 14px;

    border-radius:14px;

    background:var(--surface-2);

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

    color:var(--text-soft);

}


/*=========================================
CONTENT BOX
=========================================*/

.content-box{

    background:var(--surface);

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

    border-radius:10px;

    padding:10px;

    box-shadow:var(--shadow-sm);

}


.content-box + .content-box{

    margin-top:5px;

}


/*=========================================
META LIST
=========================================*/

.station-meta-list{

    display:grid;

    gap:1px;

    line-height:1.5;

}

.station-meta-list strong{

    color:#fff;

}

.station-meta-link{

    color:var(--primary-light);

}

.station-meta-link:hover{

    color:#fff;

}


/*=========================================
DESCRIPTION
=========================================*/

.station-divider{

    margin:8px 0;

}

.description-title{


    font-weight:700;

}


/*=========================================
SPINNER
=========================================*/

.spinner{

    width:24px;

    height:24px;

    border:3px solid rgba(255,255,255,.25);

    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

@media(min-width:768px){

    .player-box{

        padding:28px;

    }

}


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

@media(min-width:992px){

    .station-header{

        display:grid;

        grid-template-columns:220px 1fr;

        gap:56px;

        align-items:center;

        max-width:1200px;

        margin:0 auto 42px;

        padding:40px 46px;

        background:var(--surface);

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

        border-radius:28px;

        box-shadow:var(--shadow);

    }
    
    .station-divider{

    margin:14px 0;

    }

    .station-right{

        display:flex;

        flex-direction:column;

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

    }

    .station-logo{

        width:210px;

        margin:0;
        
        align-self:flex-start;
        
        border-radius:24px;

    }

    .station-page-title{

        margin:0 0 28px;
        
        margin-bottom:28px;

        font-size:44px;

        line-height:1.18;
        
        letter-spacing:-.5px;

    }

    .player-box{

        width:100%;

        max-width:560px;

        margin:0;

        background:transparent;

        border:none;

        box-shadow:none;

        padding:0;

    }

}


/*=========================================
REDUCED MOTION
=========================================*/

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

    .station-play-circle,

    .icon-action-btn,

    .nav-control-btn{

        transition:none;

    }

}