/*==================================================
FRIKÓFONO
==================================================*/

.podcasts-section{

    width:100%;
    margin:80px auto;

}

.podcast-box{

    display:flex;
    flex-direction:column;
    gap:30px;

}

.podcast-principal{

    background:#181818;

    border:1px solid #2c2c2c;

    border-radius:14px;

    padding:18px;

}

#podcast-title{

    margin:0;

    font-size:24px;

    line-height:1.25;

}
.podcast-meta{

    color:#9a9a9a;

    margin:8px 0 14px;

    font-size:14px;

}

#podcast-player iframe{
    width:100%;
    height:180px;
    border:0;
    overflow:hidden;
}

#podcast-player iframe{

    width:100%;

    height:120px;

    border:0;

    border-radius:10px;

}

.podcast-description{

    font-size:14px;

    line-height:1.5;

    color:#ddd;

    margin:0;

    white-space:pre-line;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}
.podcast-list{

    background:#181818;

    border:1px solid #2c2c2c;

    border-radius:14px;

    margin-top:15px;

    overflow:hidden;

     scrollbar-width:thin;

}

.podcast-list h4{

    margin:0;

    padding:18px 25px;

    border-bottom:1px solid #2c2c2c;

    font-size:20px;

}

#podcast-list{

    max-height:280px;

    overflow-y:auto;

}

.podcast-item.active{

    background:#242424;

    border-left:4px solid #00ff88;

}

.podcast-item{

    display:grid;

    grid-template-columns:1fr auto;

    align-items:center;

    gap:20px;

    padding:12px 18px;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid #252525;

}

.podcast-item:last-child{

    border-bottom:none;

}

.podcast-item:hover{

    background:#222;

}

.podcast-item-info h4{

    margin:0 0 6px;

    padding:0;

    border:0;

    font-size:15px;

}

.podcast-item-info span{

    color:#888;

    font-size:12px;

}
.podcast-footer{

    margin-top:12px;

    display:flex;

    justify-content:flex-end;

}

.podcast-footer .button{

    padding:8px 14px;

    font-size:13px;

}

@media (max-width:900px){

    .podcast-principal{

        grid-template-columns:1fr;

    }

    .podcast-left{

        max-width:280px;

        margin:0 auto;

    }

    #podcast-title{

        font-size:24px;

    }

    .podcast-item{

        grid-template-columns:1fr;

        gap:8px;

    }

}