/* ==========================================================================
   FHL - Competition Header
   ========================================================================== */


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

.fh-competition-header{
    width:100%;
    max-width:100%;

    margin-bottom:24px;

    box-sizing:border-box;
}


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

.fh-competition-card{

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

    display:flex;
    flex-direction:column;

    gap:28px;

    padding:28px 32px;

    box-sizing:border-box;

    overflow:hidden;
}


/* ==========================================================================
   PARTE SUPERIORE
   ========================================================================== */

.fh-competition-top{

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

    display:grid;

    grid-template-columns:72px minmax(0,1fr);

    gap:22px;

    align-items:center;

    box-sizing:border-box;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.fh-competition-logo{

    width:72px;
    height:72px;

    min-width:72px;
    min-height:72px;

    display:flex;

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

    box-sizing:border-box;
}


.fh-competition-logo img{

    display:block;

    width:72px;
    height:72px;

    max-width:72px;
    max-height:72px;

    object-fit:contain;

}


/* ==========================================================================
   TITOLO
   ========================================================================== */

.fh-competition-heading{

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

    box-sizing:border-box;
}


.fh-competition-label{

    margin-bottom:8px;

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#8b9098;
}


.fh-competition-name{

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

    margin:0;

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

    color:#F7C600;

    overflow-wrap:anywhere;

    word-break:normal;
}


/* ==========================================================================
   SEPARATORE
   ========================================================================== */

.fh-competition-divider{

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

    height:1px;

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

    flex:none;
}


/* ==========================================================================
   STATISTICHE
   ========================================================================== */

.fh-competition-stats{

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

    display:grid;

    /*
     * Nessun min-width fisso.
     * Ogni colonna può restringersi realmente.
     */
    grid-template-columns:
        repeat(8,minmax(0,1fr));

    gap:16px;

    box-sizing:border-box;
}


/* ==========================================================================
   SINGOLA STATISTICA
   ========================================================================== */

.fh-stat{

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

    display:flex;
    flex-direction:column;

    gap:6px;

    box-sizing:border-box;

    overflow:hidden;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.fh-stat-label{

    display:block;

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

    font-size:.68rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#F7C600;

    line-height:1.2;

    white-space:normal;

    overflow-wrap:anywhere;
}


/* ==========================================================================
   VALORE DINAMICO
   ========================================================================== */

.fh-stat-value{

    display:block;

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

    font-size:.86rem;

    font-weight:600;

    line-height:1.25;

    color:#FFFFFF;

    white-space:normal;

    overflow-wrap:anywhere;

    word-break:normal;
}


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

@media (max-width:1500px){

    .fh-competition-card{
        padding:24px 26px;
    }

    .fh-competition-stats{
        gap:12px;
    }

    .fh-stat-label{
        font-size:.65rem;
    }

    .fh-stat-value{
        font-size:.82rem;
    }

}


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

@media (max-width:1200px){

    .fh-competition-card{
        padding:24px;
        gap:24px;
    }

    .fh-competition-stats{

        grid-template-columns:
            repeat(4,minmax(0,1fr));

        gap:16px;
    }

}


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

@media (max-width:900px){

    .fh-competition-card{

        padding:22px;

        gap:22px;
    }

    .fh-competition-top{

        grid-template-columns:72px minmax(0,1fr);

        gap:18px;

        text-align:left;
    }

    .fh-competition-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:14px;
    }

}


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

@media (max-width:768px){

    .fh-competition-card{

        padding:18px;

        gap:20px;
    }

    .fh-competition-top{

        grid-template-columns:64px minmax(0,1fr);

        gap:14px;
    }

    .fh-competition-logo{

        width:64px;
        height:64px;

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

    .fh-competition-logo img{

        width:64px;
        height:64px;

        max-width:64px;
        max-height:64px;
    }

    .fh-competition-name{

        font-size:1.55rem;
    }

    .fh-competition-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;
    }

    .fh-stat{

        padding-bottom:10px;

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

    .fh-stat-label{

        font-size:.63rem;
    }

    .fh-stat-value{

        font-size:.78rem;
    }

}


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

@media (max-width:480px){

    .fh-competition-card{

        padding:16px;

        gap:18px;
    }

    .fh-competition-top{

        grid-template-columns:56px minmax(0,1fr);

        gap:12px;
    }

    .fh-competition-logo{

        width:56px;
        height:56px;

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

    .fh-competition-logo img{

        width:56px;
        height:56px;

        max-width:56px;
        max-height:56px;
    }

    .fh-competition-label{

        font-size:.66rem;

        margin-bottom:5px;
    }

    .fh-competition-name{

        font-size:1.30rem;
    }

    .fh-competition-stats{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:10px;
    }

    .fh-stat-label{

        font-size:.60rem;

        letter-spacing:.05em;
    }

    .fh-stat-value{

        font-size:.74rem;
    }

}


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

@media (max-width:360px){

    .fh-competition-card{

        padding:14px;
    }

    .fh-competition-top{

        grid-template-columns:50px minmax(0,1fr);

        gap:10px;
    }

    .fh-competition-logo{

        width:50px;
        height:50px;

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

    .fh-competition-logo img{

        width:50px;
        height:50px;

        max-width:50px;
        max-height:50px;
    }

    .fh-competition-name{

        font-size:1.18rem;
    }

    .fh-competition-stats{

        gap:9px;
    }

    .fh-stat-label{

        font-size:.57rem;
    }

    .fh-stat-value{

        font-size:.70rem;
    }

}