/* =====================================
   ROSTER PLAYER CARDS
===================================== */
/* === PLAYER CARD GRID === */
.sp-player-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 30px;
	margin-top: 30px;
}

/* === PLAYER CARD === */
.sp-player-card {
    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.sp-player-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.10);
}
/* === PLAYER IMAGE === */
.sp-player-image {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.sp-player-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}
/* === PLAYER META === */
.sp-player-meta {
    position: relative;

    padding:
        42px
        24px
        30px;

    text-align: center;
}

/* === JERSEY NUMBER BADGE === */
.sp-player-number {
    position: absolute;

    top: -24px;
    left: 50%;

    transform: translateX(-50%);

    background: #ef1b1b;
    color: #ffffff;

    min-width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 22px;
    font-weight: 900;

    border-radius: 50%;

    box-shadow:
        0 8px 20px rgba(239,27,27,.35);
}
/* === PLAYER NAME === */
.sp-player-name {
    margin: 0;

    font-size: 22px;
    font-weight: 800;

    line-height: 1.3;
}

.sp-player-name a {
	text-decoration: none;
	color: #111;
}

/* === MOBILE TWEAK === */
@media (max-width: 480px) {
	.sp-player-number {
		font-size: 22px;
		padding: 8px 14px;
	}
}
/* =====================================
   POSITION FILTER BUTTONS
===================================== */

.sp-position-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;

    margin: 0 0 60px;
}

.sp-position-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 170px;

    padding: 14px 26px;

    background: #ffffff;

    color: #000032;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 800;
    font-size: 14px;

    text-transform: uppercase;
    letter-spacing: 1px;

    box-shadow:
        0 8px 24px rgba(0,0,0,0.06);

    transition: all .25s ease;
}

.sp-position-links a:hover {
    transform: translateY(-3px);

    background: #ef1b1b;
    color: #ffffff;
}

.sp-position-links a.active {
    background: #ef1b1b;
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(239,27,27,.25);
}