/*leadershipBoard.css*/

#leaderboard{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
    width: 95vw;
    margin-left: 10px;
    margin-top: 10px;
}

.leaderCard.hero {
    grid-column: 1 / -1;
}

.leaderCard.podium {
    grid-column: span 3;
}

.leaderCard.standard {
    grid-column: span 2;
}

.leaderCard{
    background:#fff;
    border-radius:18px;
    padding:20px;
    margin-bottom:18px;
    border-top:5px solid var(--primaryColor);
    box-shadow:0 3px 12px rgba(0,0,0,.08);
	opacity:0;
    transform:translateY(30px);
    transition:
        opacity .4s ease,
        transform .4s ease;
}

.leaderCard.show{
    opacity:1;
    transform:none;
}

.leaderCard:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.cardTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.rankBadge{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#222;
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:20px;
}

.entityArea{
    display:flex;
    align-items:center;
    gap:18px;
}

.entityImageWrapper {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--primaryColor, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* optional */
}

.entityImage {
    width: 70%; 
    height: auto;
    border-radius:0;
    object-fit: contain;  /* important */
}

.entityImage.is-round{
    border-radius:50%;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.entityName{
    font-size:1.35rem;
    font-weight:700;
    color:var(--primaryColor);
}

.entityType{
    color:#888;
    margin-top:4px;
}

.contextArea{
    margin-top:18px;
    color:#666;
    font-size:.95rem;
}

.metricTemplate{
    display:none;
}

.hero{
    padding:28px;
}

.hero .entityImage{
    width:82px;
    height:82px;
}

.podium{
    padding:22px;
}

.podium .entityImage{
    width:64px;
    height:64px;
}

.standard{

}

.standard .entityImage{
    width:48px;
    height:48px;
}

.rankBadge{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    background:#222;
    color:white;

}

.hero .rankBadge{
    background:#d4af37;
}

.podium[data-rank="2"] .rankBadge{
    background:#bcbcbc;
}

.podium[data-rank="3"] .rankBadge{
    background:#cd7f32;
}

.entityArea{
    display:flex;
    align-items:center;
    gap:18px;
}

.entityImage{
    border-radius:50%;
    object-fit:cover;
    border:3px solid white;
    box-shadow:
        0 3px 12px rgba(0,0,0,.12);
}

.entityDetails{
    flex:1;
}

.entityName{
    font-size:1.25rem;
    font-weight:700;
}

.entityType{
    margin-top:4px;
    color:#888;
    font-size:.85rem;
}

.metricTemplate{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.metricHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.metricLabel{
    color:#777;
    font-size:.85rem;
}

.metricValue{
    font-size:1.35rem;
    font-weight:700;
}

.metricBar{
    height:10px;
    border-radius:8px;
    background:#ececec;
    overflow:hidden;
}

.metricFill{
    width:65%;
    height:100%;
    border-radius:8px;
    background:linear-gradient(
        90deg,
        #0057b8,
        #4da3ff
    );
    transition:width .6s ease;
}

.contextArea{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.contextLine{
    padding:6px 10px;
    border-radius:20px;
    background:#f5f5f5;
    font-size:.8rem;
}

.dateHold {
	display:none;
    vertical-align: middle;
    display: table-cell;
    width: 50px;
    padding: 5px;
}

.dateSVGmonth {
    font-size:75px;
    font-weight:bold;
}

.dateSVGday {
    font-size:200px;
    font-weight:bold;
}

.dateSVGweekday {
    font-size:90px;
}

.resultsBox{
    width:95vw;
    max-width:1200px;
    margin:30px auto;
    display:none;
}

.resultsBox.show {
    display:block;
}




.metricDisplay{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
}

.metricBar{
    flex:1;
    height:12px;
    background:#ececec;
    border-radius:999px;
    overflow:hidden;
}

.metricBarFill{
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        var(--hexColor,#0b6efd),
        var(--#808080)
    );
    transition:width .6s ease;
}

.metricValue{
    min-width:60px;
    text-align:right;
    font-weight:700;
    font-size:1.1rem;
    font-variant-numeric:tabular-nums;
}


.individualCard {
    display:grid;
    grid-template-columns: 60px 90px 1fr 250px;
    align-items:center;
    gap:20px;
    padding:15px;
}





@media(max-width:700px){

    .grid {
        grid-template-columns:1fr;
    }

}