/* =====================================================
   HERO
===================================================== */

.ranking-hero {
    padding: 58px 0;

    background:
        linear-gradient(
            120deg,
            #063f75,
            #075ba4
        );

    color: white;
}


.ranking-kicker {
    color: #ffb47c;

    font-size: 10px;

    font-weight: 950;

    letter-spacing: .8px;
}


.ranking-hero h1 {
    margin:
        7px 0 8px;

    font-size:
        clamp(
            36px,
            5vw,
            54px
        );
}


.ranking-hero p {
    margin: 0;

    color: #dcecf8;

    font-size: 14px;
}


/* =====================================================
   AVISO
===================================================== */

.ranking-warning {
    padding: 20px 0;

    background: #f3f7fa;
}


.ranking-warning-card {
    display: flex;

    align-items: flex-start;

    gap: 13px;

    padding: 15px;

    border:
        1px solid #efd79c;

    border-radius: 12px;

    background: #fff5dc;
}


.ranking-warning-card > span {
    font-size: 23px;
}


.ranking-warning-card strong {
    color: #8d6200;

    font-size: 11px;
}


.ranking-warning-card p {
    margin:
        4px 0 0;

    color: #887449;

    font-size: 10px;

    line-height: 1.5;
}


/* =====================================================
   CONTEÚDO
===================================================== */

.ranking-content {
    padding: 40px 0 65px;
}


.ranking-heading {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 19px;
}


.ranking-heading > div:first-child > span {
    color: #ff6b00;

    font-size: 9px;

    font-weight: 950;
}


.ranking-heading h2 {
    color: #073f75;

    margin:
        3px 0 0;
}


/* =====================================================
   TROCA DE CATEGORIA
===================================================== */

.ranking-switch {
    display: flex;

    gap: 7px;
}


.ranking-switch-button {
    border:
        1px solid #d3e0e9;

    border-radius: 9px;

    padding: 10px 13px;

    background: white;

    color: #587184;

    font-weight: 850;
}


.ranking-switch-button.active {
    border-color: #07549a;

    background: #07549a;

    color: white;
}


/* =====================================================
   RESUMO
===================================================== */

.ranking-summary {
    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 10px;

    margin-bottom: 15px;
}


.ranking-summary article {
    padding: 14px;

    border:
        1px solid #dfe8ef;

    border-radius: 11px;

    background: #f8fafc;
}


.ranking-summary small,
.ranking-summary strong {
    display: block;
}


.ranking-summary small {
    color: #8294a4;

    font-size: 8px;

    font-weight: 900;
}


.ranking-summary strong {
    margin-top: 3px;

    color: #073f75;

    font-size: 17px;
}


/* =====================================================
   TABELA
===================================================== */

.ranking-table-wrapper {
    overflow-x: auto;

    border:
        1px solid #dfe8ef;

    border-radius: 13px;

    background: white;
}


.ranking-table {
    width: 100%;

    border-collapse: collapse;

    min-width: 790px;
}


.ranking-table th {
    padding: 12px;

    background: #073f75;

    color: #dcebf6;

    font-size: 8px;

    font-weight: 900;

    text-align: center;
}


.ranking-table td {
    padding: 12px;

    border-bottom:
        1px solid #e8eef3;

    color: #466278;

    font-size: 10px;

    text-align: center;
}


.ranking-table tbody tr:last-child td {
    border-bottom: none;
}


.ranking-table tbody tr:hover {
    background: #f7fafc;
}


.ranking-table .team-column {
    text-align: left;

    min-width: 230px;
}


/* =====================================================
   POSIÇÃO
===================================================== */

.ranking-position {
    width: 29px;
    height: 29px;

    display: inline-grid;

    place-items: center;

    border-radius: 8px;

    background: #edf3f7;

    color: #48677d;

    font-weight: 950;
}


.ranking-position--first {
    background: #fff1c6;

    color: #9b6900;
}


/* =====================================================
   EQUIPE
===================================================== */

.ranking-team {
    display: flex;

    align-items: center;

    gap: 9px;
}


.ranking-team-symbol {
    width: 34px;
    height: 34px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color: white;

    font-size: 17px;

    font-weight: 950;
}


.ranking-team-symbol--female {
    background: #ff7a16;
}


.ranking-team-symbol--male {
    background: #07549a;
}


.ranking-team strong {
    color: #073f75;

    font-size: 11px;
}


.ranking-points {
    color: #073f75;

    font-size: 14px;
}


/* =====================================================
   LEGENDA
===================================================== */

.ranking-legend {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    padding:
        11px 3px;

    color: #7d90a0;

    font-size: 8px;
}


/* =====================================================
   CRITÉRIOS
===================================================== */

.ranking-rules {
    margin-top: 25px;

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 18px;

    padding: 20px;

    border:
        1px solid #dfe8ef;

    border-radius: 13px;

    background: white;
}


.ranking-rules > div:first-child > span {
    color: #ff6b00;

    font-size: 8px;

    font-weight: 950;
}


.ranking-rules h3 {
    color: #073f75;

    margin:
        4px 0 0;
}


.ranking-rules-placeholder {
    padding: 13px;

    border-radius: 9px;

    background: #f3f7fa;
}


.ranking-rules-placeholder strong {
    color: #073f75;

    font-size: 11px;
}


.ranking-rules-placeholder p {
    margin:
        4px 0 0;

    color: #738899;

    font-size: 9px;

    line-height: 1.5;
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media(max-width:700px) {

    .ranking-heading {
        align-items: stretch;

        flex-direction: column;
    }


    .ranking-switch {
        width: 100%;
    }


    .ranking-switch-button {
        flex: 1;
    }


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


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

}

.standings-block{margin-top:28px}.standings-table td,.standings-table th{text-align:center}.standings-table td:nth-child(2),.standings-table th:nth-child(2){text-align:left}.team-inline{display:flex;align-items:center;gap:10px;min-width:190px}.team-inline img,.team-inline span{width:36px;height:36px;flex:0 0 36px;border-radius:10px;object-fit:cover}.team-inline span{display:grid;place-items:center;background:#edf3fb;color:#0b3585}.scorers-panel{margin-top:16px}.scorers-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.scorers-grid article{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid #e0e8f2;border-radius:14px;background:#fff}.scorers-grid small{display:block;color:#68778d;margin-top:3px}.scorer-position{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff3d7;color:#8a5800;font-weight:900}.scorers-grid b{color:#0b3585}

@media(max-width:700px){.scorers-grid{grid-template-columns:1fr}.standings-table{min-width:760px}}