/* ==========================================
   MATCH PAGE
========================================== */

.match-page{

    max-width:1450px;

    margin:20px auto;

    padding:0 15px;

}

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

.match-hero{

    background:#fff;

    border:1px solid var(--border);

    border-radius:0px;

    overflow:hidden;

}

.match-competition{

    background:#006633;

    color:#fff;

    padding:14px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-weight:700;

    font-size:15px;

}

.match-info{

    display:flex;

    justify-content:center;

    gap:30px;

    padding:14px;

    font-size:13px;

    color:#6b7280;

    border-bottom:1px solid var(--border);

}

.match-score{

    display:grid;

    grid-template-columns:1fr 180px 1fr;

    align-items:center;

    padding:35px 20px;

}

.club{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.club img{

    width:72px;

    height:72px;

    object-fit:contain;

}

.club h2{

    font-size:20px;

    font-weight:700;

}

.score{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

.score span{

    font-size:42px;

    font-weight:800;

    color:#111827;

}

.score small{

    margin-top:10px;

    font-size:13px;

    color:#6b7280;

}

/* =========================
   TABS
========================= */

.match-tabs{

    margin-top:16px;

    display:flex;

    background:#fff;

    border:1px solid var(--border);

    border-radius:0px;

    overflow:hidden;

}

.match-tabs a{

    flex:1;

    text-align:center;

    padding:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.match-tabs a.active{

    background:#006633;

    color:#fff;

}

/* =========================
   LAYOUT
========================= */

.match-layout{

    margin-top:20px;

    display:grid;

    grid-template-columns:1fr 320px;

    gap:20px;

}

.match-content{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.match-sidebar{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.match-sidebar .lwf-card{

    padding:18px;

}

.match-sidebar h3{

    margin-bottom:12px;

    color:#006633;

    font-size:15px;

}

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

@media(max-width:992px){

    .match-layout{

        grid-template-columns:1fr;

    }

    .match-score{

        grid-template-columns:1fr;

        gap:20px;

    }

    .match-info{

        flex-direction:column;

        gap:8px;

        align-items:center;

    }

    .match-tabs{

        overflow:auto;

    }

    .match-tabs a{

        min-width:120px;

    }

}