/* ==========================================================
   FHL ENTERPRISE
   STANDINGS WIDGET
   Responsive version
   ========================================================== */


/* ==========================================================
   WIDGET
   ========================================================== */

.fhl-standings-widget{
    width:100%;
    max-width:100%;
    min-width:0;

    background:#111820;

    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;

    overflow:hidden;

    box-sizing:border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.fhl-standings-widget .fhl-widget-header{

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:16px;

    padding:18px 22px;

    border-bottom:1px solid rgba(255,255,255,.08);

    box-sizing:border-box;
}


.fhl-widget-header > div:first-child{
    min-width:0;
    max-width:100%;
}


.fhl-widget-title{

    margin:0;

    color:#ffffff;

    font-size:22px;
    font-weight:700;

    line-height:1.2;

    overflow-wrap:anywhere;
}


.fhl-widget-subtitle{

    margin-top:4px;

    color:#93a3b8;

    font-size:13px;

    letter-spacing:.5px;

    line-height:1.3;

    overflow-wrap:anywhere;
}


/* ==========================================================
   HEADER BUTTON
   ========================================================== */

.fhl-btn-link{

    flex:0 0 auto;

    background:transparent;

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

    border-radius:8px;

    color:#d8dee8;

    padding:6px 12px;

    font-size:12px;

    line-height:1.2;

    cursor:pointer;

    white-space:nowrap;

    box-sizing:border-box;
}


.fhl-btn-link:hover{

    border-color:#ffd54a;

    color:#ffd54a;
}


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

.fhl-standings-table{

    width:100%;
    max-width:100%;

    min-width:0;

    overflow-x:auto;
    overflow-y:hidden;

    box-sizing:border-box;

    /*
     * Scrollbar belongs only to the standings table,
     * never to the whole page.
     */
    scrollbar-width:thin;
}


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

.fhl-standings-head,
.fhl-standings-row{

    display:grid;

    /*
     * POS
     * TEAM
     * G V N P GF GS DR PT
     */
    grid-template-columns:
        42px
        minmax(180px,1fr)
        repeat(8,42px);

    align-items:center;

    /*
     * Desktop width is fluid.
     * On narrow screens the table gets its own horizontal
     * scrolling area.
     */
    min-width:598px;

    box-sizing:border-box;
}


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

.fhl-standings-head{

    padding:10px 20px;

    color:#8fa0b5;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.06em;

    border-bottom:1px solid rgba(255,255,255,.06);

    box-sizing:border-box;
}


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

.fhl-standings-row{

    position:relative;

    min-height:46px;

    padding:0 20px;

    border-bottom:1px solid rgba(255,255,255,.05);

    transition:background .18s ease;

    box-sizing:border-box;
}


.fhl-standings-row:last-child{

    border-bottom:none;
}


.fhl-standings-row:hover{

    background:rgba(255,255,255,.035);
}


/* ==========================================================
   CURRENT TEAM MARKER
   ========================================================== */

.fhl-standings-row::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:#4f5b66;
}


.fhl-current-team{

    background:rgba(255,213,74,.08);
}


.fhl-current-team::before{

    background:#ffd54a;
}


.fhl-current-team .col-team span{

    color:#ffd54a;

    font-weight:700;
}


/* ==========================================================
   POSITION
   ========================================================== */

.col-pos{

    min-width:0;

    text-align:center;

    color:#c9d3df;

    font-size:13px;

    font-weight:600;
}


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

.col-team{

    min-width:0;
    max-width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    overflow:hidden;

    box-sizing:border-box;
}


.fhl-team-logo{

    width:26px;
    height:26px;

    min-width:26px;
    min-height:26px;

    border-radius:50%;

    object-fit:cover;

    flex:0 0 auto;

    display:block;
}


.col-team span{

    min-width:0;
    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-weight:600;

    color:#ffffff;
}


/* ==========================================================
   NUMERIC COLUMNS
   ========================================================== */

.col-num{

    min-width:0;

    text-align:center;

    color:#c9d3df;

    font-size:13px;

    line-height:1.2;
}


.col-points{

    font-weight:700;

    color:#ffffff;
}


/* ==========================================================
   PROJECTION COLORS
   ========================================================== */

.fhl-projection-prime::before{
    background:#2ecc71;
}


.fhl-projection-elite::before{
    background:#3498db;
}


.fhl-projection-dynasty::before{
    background:#f1c40f;
}


.fhl-projection-rising::before{
    background:#e74c3c;
}


/*
 * Current team always has priority over projection color.
 */

.fhl-current-team::before{

    background:#ffd54a;
}


/* ==========================================================
   LEGEND
   ========================================================== */

.fhl-standings-legend{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:18px;

    padding:14px 20px;

    border-top:1px solid rgba(255,255,255,.08);

    box-sizing:border-box;
}


.fhl-legend-item{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:12px;

    color:#c9d3df;

    white-space:nowrap;
}


.fhl-legend-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    flex:0 0 auto;
}


.fhl-legend-text{

    line-height:1;
}


/* ==========================================================
   NOTEBOOK / DESKTOP COMPATTO
   ========================================================== */

@media (max-width:1500px){

    .fhl-standings-widget .fhl-widget-header{

        padding:16px 18px;
    }


    .fhl-standings-head,
    .fhl-standings-row{

        grid-template-columns:
            40px
            minmax(160px,1fr)
            repeat(8,40px);

        min-width:560px;
    }


    .fhl-standings-head{

        padding-left:18px;
        padding-right:18px;
    }


    .fhl-standings-row{

        padding-left:18px;
        padding-right:18px;
    }

}


/* ==========================================================
   TABLET LANDSCAPE / IPAD LANDSCAPE
   ========================================================== */

@media (max-width:1200px){

    .fhl-standings-widget .fhl-widget-header{

        padding:16px;
    }


    .fhl-standings-head,
    .fhl-standings-row{

        grid-template-columns:
            38px
            minmax(150px,1fr)
            repeat(8,38px);

        min-width:530px;
    }


    .fhl-standings-head{

        padding-left:16px;
        padding-right:16px;

        font-size:10px;
    }


    .fhl-standings-row{

        padding-left:16px;
        padding-right:16px;
    }


    .col-num,
    .col-pos{

        font-size:12px;
    }

}


/* ==========================================================
   TABLET PORTRAIT
   ========================================================== */

@media (max-width:900px){

    .fhl-widget-title{

        font-size:20px;
    }


    .fhl-widget-subtitle{

        font-size:12px;
    }


    .fhl-btn-link{

        padding:6px 10px;

        font-size:11px;
    }


    .fhl-standings-head,
    .fhl-standings-row{

        min-width:520px;

        grid-template-columns:
            38px
            minmax(145px,1fr)
            repeat(8,37px);
    }


    .fhl-team-logo{

        width:24px;
        height:24px;

        min-width:24px;
        min-height:24px;
    }


    .col-team{

        gap:8px;
    }

}


/* ==========================================================
   SMARTPHONE
   ========================================================== */

@media (max-width:768px){

    .fhl-standings-widget .fhl-widget-header{

        padding:14px;

        gap:12px;
    }


    .fhl-widget-title{

        font-size:19px;
    }


    .fhl-standings-head,
    .fhl-standings-row{

        min-width:500px;

        grid-template-columns:
            36px
            minmax(140px,1fr)
            repeat(8,36px);
    }


    .fhl-standings-head{

        padding-left:14px;
        padding-right:14px;

        font-size:9px;

        letter-spacing:.04em;
    }


    .fhl-standings-row{

        min-height:44px;

        padding-left:14px;
        padding-right:14px;
    }


    .col-num,
    .col-pos{

        font-size:11px;
    }


    .fhl-team-logo{

        width:23px;
        height:23px;

        min-width:23px;
        min-height:23px;
    }


    .col-team{

        gap:7px;
    }


    .fhl-standings-legend{

        padding:12px 14px;

        gap:10px 14px;
    }


    .fhl-legend-item{

        font-size:11px;
    }

}


/* ==========================================================
   SMALL SMARTPHONE
   ========================================================== */

@media (max-width:480px){

    .fhl-standings-widget .fhl-widget-header{

        align-items:flex-start;

        padding:12px;
    }


    .fhl-widget-title{

        font-size:18px;
    }


    .fhl-widget-subtitle{

        font-size:11px;
    }


    .fhl-btn-link{

        padding:5px 8px;

        font-size:10px;
    }


    .fhl-standings-head,
.fhl-standings-row{
    min-width:480px;

    grid-template-columns:
        34px
        minmax(135px,1fr)
        repeat(8,34px);
}

.fhl-standings-head .col-pos,
.fhl-standings-row .col-pos{
    position:sticky;
    left:0;
    z-index:3;
    background:#111820;
}

.fhl-standings-head .col-team,
.fhl-standings-row .col-team{
    position:sticky;
    left:34px;
    z-index:3;
    background:#111820;
}

.fhl-standings-head .col-pos,
.fhl-standings-head .col-team{
    z-index:4;
}

    .fhl-standings-head{

        padding-left:12px;
        padding-right:12px;

        font-size:8px;
    }


    .fhl-standings-row{

        padding-left:12px;
        padding-right:12px;

        min-height:42px;
    }


    .col-num,
    .col-pos{

        font-size:10px;
    }


    .fhl-team-logo{

        width:22px;
        height:22px;

        min-width:22px;
        min-height:22px;
    }


    .col-team{

        gap:6px;
    }


    .fhl-standings-legend{

        padding:10px 12px;

        gap:8px 12px;
    }

}


/* ==========================================================
   VERY SMALL SMARTPHONE
   ========================================================== */

@media (max-width:360px){

    .fhl-standings-widget .fhl-widget-header{

        padding:11px;
    }


    .fhl-widget-title{

        font-size:17px;
    }


    .fhl-standings-head,
    .fhl-standings-row{

        min-width:460px;

        grid-template-columns:
            32px
            minmax(128px,1fr)
            repeat(8,33px);
    }


    .fhl-standings-head{

        padding-left:10px;
        padding-right:10px;
    }


    .fhl-standings-row{

        padding-left:10px;
        padding-right:10px;
    }


    .fhl-team-logo{

        width:21px;
        height:21px;

        min-width:21px;
        min-height:21px;
    }


    .col-team{

        gap:5px;
    }

}

.fhl-finals-board{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px;
}

.fhl-tie{
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(247,198,0,.14), transparent 55%),
        linear-gradient(180deg, #1a2430 0%, #0d141b 100%);
    border:1px solid rgba(247,198,0,.35);
    border-radius:14px;
    overflow:hidden;
}

.fhl-tie.is-third{
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), transparent 55%),
        linear-gradient(180deg, #171e27 0%, #0d141b 100%);
    border-color:rgba(255,255,255,.12);
}

.fhl-tie-kicker{
    padding:12px 12px 0;
    color:#F7C600;
    font-size:11px;
    font-weight:800;
    letter-spacing:.16em;
    text-align:center;
    text-transform:uppercase;
}

.fhl-tie.is-third .fhl-tie-kicker{
    color:#c5ced6;
}

.fhl-tie-poster{
    display:grid;
    grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:14px 16px 16px;
}

.fhl-tie-club{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    min-width:0;
    text-align:center;
}

.fhl-tie-club img,
.fhl-tie-crest{
    width:56px;
    height:56px;
    object-fit:contain;
}

.fhl-tie-crest{
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255,255,255,.16), rgba(255,255,255,.04) 70%);
    border:1px solid rgba(255,255,255,.12);
}

.fhl-tie-club span{
    max-width:100%;
    color:#fff;
    font-size:14px;
    font-weight:800;
    line-height:1.2;
}

.fhl-tie-club.is-current span{
    color:#F7C600;
}

.fhl-tie-vs span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin:0 auto;
    border:1px solid rgba(247,198,0,.55);
    border-radius:50%;
    color:#F7C600;
    background:rgba(0,0,0,.28);
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
}

.fhl-tie-vs span.is-score{
    width:auto;
    min-width:40px;
    padding:0 8px;
    border-radius:999px;
    font-size:13px;
}

.fhl-tie-leg.is-played{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    opacity:1;
}

.fhl-tie-previous{
    color:#c5ced6;
    font-size:12px;
    font-weight:700;
}

.fhl-tie-leg.is-next{
    background:rgba(247,198,0,.08);
}

.fhl-tie-leg.is-next .fhl-tie-leg-tag{
    color:#F7C600;
}

.fhl-tie-legs{
    border-top:1px solid rgba(255,255,255,.08);
    background:rgba(0,0,0,.18);
}

.fhl-tie-leg{
    display:grid;
    grid-template-columns:78px minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:8px;
    padding:9px 12px;
}

.fhl-tie-leg + .fhl-tie-leg{
    border-top:1px solid rgba(255,255,255,.06);
}

.fhl-tie-leg-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.fhl-tie-leg-tag{
    color:#8fa0ae;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.fhl-tie-leg-meta time{
    color:#6f8191;
    font-size:10px;
}

.fhl-tie-side{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    color:#e8eef3;
    font-size:12px;
    font-weight:700;
}

.fhl-tie-side.is-away{
    flex-direction:row-reverse;
    text-align:right;
}

.fhl-tie-side img{
    width:18px;
    height:18px;
    object-fit:contain;
    flex:0 0 auto;
}

.fhl-tie-side span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.fhl-tie-side.is-current span{
    color:#F7C600;
}

.fhl-tie-score{
    min-width:54px;
    padding:4px 8px;
    border-radius:6px;
    background:#070c11;
    color:#fff;
    font-size:13px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    text-align:center;
}

.fhl-tie-score i{
    font-style:normal;
    color:#8fa0ae;
}

@media (max-width:640px){

    .fhl-tie-poster{
        padding:12px 10px 14px;
    }

    .fhl-tie-club img,
    .fhl-tie-crest{
        width:44px;
        height:44px;
    }

    .fhl-tie-club span{
        font-size:12px;
    }

    .fhl-tie-leg{
        grid-template-columns:64px minmax(0,1fr) auto minmax(0,1fr);
        gap:6px;
        padding:8px 10px;
    }

}