/* ==========================================================
   Channel Header
========================================================== */

.javo-channel-container{
    
    width:100%;
    height: auto;
    padding:48px 0;
    flex-direction:row;
    background: rgba(248, 248, 248, 0.29); 
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); 
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 35px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}

.javo-channel-content-wrapper{
     display:flex;
    justify-content:space-between;
    align-items:center;
    flex-direction:row;
    gap:24px;
    width:100%;
}
/* ==========================================================
   right
========================================================== */

.javo-channel-left-column{
    flex:0 0 21%;
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    height:100%;
}
.javo-channel-artwork-frame{
    width:90%;
    height:90%;
    margin:0;
    padding-right: 3%;
    border-radius: 35px;
    overflow:hidden;
    flex-shrink:0;
    background: rgba(248, 248, 248, 0.29);
    box-shadow:
        0 12px 30px rgba(0,0,0,.08);
}
.javo-channel-artwork-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* ==========================================================
   Center
========================================================== */

.javo-channel-center-column{
    flex:0 0 48%;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;

}
.javo-channel-name{
    margin:0 0 18px;
    font-size:42px;
    font-weight:800;
    line-height:1.25;
    color:#1e3a8a;
}
.javo-channel-biography{
    margin:0;
    max-width:760px;
    font-size:16px;
    line-height:2;
    color:#1e3a8a;
}


/* ==========================================================
   left
========================================================== */
.javo-channel-right-column{
    flex:0 0 25%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:28px;
    width:100%;
    height:100%;
}
/* ==========================================================
   Statistics
========================================================== */
.javo-statistics-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}
.javo-stat-item{
    min-width:110px;
    padding:14px 18px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(255,255,255,.55);
    border:1px solid rgba(255,255,255,.85);
    border-radius:18px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    transition:.25s ease;
}

.javo-stat-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.javo-channel-label,
.javo-stat-label-podcaster{
    margin:0;
    font-size:13px;
    font-weight:100;
    line-height:1;
    color:#8A8A8A;
    letter-spacing:.2px;
}
.javo-channel-number,
.javo-channel-number-episode{
    margin:0;
    font-size:13px;
    font-weight:100;
    line-height:1;
    color:#1F1F1F;
    letter-spacing:-0.5px;
    font-variant-numeric:tabular-nums;
}
/* ==========================================================
   Action
========================================================== */
.javo-action-row{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.javo-action-row button,
.javo-login-redirect-btn{
    width:180px;
    height:54px;
    border:none;
    border-radius:999px;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    transition:.25s;
    background-color: #1e3a8a;
    color: #B3E7FF;
}

.javo-action-row button:hover,
.javo-login-redirect-btn:hover{
    transform:translateY(-2px);
}
@media (max-width:992px){
  .javo-channel-container{
    height:auto;
    padding:24px 20px;
    border-radius:28px;
  }

  .javo-channel-content-wrapper{
    flex-wrap:wrap;
    gap:20px;
  }

  .javo-channel-left-column{flex:0 0 180px;}
  .javo-channel-center-column{flex:1 1 320px;}
  .javo-channel-right-column{
    flex:1 1 100%;
    flex-direction:row;
    justify-content:space-between;
    gap:20px;
  }
}
/* ==========================================================
   Responsive - Mobile
========================================================== */
@media (max-width:767px){

  .javo-channel-container{
    height:auto;
    padding:12px;
    border-radius:18px;
  }

  .javo-channel-content-wrapper{
    display:grid;
    grid-template-columns:110px 1fr;
    grid-template-areas:
      "artwork content"
      "actions actions";
    column-gap:14px;
    row-gap:12px;
    align-items:center;
  }

  .javo-channel-left-column{
    grid-area:artwork;
    flex:none;
    width:100%;
  }

  .javo-channel-center-column{
    grid-area:content;
    flex:none;
    width:100%;
    align-items:flex-start;
    text-align:right;
    gap:6px;
  }

  .javo-channel-right-column{
    grid-area:actions;
    flex:none;
    width:100%;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:12px;
  }

  .javo-channel-artwork-frame{
    width:95px;
    height:95px;
    margin:0;
  }

  .javo-channel-name{
    margin:0;
    font-size:20px;
    line-height:1.2;
  }

  .javo-channel-biography{
    font-size:12px;
    line-height:1.5;
    margin:0;
  }

  .javo-statistics-row{
    gap:8px;
  }

  .javo-stat-item{
    min-width:82px;
    padding:8px;
  }

  .javo-channel-number,
  .javo-channel-number-episode{
    font-size:16px;
  }

  .javo-channel-label,
  .javo-stat-label-podcaster{
    font-size:11px;
  }

  .javo-action-row{
    width:auto;
  }

  .javo-action-row button,
  .javo-login-redirect-btn{
    width:150px;
    height:40px;
    font-size:13px;
  }
}
@media (max-width:420px){

  .javo-channel-container{
    padding:10px 12px;
  }

  .javo-channel-artwork-frame{
    width:82px;
    height:82px;
  }

  .javo-channel-name{
    font-size:19px;
  }

  .javo-channel-biography{
    font-size:12px;
    line-height:1.5;
  }

  .javo-stat-item{
    padding:7px 8px;
  }

  .javo-channel-number,
  .javo-channel-number-episode{
    font-size:16px;
  }

  .javo-action-row button,
  .javo-login-redirect-btn{
    height:40px;
    max-width:200px;
  }

}