/* ======================================================
   STANDINGS PAGE
====================================================== */
/* =====================================================
   HERO
===================================================== */

.page-banner{

    position:relative;

    overflow:hidden;

    padding:110px 0 90px;

    background:
    linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.75)),
    url("assets/images/banner-football.jpg") center center/cover no-repeat;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(215,25,32,.35),
    transparent 45%);

}

.banner-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

}

.banner-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(12px);

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

    font-size:.9rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.banner-content h1{

    margin-top:25px;

    font-size:58px;

    font-weight:900;

    letter-spacing:1px;

    text-transform:uppercase;

}

.banner-content p{

    max-width:700px;

    margin:18px auto 35px;

    font-size:18px;

    color:rgba(255,255,255,.85);

    line-height:1.8;

}

.banner-badge .league-logo{

    width:100px;
    height:100px;

    object-fit:contain;

    background:#fff;
    border-radius:50%;
    padding:3px;

    box-shadow:0 2px 6px rgba(0,0,0,.15);

}
/* =====================================================
   INFO BOX
===================================================== */

.banner-info{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

}

.info-box{

    min-width:170px;

    padding:18px 22px;

    border-radius:16px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.15);

    transition:.3s;

}

.info-box:hover{

    transform:translateY(-6px);

    background:rgba(215,25,32,.25);

}

.info-box strong{

    display:block;

    font-size:28px;

    font-weight:800;

    color:#fff;

}

.info-box span{

    color:#ddd;

    font-size:14px;

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:768px){

    .page-banner{

        padding:80px 0 60px;

    }

    .banner-content h1{

        font-size:38px;

    }

    .banner-content p{

        font-size:15px;

    }

    .info-box{

        min-width:140px;

    }

}
.banner-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

}

.league-logo{

    width:26px;
    height:26px;
    object-fit:contain;

}

/* ======================================================
   SECTION
====================================================== */

.standings-section{
    padding:80px 0;
    background:#f5f6fa;
}

.section-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.section-title h2{
    margin:0;
    font-size:2rem;
    font-weight:700;
}

.section-title span{
    color:#6c757d;
}

/* ======================================================
   CARD
====================================================== */

.standings-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

/* ======================================================
   TABLE
====================================================== */

.standings-table{
    margin:0;
}

.standings-table thead th{

    background:#101010;
    color:#fff;
    text-align:center;
    padding:16px;
    border:none;
    font-size:.95rem;

}

.standings-table tbody td{

    padding:14px;
    vertical-align:middle;
    border-color:#efefef;

}

.standings-table tbody tr{

    transition:.25s;

}

.standings-table tbody tr:hover{

    background:#fff8f8;

}

/* ======================================================
   TOP 3
====================================================== */

.champion{

    background:#fff9e7;

}

.runnerup{

    background:#f8f8f8;

}

.third{

    background:#fff5ef;

}

/* ======================================================
   RANK
====================================================== */

.rank-badge{

    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-weight:700;

}

.rank-1{

    background:#ffc107;

}

.rank-2{

    background:#adb5bd;

}

.rank-3{

    background:#cd7f32;

}

.rank-number{

    font-weight:700;
    color:#666;

}

/* ======================================================
   TEAM
====================================================== */

.team-box{

    display:flex;
    align-items:center;
    gap:14px;

}

.team-color{

    width:8px;
    height:46px;
    border-radius:8px;
    flex-shrink:0;

    background:linear-gradient(
        180deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}

.team-logo{

    width:46px;
    height:46px;
    object-fit:contain;
    background:#fff;
    border-radius:50%;
    border:1px solid #e5e5e5;
    padding:4px;
    flex-shrink:0;

}

.team-name{

    font-size:15px;
    font-weight:700;
    color:#222;
    line-height:1.2;

}

.team-short{

    display:block;
    margin-top:2px;
    font-size:12px;
    color:#888;

}

/* ======================================================
   POINTS
====================================================== */

.points-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:50%;

    background:#d71920;

    color:#fff;

    font-weight:700;

    font-size:1rem;

}

/* ======================================================
   NOTE
====================================================== */

.standings-note{

    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;

    padding:20px;

    background:#fafafa;

    border-top:1px solid #eee;

}

.standings-note span{

    display:flex;
    align-items:center;
    gap:8px;
    color:#555;
    font-weight:500;

}

/* ======================================================
   RESPONSIVE
====================================================== */

@media(max-width:992px){

    .standings-table{

        min-width:900px;

    }

    .banner-content h1{

        font-size:2.2rem;

    }

}

@media(max-width:768px){

    .page-banner{

        padding:70px 0;

    }

    .section-title{

        flex-direction:column;
        gap:10px;
        text-align:center;

    }

    .team-logo{

        width:40px;
        height:40px;

    }

    .team-name{

        font-size:.92rem;

    }

}