/*
|--------------------------------------------------------------------------
| mediaDIV Football Manager
| Player Grid
|--------------------------------------------------------------------------
*/

.fsv-player-grid {

    display: grid;

    grid-template-columns:
        repeat(
            var(--mdv-player-columns, 4),
            minmax(0, 1fr)
        );

    gap:
        var(--mdv-player-gap, 24px);

    align-items: stretch;
}

/*
|--------------------------------------------------------------------------
| Player Card
|--------------------------------------------------------------------------
*/

.fsv-player-card {

    position: relative;

    overflow: hidden;

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

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

    box-shadow:
        var(
            --mdv-player-card-shadow,
            0 10px 30px rgba(0,0,0,0.08)
        );

    transition:
        var(
            --mdv-player-transition,
            all 0.3s ease
        );

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

.fsv-player-card:hover {

    transform:
        translateY(
            var(--mdv-player-hover-translate, -6px)
        );

    box-shadow:
        var(
            --mdv-player-card-shadow-hover,
            0 20px 40px rgba(0,0,0,0.12)
        );
}

/*
|--------------------------------------------------------------------------
| Player Image
|--------------------------------------------------------------------------
*/

.fsv-player-card-image {

    position: relative;

    overflow: hidden;

    height:
        var(--mdv-player-image-height, 420px);

    background:
        var(--mdv-player-image-bg, #f5f5f5);
}

.fsv-player-card-image img {

    width: 100%;

    height: 100%;

    object-fit:
        var(--mdv-player-image-fit, cover);

    display: block;

    transition:
        var(
            --mdv-player-image-transition,
            transform 0.4s ease
        );
}

.fsv-player-card:hover
.fsv-player-card-image img {

    transform:
        scale(
            var(--mdv-player-hover-scale, 1.04)
        );
}

/*
|--------------------------------------------------------------------------
| Player Content
|--------------------------------------------------------------------------
*/

.fsv-player-card-content {

    padding:
        var(--mdv-player-card-padding, 24px);
}

/*
|--------------------------------------------------------------------------
| Player Name
|--------------------------------------------------------------------------
*/

.fsv-player-name {

    margin: 0 0 10px;

    font-size:
        var(--mdv-player-name-size, 28px);

    line-height:
        var(--mdv-player-name-line-height, 1.1);

    font-weight:
        var(--mdv-player-name-font-weight, 800);

    color:
        var(--mdv-player-name-color, #111111);

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

    text-transform:
        var(--mdv-player-name-transform, uppercase);
}

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

.fsv-player-meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

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

    margin-top:
        var(--mdv-player-meta-margin-top, 12px);
}

/*
|--------------------------------------------------------------------------
| Player Badge
|--------------------------------------------------------------------------
*/

.fsv-player-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        var(--mdv-player-badge-padding-y, 8px)
        var(--mdv-player-badge-padding-x, 14px);

    border-radius:
        var(--mdv-player-badge-radius, 999px);

    background:
        var(--mdv-player-badge-bg, #111111);

    color:
        var(--mdv-player-badge-color, #ffffff);

    font-size:
        var(--mdv-player-badge-font-size, 13px);

    font-weight:
        var(--mdv-player-badge-font-weight, 700);

    text-transform: uppercase;

    letter-spacing:
        var(--mdv-player-badge-letter-spacing, 1px);
}

/*
|--------------------------------------------------------------------------
| Player Number
|--------------------------------------------------------------------------
*/

.fsv-player-number {

    position: absolute;

    top:
        var(--mdv-player-number-top, 20px);

    right:
        var(--mdv-player-number-right, 20px);

    width:
        var(--mdv-player-number-size, 60px);

    height:
        var(--mdv-player-number-size, 60px);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    background:
        var(
            --mdv-player-number-bg,
            rgba(0,0,0,0.75)
        );

    color:
        var(--mdv-player-number-color, #ffffff);

    font-size:
        var(--mdv-player-number-font-size, 20px);

    font-weight:
        var(--mdv-player-number-font-weight, 900);

    backdrop-filter: blur(10px);
}

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

@media (max-width: 1200px) {

    .fsv-player-grid {

        grid-template-columns:
            repeat(
                var(--mdv-player-columns-tablet, 3),
                minmax(0, 1fr)
            );
    }

    .fsv-player-card-image {

        height:
            var(--mdv-player-image-height-tablet, 360px);
    }
}

@media (max-width: 768px) {

    .fsv-player-grid {

        grid-template-columns:
            repeat(
                var(--mdv-player-columns-mobile, 2),
                minmax(0, 1fr)
            );

        gap:
            var(--mdv-player-gap-mobile, 18px);
    }

    .fsv-player-card-image {

        height:
            var(--mdv-player-image-height-mobile, 260px);
    }

    .fsv-player-card-content {

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

    .fsv-player-name {

        font-size:
            var(--mdv-player-name-size-mobile, 22px);
    }

    .fsv-player-number {

        width:
            var(--mdv-player-number-size-mobile, 48px);

        height:
            var(--mdv-player-number-size-mobile, 48px);

        font-size:
            var(--mdv-player-number-font-size-mobile, 16px);
    }
}

@media (max-width: 520px) {

    .fsv-player-grid {

        grid-template-columns:
            repeat(
                var(--mdv-player-columns-small-mobile, 1),
                minmax(0, 1fr)
            );
    }
}