.mct-competition-page{
    --green:#08b64b;
    --green-dark:#06933d;
    --green-soft:#effaf3;
    --text:#071426;
    --muted:#708096;
    --line:#dfe7ed;
    --soft-line:#edf1f4;
    --panel:#fff;

    background:#fff;
    color:var(--text);
}

.mct-competition-page *,
.mct-competition-page *::before,
.mct-competition-page *::after{
    box-sizing:border-box;
}

.mct-competition-shell{
    width:min(1380px,calc(100% - 48px));
    margin:0 auto;
}

.mct-competition-breadcrumb{
    height:52px;
    display:flex;
    align-items:center;
    gap:7px;
    color:#718298;
    font-size:11px;
}

.mct-competition-breadcrumb a{
    color:#4c6988;
    text-decoration:none;
}

.mct-competition-breadcrumb svg{
    width:12px;
    height:12px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

/* Hero */

.mct-competition-hero{
    position:relative;
    overflow:hidden;
    min-height:172px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:26px 30px;
    border:1px solid var(--line);
    border-radius:12px;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(8,182,75,.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fbfefc,
            #fff 56%
        );
}

.mct-competition-hero::after{
    content:"";
    position:absolute;
    width:270px;
    height:270px;
    right:-100px;
    bottom:-150px;
    border:42px solid rgba(8,182,75,.035);
    border-radius:50%;
    pointer-events:none;
}

.mct-competition-identity{
    min-width:0;
    display:flex;
    align-items:center;
    gap:22px;
}

.mct-competition-hero-logo{
    width:94px;
    height:94px;
    flex:0 0 94px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border:1px solid #e2e9ee;
    border-radius:14px;
    background:#fff;
}

.mct-competition-hero-logo img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.mct-competition-kicker,
.mct-section-kicker{
    color:var(--green);
    font-size:9px;
    font-weight:850;
    letter-spacing:.1em;
}

.mct-competition-hero-copy h1{
    margin:6px 0 10px;
    color:#071528;
    font-size:31px;
    line-height:1.08;
    letter-spacing:-.025em;
    font-weight:850;
}

.mct-competition-meta{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    color:#6e8098;
    font-size:11px;
}

.mct-competition-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}

.mct-competition-meta svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:#547595;
    stroke-width:1.7;
}

.mct-competition-summary{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(2,minmax(110px,1fr));
    overflow:hidden;
    border:1px solid #dde7e1;
    border-radius:9px;
    background:rgba(255,255,255,.86);
}

.mct-competition-summary > div{
    min-height:72px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px 17px;
    border-right:1px solid #e6ece8;
}

.mct-competition-summary > div:last-child{
    border-right:0;
}

.mct-competition-summary strong{
    color:#10233b;
    font-size:20px;
    line-height:1;
}

.mct-competition-summary span{
    margin-top:5px;
    color:#8694a3;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

/* Toolbar */

.mct-competition-toolbar{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    padding:30px 0 15px;
}

.mct-competition-toolbar h2{
    margin:5px 0 0;
    color:#071527;
    font-size:23px;
    line-height:1.1;
    letter-spacing:-.02em;
    font-weight:850;
}

.mct-competition-toolbar p{
    margin:5px 0 0;
    color:#74849a;
    font-size:11px;
}

.mct-local-team-search{
    width:310px;
    height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 13px;
    border:1px solid #d5dee6;
    border-radius:8px;
    background:#fff;
}

.mct-local-team-search:focus-within{
    border-color:#8bcea5;
    box-shadow:0 0 0 3px rgba(8,182,75,.06);
}

.mct-local-team-search svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
    fill:none;
    stroke:#537293;
    stroke-width:1.8;
}

.mct-local-team-search input{
    min-width:0;
    width:100%;
    height:100%;
    padding:0!important;
    margin:0!important;
    border:0!important;
    outline:0!important;
    box-shadow:none!important;
    background:transparent!important;
    font-size:12px;
}

/* Teams grid */

.mct-competition-team-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.mct-competition-team-card{
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--text);
    text-decoration:none;
    transition:
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.mct-competition-team-card:hover{
    transform:translateY(-2px);
    border-color:#b8dcc4;
    box-shadow:0 9px 24px rgba(20,55,35,.06);
}

.mct-team-card-top{
    min-height:35px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:7px 10px;
    border-bottom:1px solid var(--soft-line);
    background:#fafbfc;
}

.mct-position{
    min-width:28px;
    height:21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    background:#edf1f4;
    color:#5f7288;
    font-size:9px;
    font-weight:850;
}

.mct-position.is-top{
    background:var(--green-soft);
    color:var(--green-dark);
}

.mct-team-points{
    display:flex;
    align-items:baseline;
    gap:3px;
    color:#8492a3;
    font-size:8px;
    text-transform:uppercase;
}

.mct-team-points strong{
    color:#10243d;
    font-size:14px;
}

.mct-team-card-identity{
    min-height:78px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 13px 9px;
}

.mct-team-card-logo{
    width:50px;
    height:50px;
    flex:0 0 50px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.mct-team-card-logo img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.mct-team-card-name{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.mct-team-card-name strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#0d2038;
    font-size:12px;
    font-weight:850;
}

.mct-team-card-name small{
    color:#8996a6;
    font-size:9px;
}

.mct-team-record{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    margin:0 11px;
    overflow:hidden;
    border:1px solid var(--soft-line);
    border-radius:6px;
    background:#fbfcfd;
}

.mct-team-record span{
    min-height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-right:1px solid var(--soft-line);
    color:#8a97a6;
    font-size:8px;
}

.mct-team-record span:last-child{
    border-right:0;
}

.mct-team-record b{
    color:#22354c;
    font-size:10px;
}

.mct-team-record .is-win b{
    color:#079844;
}

.mct-team-record .is-loss b{
    color:#d44747;
}

.mct-team-goals{
    min-height:50px;
    display:grid;
    grid-template-columns:1fr 1fr 18px;
    align-items:center;
    margin-top:10px;
    padding:8px 12px;
    border-top:1px solid var(--soft-line);
}

.mct-team-goals > span{
    display:flex;
    flex-direction:column;
}

.mct-team-goals small{
    color:#93a0af;
    font-size:8px;
}

.mct-team-goals strong{
    margin-top:2px;
    color:#1b3049;
    font-size:11px;
}

.mct-team-goals strong.is-positive{
    color:#079844;
}

.mct-team-goals strong.is-negative{
    color:#cf4848;
}

.mct-team-goals > svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:#68819a;
    stroke-width:1.8;
}

/* Empty */

.mct-team-empty{
    padding:45px 20px;
    border:1px dashed #d8e0e7;
    border-radius:10px;
    color:#8190a2;
    text-align:center;
    font-size:12px;
}

/* Footer */

.mct-competition-footer{
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-top:25px;
    padding:0 4px;
    border-top:1px solid var(--soft-line);
}

.mct-competition-footer span,
.mct-competition-footer a{
    display:flex;
    align-items:center;
    gap:7px;
    color:#71839a;
    font-size:10px;
}

.mct-competition-footer a{
    color:#14954a;
    text-decoration:none;
    font-weight:750;
}

.mct-competition-footer svg{
    width:15px;
    height:15px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
}

/* Tablet */

@media(max-width:1100px){

    .mct-competition-team-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Mobile */

@media(max-width:767px){

    .mct-competition-shell{
        width:calc(100% - 20px);
    }

    .mct-competition-breadcrumb{
        height:44px;
    }

    .mct-competition-hero{
        min-height:0;
        display:block;
        padding:17px;
        border-radius:9px;
    }

    .mct-competition-identity{
        gap:13px;
    }

    .mct-competition-hero-logo{
        width:68px;
        height:68px;
        flex-basis:68px;
        border-radius:10px;
    }

    .mct-competition-hero-copy h1{
        margin:4px 0 7px;
        font-size:22px;
    }

    .mct-competition-meta{
        gap:8px;
        font-size:9px;
    }

    .mct-competition-summary{
        margin-top:15px;
    }

    .mct-competition-summary > div{
        min-height:55px;
        padding:8px 12px;
    }

    .mct-competition-summary strong{
        font-size:15px;
    }

    .mct-competition-toolbar{
        display:block;
        padding-top:23px;
    }

    .mct-competition-toolbar h2{
        font-size:20px;
    }

    .mct-local-team-search{
        width:100%;
        height:44px;
        margin-top:14px;
    }

    .mct-local-team-search input{
        font-size:16px;
    }

    /*
     * Mobile becomes a dense football data list.
     */
    .mct-competition-team-grid{
        display:block;
        overflow:hidden;
        margin-top:13px;
        border:1px solid var(--line);
        border-radius:9px;
    }

    .mct-competition-team-card{
        display:grid;
        grid-template-columns:38px minmax(0,1fr) 62px;
        min-height:72px;
        align-items:center;
        border:0;
        border-bottom:1px solid var(--soft-line);
        border-radius:0;
    }

    .mct-competition-team-card:last-child{
        border-bottom:0;
    }

    .mct-competition-team-card:hover{
        transform:none;
        box-shadow:none;
    }

    .mct-team-card-top{
        min-height:0;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:0;
        border:0;
        background:transparent;
    }

    .mct-team-points{
        display:none;
    }

    .mct-position{
        width:26px;
        min-width:26px;
    }

    .mct-team-card-identity{
        min-height:70px;
        gap:10px;
        padding:8px 3px;
    }

    .mct-team-card-logo{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .mct-team-card-name strong{
        font-size:11px;
    }

    .mct-team-record{
        display:none;
    }

    .mct-team-goals{
        min-height:auto;
        grid-template-columns:1fr;
        margin:0;
        padding:8px 9px;
        border:0;
        text-align:right;
    }

    .mct-team-goals > span:first-child{
        display:none;
    }

    .mct-team-goals > span{
        align-items:flex-end;
    }

    .mct-team-goals small{
        display:none;
    }

    .mct-team-goals strong{
        font-size:10px;
    }

    .mct-team-goals > svg{
        display:none;
    }

    .mct-team-goals::after{
        content:"pts";
        margin-top:2px;
        color:#96a1af;
        font-size:8px;
    }

    /*
     * On mobile the right value should be points,
     * not goal difference.
     */
    .mct-team-goals > span:nth-child(2){
        display:none;
    }

    .mct-team-goals::before{
        content:attr(data-points);
    }

    .mct-competition-footer{
        align-items:flex-start;
        flex-direction:column;
        justify-content:center;
        padding:16px 3px;
    }
}

/* =========================================================
   MC TIMES COMPETITION — typography alignment with site
   ========================================================= */

.mct-competition-page,
.mct-competition-page button,
.mct-competition-page input,
.mct-competition-page select,
.mct-competition-page textarea,
.mct-competition-page a,
.mct-competition-page span,
.mct-competition-page strong,
.mct-competition-page small,
.mct-competition-page p,
.mct-competition-page h1,
.mct-competition-page h2,
.mct-competition-page h3,
.mct-competition-page h4{
    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        Arial,
        sans-serif !important;
}

.mct-competition-page h1,
.mct-competition-page h2,
.mct-competition-page h3,
.mct-competition-page .mct-team-card-name strong,
.mct-competition-page .mct-team-points strong,
.mct-competition-page .mct-competition-summary strong{
    font-weight:700 !important;
}

.mct-competition-page input{
    font-weight:400 !important;
}

/* =========================================================
   MC TIMES COMPETITION — typography system
   Headings: Barlow Condensed
   Data / UI: Rajdhani
   ========================================================= */

/* Base / data layer */
.mct-competition-page,
.mct-competition-page button,
.mct-competition-page input,
.mct-competition-page select,
.mct-competition-page textarea,
.mct-competition-page a,
.mct-competition-page span,
.mct-competition-page small,
.mct-competition-page p{
    font-family:
        Rajdhani,
        "Arial Narrow",
        Arial,
        sans-serif !important;
}

/* Headings / names */
.mct-competition-page h1,
.mct-competition-page h2,
.mct-competition-page h3,
.mct-competition-page h4,
.mct-competition-page .mct-team-card-name strong,
.mct-competition-page .mct-competition-hero-copy h1{
    font-family:
        "Barlow Condensed",
        "Arial Narrow",
        Arial,
        sans-serif !important;
    font-weight:700 !important;
}

/* Data-heavy elements */
.mct-competition-page .mct-position,
.mct-competition-page .mct-team-points,
.mct-competition-page .mct-team-record,
.mct-competition-page .mct-team-goals,
.mct-competition-page .mct-competition-summary,
.mct-competition-page .mct-competition-meta,
.mct-competition-page .mct-competition-kicker,
.mct-competition-page .mct-section-kicker{
    font-family:
        Rajdhani,
        "Arial Narrow",
        Arial,
        sans-serif !important;
    font-weight:600 !important;
}

/* =========================================================
   MC Times Competition — mobile list chevron
   ========================================================= */

.mct-team-mobile-arrow{
    display:none;
    width:15px;
    height:15px;
    fill:none;
    stroke:#708399;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

@media(max-width:767px){

    .mct-competition-team-card{
        grid-template-columns:
            38px
            minmax(0,1fr)
            28px !important;
    }

    .mct-team-card-top{
        grid-column:1 !important;
        grid-row:1 !important;
    }

    .mct-team-card-identity{
        grid-column:2 !important;
        grid-row:1 !important;
    }

    .mct-team-points{
        display:none !important;
    }

    .mct-team-goals{
        display:none !important;
    }

    .mct-team-mobile-arrow{
        display:block !important;
        grid-column:3 !important;
        grid-row:1 !important;
        justify-self:center !important;
        align-self:center !important;
    }
}

/* =========================================================
   MC Times Competition — fix mobile chevron position
   ========================================================= */

@media(max-width:767px){

    .mct-competition-team-card{
        position:relative !important;

        display:grid !important;
        grid-template-columns:
            38px
            minmax(0,1fr)
            28px !important;

        align-items:center !important;
    }

    .mct-team-card-top{
        grid-column:1 !important;
        grid-row:1 !important;
    }

    .mct-team-card-identity{
        grid-column:2 !important;
        grid-row:1 !important;
    }

    .mct-team-points,
    .mct-team-record,
    .mct-team-goals{
        display:none !important;
    }

    .mct-team-mobile-arrow{
        display:block !important;

        grid-column:3 !important;
        grid-row:1 !important;

        width:15px !important;
        height:15px !important;

        justify-self:center !important;
        align-self:center !important;

        fill:none !important;
        stroke:#708399 !important;
        stroke-width:1.9 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;

        pointer-events:none;
    }
}
