/*
|--------------------------------------------------------------------------
| mediaDIV Football Manager
| Matchday Hero
|--------------------------------------------------------------------------
*/

.mdv-matchday-hero {

    position: relative;

    overflow: hidden;

    border-radius:
        var(--mdv-hero-radius, 40px);

    padding:
        var(--mdv-hero-padding-y, 80px)
        var(--mdv-hero-padding-x, 40px);

    background:
        linear-gradient(
            135deg,
            var(--mdv-primary),
            var(--mdv-secondary)
        );

    color:
        var(--mdv-hero-text-color, #ffffff);

    margin-bottom:
        var(--mdv-hero-margin-bottom, 40px);

    font-family:
        var(--mdv-font-family, inherit);
}

/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.mdv-matchday-overlay {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255,255,255,0.10),
            transparent 40%
        );

    pointer-events: none;
}

/*
|--------------------------------------------------------------------------
| Inner
|--------------------------------------------------------------------------
*/

.mdv-matchday-inner {

    position: relative;

    z-index: 2;
}

/*
|--------------------------------------------------------------------------
| Top
|--------------------------------------------------------------------------
*/

.mdv-matchday-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        var(--mdv-hero-top-spacing, 80px);
}

/*
|--------------------------------------------------------------------------
| Corner Logo
|--------------------------------------------------------------------------
*/

.mdv-matchday-logo img {

    width:
        var(--mdv-hero-corner-logo-size, 90px);

    height:
        var(--mdv-hero-corner-logo-size, 90px);

    object-fit: contain;

    background:
        var(--mdv-hero-logo-bg, #ffffff);

    border-radius:
        var(--mdv-hero-corner-logo-radius, 24px);

    padding:
        var(--mdv-hero-corner-logo-padding, 12px);
}

/*
|--------------------------------------------------------------------------
| Matchday Label
|--------------------------------------------------------------------------
*/

.mdv-matchday-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        var(--mdv-hero-label-padding-y, 14px)
        var(--mdv-hero-label-padding-x, 24px);

    border-radius:
        var(--mdv-hero-label-radius, 999px);

    background:
        var(--mdv-hero-label-bg, rgba(255,255,255,0.10));

    font-size:
        var(--mdv-hero-label-font-size, 14px);

    font-weight:
        var(--mdv-hero-label-font-weight, 700);

    letter-spacing:
        var(--mdv-hero-label-letter-spacing, 1px);

    text-transform: uppercase;
}

/*
|--------------------------------------------------------------------------
| Teams
|--------------------------------------------------------------------------
*/

.mdv-matchday-teams {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap:
        var(--mdv-hero-team-gap, 120px);

    margin-top:
        var(--mdv-hero-team-margin-top, 40px);

    flex-wrap: nowrap;
}

/*
|--------------------------------------------------------------------------
| Team
|--------------------------------------------------------------------------
*/

.mdv-matchday-team {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: flex-start;

    text-align: center;

    flex: 1;

    max-width:
        var(--mdv-hero-team-max-width, 420px);
}

/*
|--------------------------------------------------------------------------
| Team Logo
|--------------------------------------------------------------------------
*/

.mdv-matchday-team-logo {

    margin-bottom:
        var(--mdv-hero-logo-spacing, 36px);
}

.mdv-matchday-team-logo img {

    width:
        var(--mdv-hero-logo-size, 140px);

    height:
        var(--mdv-hero-logo-size, 140px);

    object-fit: contain;

    background:
        var(--mdv-hero-logo-bg, #ffffff);

    border-radius:
        var(--mdv-hero-logo-radius, 32px);

    padding:
        var(--mdv-hero-logo-padding, 18px);

    box-shadow:
        var(
            --mdv-hero-logo-shadow,
            0 20px 60px rgba(0,0,0,0.25)
        );
}

/*
|--------------------------------------------------------------------------
| Team Name
|--------------------------------------------------------------------------
*/

.mdv-matchday-team-name {

    font-size:
        var(--mdv-hero-team-font-size, 56px);

    line-height:
        var(--mdv-hero-team-line-height, 1.05);

    font-weight:
        var(--mdv-hero-team-font-weight, 900);

    text-transform: uppercase;

    color:
        var(--mdv-hero-text-color, #ffffff);

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;

    letter-spacing:
        var(--mdv-hero-team-letter-spacing, -1px);
}

/*
|--------------------------------------------------------------------------
| VS
|--------------------------------------------------------------------------
*/

.mdv-matchday-vs {

    width:
        var(--mdv-hero-vs-size, 90px);

    height:
        var(--mdv-hero-vs-size, 90px);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background:
        var(--mdv-hero-vs-bg, rgba(255,255,255,0.10));

    font-size:
        var(--mdv-hero-vs-font-size, 28px);

    font-weight:
        var(--mdv-hero-vs-font-weight, 900);

    margin-top:
        var(--mdv-hero-vs-margin-top, 120px);
}

/*
|--------------------------------------------------------------------------
| Meta
|--------------------------------------------------------------------------
*/

.mdv-matchday-meta {

    margin-top:
        var(--mdv-hero-meta-margin-top, 70px);

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        var(--mdv-hero-meta-gap, 20px);

    flex-wrap: wrap;
}

.mdv-matchday-meta div,
.mdv-matchday-countdown {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background:
        var(--mdv-hero-meta-bg, rgba(255,255,255,0.10));

    padding:
        var(--mdv-hero-meta-padding-y, 16px)
        var(--mdv-hero-meta-padding-x, 22px);

    border-radius:
        var(--mdv-hero-meta-radius, 16px);

    font-size:
        var(--mdv-hero-meta-font-size, 18px);

    font-weight:
        var(--mdv-hero-meta-font-weight, 600);
}

/*
|--------------------------------------------------------------------------
| Location
|--------------------------------------------------------------------------
*/

.mdv-matchday-location {

    margin-top:
        var(--mdv-hero-location-margin-top, 40px);

    text-align: center;

    font-size:
        var(--mdv-hero-location-font-size, 20px);

    line-height:
        var(--mdv-hero-location-line-height, 1.7);
}

/*
|--------------------------------------------------------------------------
| Route Button
|--------------------------------------------------------------------------
*/

.mdv-matchday-route {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top:
        var(--mdv-hero-route-margin-top, 28px);

    padding:
        var(--mdv-hero-route-padding-y, 16px)
        var(--mdv-hero-route-padding-x, 34px);

    border-radius:
        var(--mdv-hero-route-radius, 999px);

    background:
        var(--mdv-hero-route-bg, #ffffff);

    color:
        var(--mdv-hero-route-color, #111111);

    font-weight:
        var(--mdv-hero-route-font-weight, 700);

    text-decoration: none;

    transition:
        var(--mdv-transition, all 0.2s ease);
}

.mdv-matchday-route:hover {

    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

    .mdv-matchday-team-name {

        font-size:
            var(--mdv-hero-team-font-size-tablet, 38px);

        line-height: 1.1;
    }

    .mdv-matchday-teams {

        gap:
            var(--mdv-hero-team-gap-tablet, 80px);
    }
}

@media (max-width: 768px) {

    .mdv-matchday-hero {

        padding:
            var(--mdv-hero-padding-y-mobile, 48px)
            var(--mdv-hero-padding-x-mobile, 24px);
    }

    .mdv-matchday-top {

        margin-bottom:
            var(--mdv-hero-top-spacing-mobile, 50px);
    }

    .mdv-matchday-teams {

        flex-direction: column;

        align-items: center;

        gap:
            var(--mdv-hero-team-gap-mobile, 50px);
    }

    .mdv-matchday-vs {

        margin-top: 0;
    }

    .mdv-matchday-team-name {

        font-size:
            var(--mdv-hero-team-font-size-mobile, 42px);
    }

    .mdv-matchday-team-logo img {

        width:
            var(--mdv-hero-logo-size-mobile, 110px);

        height:
            var(--mdv-hero-logo-size-mobile, 110px);
    }

    .mdv-matchday-meta {

        flex-direction: column;
    }

    .mdv-matchday-location {

        font-size:
            var(--mdv-hero-location-font-size-mobile, 16px);
    }
}