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


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

.fh-calendar-widget{
    width:100%;
    max-width:100%;
    min-width:0;
    margin-top:18px;

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

    overflow:hidden;

    color:#ffffff;

    box-sizing:border-box;
}


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

.fh-calendar-header{

    display:flex;

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

    gap:16px;

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

    padding:18px 22px;

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

    box-sizing:border-box;
}


.fh-calendar-header > div:first-child{

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


.fh-calendar-title{

    margin:0;

    color:#ffffff;

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

    line-height:1.2;

    overflow-wrap:anywhere;
}


.fh-calendar-subtitle{

    margin-top:4px;

    color:#93a3b8;

    font-size:13px;

    letter-spacing:.5px;

    line-height:1.3;

    overflow-wrap:anywhere;
}


/* ==========================================================
   SWITCHER
   ========================================================== */

.fh-calendar-switcher{

    display:flex;

    align-items:center;

    gap:8px;

    flex:0 0 auto;

    min-width:0;
}


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

.fh-calendar-widget h3{

    margin:0;

    padding:18px 22px;

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

    line-height:1.2;

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

    box-sizing:border-box;
}


/* ==========================================================
   CONTEXT
   ========================================================== */

.fh-calendar-context{

    display:flex;

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

    gap:20px;

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

    padding:18px 22px;

    color:#ffffff;

    font-size:14px;

    box-sizing:border-box;
}


.fh-calendar-context > *{

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


.fh-calendar-context strong{

    color:#ffd54a;
}


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

.fh-calendar-team{

    display:flex;

    flex-direction:column;

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

    gap:8px;

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

    color:#ffffff;

    font-size:13px;
    font-weight:600;

    text-align:center;

    box-sizing:border-box;
}


.fh-calendar-team span{
    display:block;

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

    text-align:center;

    color:#F7C600;

    overflow-wrap:anywhere;
    word-break:normal;
}


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

.fh-calendar-logo{

    display:block;

    width:38px;
    height:38px;

    min-width:38px;
    min-height:38px;

    max-width:38px;
    max-height:38px;

    object-fit:contain;

    flex:0 0 auto;
}


/* ==========================================================
   SINGLE MATCH
   ========================================================== */

.fh-calendar-match{

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

    padding:12px 0;

    border-bottom:2px solid rgba(244,197,66,.85);

    color:#ffffff;

    font-size:14px;

    box-sizing:border-box;
}


.fh-calendar-match:last-child{

    border-bottom:none;
}


/* ==========================================================
   MATCH TEAMS
   ========================================================== */

.fh-calendar-teams{

    display:flex;

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

    gap:18px;

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

    padding:14px 0;

    box-sizing:border-box;
}


/*
 * Team blocks inside the match are allowed to shrink.
 * No fixed min-width and no nowrap.
 */

.fh-calendar-teams .fh-calendar-team{

    flex:1 1 0;

    min-width:0;
    max-width:180px;
}


/* ==========================================================
   VS
   ========================================================== */

.fh-calendar-vs{

    flex:0 0 auto;

    min-width:32px;

    color:#ffd54a;

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

    text-align:center;
}


/* ==========================================================
   TEAM CALENDAR SECTION
   ========================================================== */

.fh-calendar-team-section{

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

    padding:20px 22px;

    box-sizing:border-box;
}


.fh-calendar-team-section h4{

    margin:0 0 15px;

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

    color:#ffffff;
}


/* ==========================================================
   TOGGLE BUTTON
   ========================================================== */

.fh-calendar-toggle{

    display:block;

    width:calc(100% - 44px);

    margin:0 22px 20px;

    padding:12px;

    border:none;
    border-radius:8px;

    background:#ffd54a;

    color:#111820;

    font-weight:700;

    cursor:pointer;

    box-sizing:border-box;
}


/* ==========================================================
   EXPANDED CALENDAR
   ========================================================== */

.fh-calendar-expanded{

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

    padding:20px 22px;

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

    background:rgba(0,0,0,.15);

    box-sizing:border-box;
}


/* ==========================================================
   MATCHDAY
   ========================================================== */

.fh-calendar-matchday{

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

    margin-bottom:20px;

    box-sizing:border-box;
}


.fh-calendar-matchday strong{

    display:block;

    margin-bottom:10px;

    color:#ffd54a;

    font-size:15px;
}


/* ==========================================================
   MATCHDAY NUMBER
   ========================================================== */

.fh-calendar-matchday-number{

    text-align:center;

    color:#ffffff;

    font-size:13px;
    font-weight:700;
}


/* ==========================================================
   DATE
   ========================================================== */

.fh-calendar-date{

    margin-top:5px;

    color:#93a3b8;

    font-size:12px;
    font-weight:400;
}


/* ==========================================================
   PREVIEW GRID
   ========================================================== */

.fh-calendar-preview-grid{

    display:grid;

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

    gap:20px;

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

    box-sizing:border-box;
}


.fh-calendar-preview-grid .fh-calendar-match{

    min-width:0;

    padding:14px 10px;

    border-bottom:2px solid rgba(244,197,66,.85);

    box-sizing:border-box;
}


/* ==========================================================
   EXPANDED TEAM CALENDAR LIST
   ========================================================== */

.fh-calendar-list-row{

    display:grid;

    grid-template-columns:
        minmax(130px,180px)
        minmax(0,1fr)
        minmax(90px,110px);

    align-items:center;

    gap:20px;

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

    padding:16px 0;

    box-sizing:border-box;
}


/* ==========================================================
   LIST META
   ========================================================== */

.fh-calendar-list-meta{

    display:flex;

    flex-direction:column;

    gap:5px;

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

    box-sizing:border-box;
}


.fh-calendar-list-meta strong{

    color:#ffffff;

    font-size:14px;

    overflow-wrap:anywhere;
}


.fh-calendar-list-meta span{

    color:#93a3b8;

    font-size:12px;

    overflow-wrap:anywhere;
}


/* ==========================================================
   LIST TEAMS
   ========================================================== */

.fh-calendar-list-teams{

    display:flex;

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

    gap:18px;

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

    box-sizing:border-box;
}


.fh-calendar-list-teams .fh-calendar-team{

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:center;

    gap:8px;

    flex:1 1 0;

    min-width:0;
    max-width:180px;

    text-align:left;
}


.fh-calendar-list-teams .fh-calendar-team span{
    width:auto;
    max-width:100%;

    text-align:left;

    color:#F7C600;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.fh-calendar-list-teams .fh-calendar-logo{

    width:32px;
    height:32px;

    min-width:32px;
    min-height:32px;

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


/* ==========================================================
   LIST VS
   ========================================================== */

.fh-calendar-list-teams .fh-calendar-vs{

    min-width:40px;

    flex:0 0 40px;

    text-align:center;

    font-weight:700;
}


/* ==========================================================
   LIST STATUS
   ========================================================== */

.fh-calendar-list-status{

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

    text-align:right;

    font-size:13px;

    color:#93a3b8;

    overflow-wrap:anywhere;

    box-sizing:border-box;
}


/* ==========================================================
   FHL MATCHDAY DIVIDER
   ========================================================== */

.fh-calendar-fhl-divider{

    width:100%;
    height:2px;

    margin:28px 0;

    background:#f4c542;

    opacity:.9;

    box-sizing:border-box;
}


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

@media (max-width:1500px){

    .fh-calendar-header{

        padding:16px 18px;
    }

    .fh-calendar-context{

        padding:16px 18px;
    }

    .fh-calendar-team-section{

        padding:18px;
    }

    .fh-calendar-expanded{

        padding:18px;
    }

    .fh-calendar-list-row{

        grid-template-columns:
            minmax(120px,160px)
            minmax(0,1fr)
            minmax(80px,100px);

        gap:16px;
    }

}


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

@media (max-width:1200px){

    .fh-calendar-header{

        padding:16px;
    }

    .fh-calendar-context{

        padding:16px;
    }

    .fh-calendar-team-section{

        padding:16px;
    }

    .fh-calendar-expanded{

        padding:16px;
    }

    .fh-calendar-list-row{

        grid-template-columns:
            minmax(110px,150px)
            minmax(0,1fr)
            minmax(75px,90px);

        gap:14px;
    }

    .fh-calendar-list-teams{

        gap:10px;
    }

}


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

@media (max-width:900px){

    .fh-calendar-header{

        flex-direction:column;
        align-items:flex-start;

        padding:16px;
    }

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

    .fh-calendar-switcher{
        width:100%;
        flex:0 0 auto;
        flex-wrap:wrap;
    }

    .fh-calendar-context{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:16px;
    }

    .fh-calendar-preview-grid{

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

    .fh-calendar-list-row{

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

        gap:14px;
    }

    .fh-calendar-list-status{

        grid-column:2;

        text-align:left;
    }

}


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

@media (max-width:768px){

    .fh-calendar-header{

        padding:14px;

        gap:12px;
    }

    .fh-calendar-title{

        font-size:20px;
    }

    .fh-calendar-subtitle{

        font-size:12px;
    }

    .fh-calendar-context{

        padding:14px;

        font-size:13px;
    }

    .fh-calendar-team-section{

        padding:14px;
    }

    .fh-calendar-expanded{

        padding:14px;
    }

    .fh-calendar-toggle{

        width:calc(100% - 28px);

        margin:0 14px 14px;
    }

    .fh-calendar-teams{

        gap:10px;

        padding:12px 0;
    }

    .fh-calendar-teams .fh-calendar-team{

        max-width:140px;
    }

    .fh-calendar-logo{

        width:34px;
        height:34px;

        min-width:34px;
        min-height:34px;

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

    .fh-calendar-vs{

        min-width:26px;

        font-size:14px;
    }

    .fh-calendar-team{

        font-size:12px;
    }

    .fh-calendar-list-row{

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

        gap:10px;

        padding:14px 0;
    }

    .fh-calendar-list-teams{

        grid-column:1 / -1;

        gap:10px;

        order:2;
    }

    .fh-calendar-list-meta{

        order:1;
    }

    .fh-calendar-list-status{

        grid-column:auto;

        order:3;

        text-align:right;
    }

    .fh-calendar-list-teams .fh-calendar-team{

        max-width:140px;
    }

    .fh-calendar-list-teams .fh-calendar-logo{

        width:28px;
        height:28px;

        min-width:28px;
        min-height:28px;

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

    .fh-calendar-list-teams .fh-calendar-vs{

        min-width:30px;

        flex:0 0 30px;
    }

    .fh-calendar-list-teams .fh-calendar-team span{

        font-size:11px;
    }

}


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

@media (max-width:480px){

    .fh-calendar-header{

        padding:12px;
    }

    .fh-calendar-title{

        font-size:18px;
    }

    .fh-calendar-subtitle{

        font-size:11px;
    }

    .fh-calendar-context{

        padding:12px;
    }

    .fh-calendar-team-section{

        padding:12px;
    }

    .fh-calendar-expanded{

        padding:12px;
    }

    .fh-calendar-toggle{

        width:calc(100% - 24px);

        margin:0 12px 12px;
    }

    .fh-calendar-teams{

        gap:7px;
    }

    .fh-calendar-teams .fh-calendar-team{

        max-width:120px;
    }

    .fh-calendar-logo{

        width:32px;
        height:32px;

        min-width:32px;
        min-height:32px;

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

    .fh-calendar-vs{

        min-width:22px;

        font-size:13px;
    }

    .fh-calendar-team{

        font-size:11px;
    }

    .fh-calendar-list-row{

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

        gap:8px;
    }

    .fh-calendar-list-meta{

        width:100%;
    }

    .fh-calendar-list-teams{

        grid-column:auto;

        width:100%;
    }

    .fh-calendar-list-status{

        grid-column:auto;

        width:100%;

        text-align:left;
    }

    .fh-calendar-list-teams .fh-calendar-team{

        max-width:120px;
    }

    .fh-calendar-list-teams .fh-calendar-team span{

        font-size:10px;
    }

    .fh-calendar-list-teams .fh-calendar-logo{

        width:26px;
        height:26px;

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

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

}


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

@media (max-width:360px){

    .fh-calendar-header{

        padding:11px;
    }

    .fh-calendar-title{

        font-size:17px;
    }

    .fh-calendar-context{

        padding:11px;
    }

    .fh-calendar-team-section{

        padding:11px;
    }

    .fh-calendar-expanded{

        padding:11px;
    }

    .fh-calendar-toggle{

        width:calc(100% - 22px);

        margin:0 11px 11px;
    }

    .fh-calendar-teams{

        gap:5px;
    }

    .fh-calendar-teams .fh-calendar-team{

        max-width:105px;
    }

    .fh-calendar-logo{

        width:30px;
        height:30px;

        min-width:30px;
        min-height:30px;

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

    .fh-calendar-vs{

        min-width:20px;

        font-size:12px;
    }

    .fh-calendar-team{

        font-size:10px;
    }

}