/* ===========================================================
   PLAYERS HERO BANNER
===========================================================*/

.players-hero {
    position: relative;
    overflow: hidden;

    /* Banner height / spacing */
    padding: var(--space-6) 0 var(--space-7);

    /*
     * Image right side par rahegi.
     * Left side dark overlay rahega.
     */
    background-image:
        linear-gradient(90deg, 
        rgba(11,18,32,0.97) 30%,
        rgba(11,18,32,0.55) 65%, 
        rgba(11,18,32,0.25) 100%),
        
        url("../images/hero/players-hero.webp");

    background-repeat: no-repeat;

    /*
     * Reference image jaisa right-side coverage
     */
    background-size:
        100% 100%,
        70% auto;

    background-position:
        center,
        right 40%;

    background-color: var(--color-bg);
}




.players-hero-breadcrumb{
    margin-bottom:var(--space-3);
}

.players-hero h1{
    font-size:2.5rem;
    letter-spacing:0.02em;
    margin-bottom:var(--space-2);
}

.players-hero-sub{
    color:var(--color-text-muted);
    font-size:var(--fs-body);
}

.players-hero-sub span{
    color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.players-hero-season{
    position:absolute;
    top:var(--space-6);
    right:var(--space-6);
    font-size:var(--fs-small);
    padding:8px 16px;
}

/* ===========================================================
   STATS STRIP (6 items, each with a value + label + sub-label)
===========================================================*/

.players-stat-strip{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:var(--space-4);

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    padding:var(--space-4);

    margin:calc(-1 * var(--space-6)) 0 var(--space-5);
    position:relative;
    z-index:1;
}

.players-stat-strip .stat-label span{
    display:block;
    font-size:9px;
    font-weight:var(--fw-regular);
    color:var(--color-text-faint);
    text-transform:none;
    letter-spacing:0;
}

.stat-icon.icon-teal{ background:rgba(20, 184, 166, 0.15); color:#14B8A6; }

/* ===========================================================
   VIEW TOGGLE (grid / list)
===========================================================*/

.view-toggle{
    display:flex;
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    overflow:hidden;
}

.view-toggle-btn{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--color-surface);
    color:var(--color-text-muted);
    border:none;
    cursor:pointer;
}

.view-toggle-btn.active{
    background:var(--color-gold);
    color:#1A1305;
}

/* ===========================================================
   LAYOUT: FILTER SIDEBAR + PLAYER GRID
===========================================================*/

.players-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:var(--space-5);
    align-items:start;
}

.players-main{
    min-width:0;
}

/* ===========================================================
   FILTER SIDEBAR
===========================================================*/

.players-filter-sidebar{
    position:sticky;
    top:var(--space-4);
}

.players-filter-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:var(--space-4);
}

.reset-filters-btn{
    background:none;
    border:none;
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    cursor:pointer;
}

.reset-filters-btn:hover{
    color:var(--color-gold);
}

.filter-group{
    padding-bottom:var(--space-4);
    margin-bottom:var(--space-4);
    border-bottom:1px solid var(--color-border);
}

.filter-group:last-of-type{
    border-bottom:none;
}

.filter-group h4{
    font-size:var(--fs-small);
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--color-text-muted);
    margin-bottom:var(--space-3);
}

.filter-checkbox{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    padding:5px 0;
    font-size:var(--fs-small);
    cursor:pointer;
}

.filter-checkbox span{
    flex:1;
}

.filter-checkbox em{
    font-style:normal;
    color:var(--color-text-faint);
    font-size:var(--fs-tiny);
}

.filter-checkbox input{
    accent-color:var(--color-gold);
    width:15px;
    height:15px;
}

/* ===========================================================
   PLAYER GRID + CARDS
===========================================================*/

.player-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

/* List view — same cards, single column, so the toggle actually changes
   something instead of just looking clickable. */
.player-grid.list-view{
    grid-template-columns:1fr;
}

.player-card{
    position:relative;
    display:block;

    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-lg);
    overflow:hidden;

    text-decoration:none;
    color:inherit;

    transition:border-color var(--transition-fast), transform var(--transition-fast);
}

.player-card:hover{
    border-color:var(--color-gold);
    transform:translateY(-3px);
}

.player-jersey{
    position:absolute;
    top:var(--space-3);
    left:var(--space-3);
    z-index:2;

    background:rgba(11,18,32,0.75);
    color:#fff;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:var(--fs-small);
    padding:2px 8px;
    border-radius:var(--radius-sm);
}

.player-card-crest{
    position:absolute;
    top:var(--space-3);
    right:var(--space-3);
    z-index:2;
    margin:0; /* .crest-badge-sm has no auto-margin of its own, but being
                 explicit here avoids the same class-reuse bug fixed
                 elsewhere if this ever gains the full .crest-badge class */
}

.player-photo{
    height:180px;
    background:linear-gradient(180deg, var(--color-surface-alt), var(--color-surface));
    display:flex;
    align-items:center;
    justify-content:center;
}

.player-avatar-fallback{
    width:84px;
    height:84px;
    font-size:1.5rem;
}

.role-pill{
    position:relative;
    z-index:2;
    display:inline-block;
    margin:-18px 0 0 var(--space-3);
    padding:4px 12px;
    border-radius:var(--radius-sm);
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:#fff;
}

.role-batsman{ background:var(--color-info); }
.role-bowler{ background:#7A1F1F; }
.role-all-rounder{ background:var(--color-success); }
.role-wicket-keeper{ background:#8A5A12; }

.player-card-body{
    padding:var(--space-4) var(--space-3) var(--space-3);
}

.player-card-body .name{
    font-weight:var(--fw-bold);
    font-size:var(--fs-body);
}

.player-card-body .team{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    margin-bottom:var(--space-3);
}

.player-stats-row{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--space-2);
    padding-top:var(--space-3);
    border-top:1px solid var(--color-border);
}

.player-stats-row .value{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:var(--fs-small);
}

.player-stats-row .label{
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
}

.no-results-msg{
    text-align:center;
    color:var(--color-text-muted);
    padding:var(--space-6) 0;
}

/* ===========================================================
   RESPONSIVE
===========================================================*/

@media (max-width: 1200px){
    .players-stat-strip{
        grid-template-columns:repeat(3, 1fr);
    }
    .player-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 1024px){
    .players-layout{
        grid-template-columns:1fr;
    }
    .players-filter-sidebar{
        position:static;
    }
}

@media (max-width: 768px){
    .players-stat-strip{
        grid-template-columns:repeat(2, 1fr);
    }
    .player-grid{
        grid-template-columns:1fr;
    }
    .players-hero-season{
        position:static;
        display:inline-block;
        margin-top:var(--space-3);
    }
}
/* ===========================================================
   MOBILE FILTER TOGGLE
   Same fix as fixtures.css — the filter panel used to just sit first
   in DOM order and get dumped above the player grid on mobile via
   position:static. Hide it behind a toggle button instead, collapsed
   by default on phones/tablets.
===========================================================*/

.fixtures-filter-toggle{
    display:none;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-2);
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-3) var(--space-4);
    color:var(--color-text);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
    cursor:pointer;
    margin-bottom:var(--space-4);
}

.fixtures-filter-toggle span{
    display:flex;
    align-items:center;
    gap:8px;
}

.fixtures-filter-toggle-caret{
    transition:transform 0.2s ease;
}

.fixtures-filter-toggle[aria-expanded="true"] .fixtures-filter-toggle-caret{
    transform:rotate(180deg);
}

@media (max-width: 1024px){
    .fixtures-filter-toggle{
        display:flex;
    }

    #playersFilterPanel{
        display:none;
    }

    #playersFilterPanel.open{
        display:block;
        margin-bottom:var(--space-5);
    }
}