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

.mdv-matchday-card {

    position: relative;

    overflow: hidden;

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

    min-height:
        var(--mdv-card-min-height, 720px);

    padding:
        var(--mdv-card-padding, 40px);

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

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

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

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

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

.mdv-matchday-card-bg {

    position: absolute;

    inset: 0;

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

    pointer-events: none;
}

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

.mdv-matchday-card-inner {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width:
        var(--mdv-card-content-width, 900px);
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.mdv-matchday-card-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        var(--mdv-card-header-gap, 20px);

    margin-bottom:
        var(--mdv-card-header-spacing, 80px);
}

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

.mdv-matchday-card-logo img {

    width:
        var(--mdv-card-logo-size, 120px);

    height:
        var(--mdv-card-logo-size, 120px);

    object-fit: contain;

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

    border-radius:
        var(--mdv-card-logo-radius, 28px);

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

    box-shadow:
        var(
            --mdv-card-logo-shadow,
            0 20px 40px rgba(0,0,0,0.22)
        );
}

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

.mdv-matchday-card-label {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        var(--mdv-card-label-padding-y, 14px)
        var(--mdv-card-label-padding-x, 22px);

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

    background:
        var(--mdv-card-label-bg, rgba(255,255,255,0.14));

    font-size:
        var(--mdv-card-label-font-size, 15px);

    font-weight:
        var(--mdv-card-label-font-weight, 800);

    letter-spacing:
        var(--mdv-card-label-letter-spacing, 2px);

    text-transform: uppercase;
}

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

.mdv-matchday-card-teams {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        var(--mdv-card-team-gap, 28px);
}

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

.mdv-matchday-card-team {

    font-size:
        var(--mdv-card-team-font-size, 48px);

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

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

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

    text-transform: uppercase;

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;
}

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

.mdv-matchday-card-vs {

    width:
        var(--mdv-card-vs-size, 110px);

    height:
        var(--mdv-card-vs-size, 110px);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background:
        var(--mdv-card-vs-bg, rgba(255,255,255,0.12));

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

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

    letter-spacing:
        var(--mdv-card-vs-letter-spacing, 2px);
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.mdv-matchday-card-footer {

    margin-top:
        var(--mdv-card-footer-spacing, 80px);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap:
        var(--mdv-card-footer-gap, 20px);
}

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

.mdv-matchday-card-meta {

    display: flex;

    align-items: center;

    gap:
        var(--mdv-card-meta-gap, 10px);

    padding:
        var(--mdv-card-meta-padding-y, 14px)
        var(--mdv-card-meta-padding-x, 20px);

    border-radius:
        var(--mdv-card-meta-radius, 18px);

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

    font-size:
        var(--mdv-card-meta-font-size, 16px);

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

    backdrop-filter:
        blur(10px);
}

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

.mdv-matchday-team-logo {

    margin-bottom:
        var(--mdv-card-team-logo-spacing, 24px);
}

.mdv-matchday-team-logo img {

    width:
        var(--mdv-card-team-logo-size, 120px);

    height:
        var(--mdv-card-team-logo-size, 120px);

    object-fit: contain;

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

    border-radius:
        var(--mdv-card-team-logo-radius, 28px);

    padding:
        var(--mdv-card-team-logo-padding, 16px);

    box-shadow:
        var(
            --mdv-card-team-logo-shadow,
            0 20px 40px rgba(0,0,0,0.20)
        );
}

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

.mdv-matchday-team-name {

    font-size:
        var(--mdv-card-team-name-size, 48px);

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

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

    letter-spacing:
        var(--mdv-card-team-name-letter-spacing, -1px);

    text-transform: uppercase;

    white-space: normal;

    word-break: break-word;

    overflow-wrap: break-word;
}

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

@media (max-width: 768px) {

    .mdv-matchday-card {

        min-height:
            var(--mdv-card-min-height-mobile, 620px);

        padding:
            var(--mdv-card-padding-mobile, 28px);
    }

    .mdv-matchday-card-header {

        flex-direction: column;

        margin-bottom:
            var(--mdv-card-header-spacing-mobile, 50px);
    }

    .mdv-matchday-card-logo img {

        width:
            var(--mdv-card-logo-size-mobile, 90px);

        height:
            var(--mdv-card-logo-size-mobile, 90px);
    }

    .mdv-matchday-card-team {

        font-size:
            var(--mdv-card-team-font-size-mobile, 34px);
    }

    .mdv-matchday-card-vs {

        width:
            var(--mdv-card-vs-size-mobile, 80px);

        height:
            var(--mdv-card-vs-size-mobile, 80px);

        font-size:
            var(--mdv-card-vs-font-size-mobile, 20px);
    }

    .mdv-matchday-card-footer {

        margin-top:
            var(--mdv-card-footer-spacing-mobile, 50px);
    }

    .mdv-matchday-team-logo img {

        width:
            var(--mdv-card-team-logo-size-mobile, 90px);

        height:
            var(--mdv-card-team-logo-size-mobile, 90px);
    }

    .mdv-matchday-team-name {

        font-size:
            var(--mdv-card-team-name-size-mobile, 34px);
    }
}