/* =========================================================
   Match Single - Layout
   ========================================================= */

/* Main content */
.match-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.match-sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
}

/* Desktop layout */
.match-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 24px;
    align-items: start;
    width: min(
        var(--site-max-width),
        calc(100% - (var(--site-side-space) * 2))
    );
    margin-inline: auto;
    margin-top: 0;
}

@media (min-width: 993px) {
    /* Main cards */
    .match-content > .match-single-card,
    .match-content .match-standings-card,
    .match-content .match-events,
    .match-content .lwf-competition-info,
    .match-content .overview-card,
    .match-content .overview-form-widget,
    .match-content .h2h-widget,
       .match-content .lwf-knockout-bracket {
       width: 100%;
        margin-inline-start: 0;
        margin-inline-end: auto;
        box-sizing: border-box;
    }

/* Sidebar cards */
.match-sidebar > *,
.match-sidebar .match-standings-card,
.match-sidebar .lwf-info-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
}

/* Match hero: full viewport width */
.match-page > .match-single-card {
    display: block;
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    left: auto;
    right: auto;
    transform: none;
    box-sizing: border-box;
}

/* Remove space above the match page */
.match-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tablet and mobile */
@media (max-width: 992px) {
    .match-layout {
        grid-template-columns: minmax(0, 1fr);
        width: calc(100% - 24px);
        max-width: none;
        margin-inline: auto;
        box-sizing: border-box;
    }

    .match-content,
    .match-sidebar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .match-sidebar {
        position: static;
    }

    /* All content cards share the same parent width */
    .match-content .match-tab-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .match-content .match-standings-card,
    .match-content .match-events,
    .match-content .lwf-tie-break-info,
    .match-content .lwf-competition-info,
    .match-content .overview-card,
    .match-content .overview-form-widget,
    .match-content .h2h-widget,
    .match-content .lwf-knockout-bracket {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {

    .match-page .match-sidebar {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        align-items: stretch;
    }

}

@media (max-width: 768px) {

    .match-page .match-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;

        width: calc(100% - 24px) !important;
        max-width: none !important;
        margin-inline: auto !important;

        box-sizing: border-box;
    }

}

/* =========================================================
   French - Match Events Position
   ========================================================= */

@media (min-width: 993px) {

    .match-content .match-events.match-events--fr {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}

/* =========================================
   French match widgets - align to right
========================================= */

@media (min-width: 993px) {

    .match-content .match-teams-standing-widget--fr,
    .match-content .h2h-widget--fr {
        margin-left: auto !important;
        margin-right: 0 !important;
    }

}

/* =========================================================
   French — Mirror columns
========================================================= */

@media (min-width: 993px) {

    .match-page--fr .match-layout {
        grid-template-columns: 400px minmax(0, 1fr);
    }

    .match-page--fr .match-sidebar {
        grid-column: 1;
        grid-row: 1;
    }

    .match-page--fr .match-content {
        grid-column: 2;
        grid-row: 1;
    }

}

@media (min-width: 993px) {

    .match-page--fr .match-content > .match-single-card,
    .match-page--fr .match-content .match-standings-card,
    .match-page--fr .match-content .match-events,
    .match-page--fr .match-content .lwf-competition-info,
    .match-page--fr .match-content .overview-card,
    .match-page--fr .match-content .overview-form-widget,
    .match-page--fr .match-content .h2h-widget,
    .match-page--fr .match-content .lwf-knockout-bracket {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

}