/* ==========================================================
   WEBCRIC INTERNATIONAL SCHEDULE PAGE
========================================================== */

.schedule-page{
    padding-top:76px;
    background:#f7f8fa;
    color:#333333;
}

.schedule-wrapper{
    width:calc(100% - 24px);
    max-width:1180px;
    margin:26px auto 40px;
    box-sizing:border-box;
}


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

.schedule-hero{
    margin:0 0 20px;
    text-align:center;
}

.schedule-hero h1{
    margin:0 0 8px;
    color:#26292c;
    font-size:32px;
    font-weight:700;
    line-height:1.25;
}

.schedule-hero p{
    max-width:760px;
    margin:0 auto;
    color:#666666;
    font-size:16px;
    line-height:1.6;
}


/* ==========================================================
   CARDS
========================================================== */

.schedule-card{
    margin:0 0 20px;
    padding:20px 22px;
    background:#ffffff;
    border:1px solid #dddddd;
    border-radius:7px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    box-sizing:border-box;
}

.schedule-card-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
}

.schedule-card-heading h2,
.schedule-card > h2{
    margin:0 0 4px;
    color:#333333;
    font-size:23px;
    font-weight:700;
    line-height:1.3;
}

.schedule-card-heading p{
    margin:0;
    color:#777777;
    font-size:14px;
}

.schedule-count{
    flex:0 0 auto;
    padding:7px 11px;
    background:#eef8ef;
    border:1px solid #d8ecd9;
    border-radius:4px;
    color:#218838;
    font-size:13px;
    font-weight:700;
}


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

.schedule-table-wrap{
    width:100%;
    overflow-x:auto;
    border:1px solid #dde1e5;
    border-radius:6px;
}

.schedule-table{
    width:100%;
    margin:0;
    border-collapse:collapse;
    background:#ffffff;
    table-layout:fixed;
}

.schedule-table th{
    padding:12px 10px;
    background:#292b2c;
    border-right:1px solid #45484b;
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    vertical-align:middle;
}

.schedule-table th:last-child{
    border-right:0;
}

.schedule-table td{
    padding:14px 11px;
    border-top:1px solid #e2e5e8;
    border-right:1px solid #e2e5e8;
    color:#444444;
    font-size:14px;
    line-height:1.45;
    text-align:center;
    vertical-align:middle;
    overflow-wrap:anywhere;
}

.schedule-table td:last-child{
    border-right:0;
}

.schedule-table tbody tr:first-child td{
    border-top:0;
}

.schedule-table tbody tr:hover{
    background:#fafcfb;
}

.schedule-table th:nth-child(1){ width:14%; }
.schedule-table th:nth-child(2){ width:18%; }
.schedule-table th:nth-child(3){ width:18%; }
.schedule-table th:nth-child(4){ width:8%; }
.schedule-table th:nth-child(5){ width:20%; }
.schedule-table th:nth-child(6){ width:9%; }
.schedule-table th:nth-child(7){ width:13%; }

.schedule-table td strong{
    display:block;
    margin-bottom:4px;
    color:#2f3337;
}

.schedule-table td > span{
    display:block;
}


/* ==========================================================
   MATCH DETAILS
========================================================== */

.schedule-match-name{
    font-size:15px;
    font-weight:700;
}

.schedule-match-name span{
    display:inline;
    margin:0 3px;
    color:#777777;
    font-size:12px;
    font-weight:600;
}

.schedule-match-number{
    color:#777777;
    font-size:13px;
    font-weight:600;
}

.format-badge{
    display:inline-block !important;
    padding:5px 8px;
    background:#edf4ff;
    border-radius:4px;
    color:#2c6fb7;
    font-size:12px;
    font-weight:700;
}

.status-badge{
    display:inline-block !important;
    padding:6px 9px;
    border-radius:4px;
    color:#ffffff;
    font-size:11px;
    font-weight:700;
    line-height:1;
    text-transform:uppercase;
}

.status-live{
    background:#ef3d3d;
}

.status-upcoming{
    background:#2c6fb7;
}

.match-center-button{
    display:inline-block;
    padding:8px 11px;
    background:#28a745;
    border:1px solid #28a745;
    border-radius:4px;
    color:#ffffff !important;
    font-size:13px;
    font-weight:700;
    line-height:1.2;
    text-decoration:none !important;
    white-space:nowrap;
    transition:background .2s ease, border-color .2s ease;
}

.match-center-button:hover,
.match-center-button:focus{
    background:#218838;
    border-color:#218838;
    color:#ffffff;
}


/* ==========================================================
   NOTE AND RELATED LINKS
========================================================== */

.schedule-note-card p{
    margin:8px 0 0;
    color:#555555;
    font-size:15px;
    line-height:1.65;
}

.related-schedule-links{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:12px;
    margin-top:14px;
}

.related-schedule-links a{
    display:block;
    padding:12px 14px;
    background:#f8f8f8;
    border:1px solid #e3e3e3;
    border-radius:5px;
    color:#333333;
    font-size:14px;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    transition:background .2s ease, border-color .2s ease, color .2s ease;
}

.related-schedule-links a:hover,
.related-schedule-links a:focus{
    background:#eef8ef;
    border-color:#cfe7d2;
    color:#218838;
    text-decoration:none;
}


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

@media (max-width:991px){

    .schedule-wrapper{
        max-width:760px;
    }

    .schedule-table{
        min-width:1050px;
    }
}


/* ==========================================================
   MOBILE CARD LAYOUT
========================================================== */

@media (max-width:767px){

    .schedule-page{
        padding-top:70px;
    }

    .schedule-wrapper{
        width:100%;
        margin:18px auto 30px;
        padding:0 10px;
    }

    .schedule-hero h1{
        font-size:27px;
    }

    .schedule-hero p{
        font-size:14px;
    }

    .schedule-card{
        padding:17px 14px;
    }

    .schedule-card-heading{
        align-items:flex-start;
    }

    .schedule-card-heading h2,
    .schedule-card > h2{
        font-size:21px;
    }

    .schedule-table-wrap{
        overflow:visible;
        border:0;
    }

    .schedule-table,
    .schedule-table tbody,
    .schedule-table tr,
    .schedule-table td{
        display:block;
        width:100%;
    }

    .schedule-table{
        min-width:0;
        background:transparent;
    }

    .schedule-table thead{
        display:none;
    }

    .schedule-table tr{
        margin-bottom:14px;
        overflow:hidden;
        background:#ffffff;
        border:1px solid #dde1e5;
        border-radius:6px;
    }

    .schedule-table td{
        display:grid;
        grid-template-columns:115px minmax(0,1fr);
        gap:12px;
        padding:10px 12px;
        border-top:1px solid #eeeeee;
        border-right:0;
        text-align:left;
    }

    .schedule-table tr td:first-child{
        border-top:0;
    }

    .schedule-table td::before{
        content:attr(data-label);
        color:#333333;
        font-size:13px;
        font-weight:700;
    }

    .schedule-table td strong,
    .schedule-table td > span{
        margin:0;
    }

    .match-center-button{
        width:max-content;
    }

    .related-schedule-links{
        grid-template-columns:1fr;
    }
}


@media (max-width:480px){

    .schedule-table td{
        grid-template-columns:100px minmax(0,1fr);
        gap:8px;
    }

    .schedule-count{
        display:none;
    }
}