/* ===========================================================
   PLAYER PROFILE HERO BANNER
   (same overlay technique as .players-hero / .fixtures-hero — a
   page-specific class layered on top of the shared base class)
===========================================================*/

/* Breadcrumb strip — plain, no banner image (moved onto the hero card
   below per reference: the banner sits BEHIND the profile card content,
   not in a separate strip above it). */

.player-profile-hero{
    padding:var(--space-5) 0;
}

/* ===========================================================
   PROFILE HERO CARD (photo + identity + team crest + overview)
===========================================================*/

.profile-hero-card{
    border-color:var(--color-gold);
    background:
        linear-gradient(90deg, rgba(11,18,32,0.95) 25%, rgba(11,18,32,0.75) 60%, rgba(11,18,32,0.55) 100%),
        url("../images/hero/Player\ profile\ banner.webp");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

/* Top row: photo + identity + crest + overview panel, side by side.
   Kept separate from the outer .card so the stat-strip can sit below
   it, inside the SAME bordered card, divided by a hairline only —
   matching the reference design (not a second boxed card). */

.profile-hero-top{
    display:flex;
    align-items:flex-start;
    gap:var(--space-6);
    flex-wrap:wrap;
    margin-bottom:0px;
}

/* --- Photo block --- */
/* Jersey badge stacks ABOVE the photo (its own row), not overlapping
   the photo corner — matches the reference, where the "07" badge sits
   clear of the player photo with a visible gap. */

.profile-photo-block{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    flex-shrink:0;
    
}

.profile-photo-frame{
    width:220px;
    height:250px;
    border-radius:var(--radius-md);
    overflow:hidden;
    background:linear-gradient(180deg, var(--color-surface-alt), var(--color-surface));
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:var(--space-4);
    margin-left:70px;
}

.profile-photo-frame .avatar{
    width:120px;
    height:120px;
    border-radius:50%;
    font-size:2rem;
    
}

.jersey-badge{
    text-align:center;
    background:var(--color-bg);
    border:1px solid var(--color-gold);
    border-radius:var(--radius-sm);
    padding:6px 10px;
    line-height:1.15;
}

.jersey-badge .num{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:1.1rem;
    color:var(--color-gold);
}

.jersey-badge .label{
    display:block;
    font-size:8px;
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
    white-space:nowrap;
}

/* --- Identity block (middle) --- */

.profile-identity{
    flex:1;
    min-width:260px;
}

.profile-name-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin:var(--space-2) 0 6px;
}

.profile-name-row h1{
    font-size:1.6rem;
    letter-spacing:0.02em;
}

.verified-badge{
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--color-info);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.profile-team-line{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    margin-bottom:var(--space-4);
    
}

.profile-team-line .crest-badge-sm{
    margin:0;
}

.profile-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-5);
    margin-bottom:var(--space-3);
}

.profile-meta-item{
    display:flex;
    align-items:center;
    gap:8px;
}

.profile-meta-item .meta-icon{
    width:28px;
    height:28px;
    border-radius:50%;
    background:rgba(232,170,61,0.12);
    color:var(--color-gold);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    font-size:0.9rem;
}

.profile-meta-item .label{
    display:block;
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.profile-meta-item .value{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

/* --- Team crest block (right) --- */

.profile-team-crest-block{
    flex-shrink:0;
    text-align:center;
    align-self:center;
}

.profile-team-crest-block .crest-badge{
    width:120px;
    height:120px;
    font-size:1.4rem;
    /* .crest-badge's own margin:0 auto works fine here since this block
       is a centered column, not a flex row — no override needed. */
}

.profile-team-crest-block .name{
    margin-top:var(--space-2);
    font-weight:var(--fw-bold);
    font-size:var(--fs-small);
    letter-spacing:0.04em;
}

/* Label-left / value-right single-line row — deliberately its own class
   rather than reusing .info-row from team-profile.css, since .info-row
   stacks label above value (see Team Information card) while this page's
   Overview panel and Bio detail list need them side by side on one line. */

.spread-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-2) 0;
    border-bottom:1px solid var(--color-border);
}

.spread-row:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.spread-row .info-row-icon{
    flex-shrink:0;
}

.spread-row .label{
    flex:1;
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.spread-row .value{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
    text-align:right;
    white-space:nowrap;
}

/* --- Overview mini-panel (far right) --- */

.profile-overview-panel{
    flex-shrink:0;
    align-self:center;
    width:260px;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-4);
    
}

/* --- Stats row nested inside the hero card ---
   .stat-strip (cards.css) normally has its own border/background/margin
   as a standalone box. Nested here it should read as one continuous
   card with the hero content above it, separated only by a hairline —
   so its box-styling is switched off and replaced with just a divider. */

.profile-hero-card .stat-strip{
    background:none;
    border:none;
    border-radius:0;
    margin:var(--space-5) 0 0;
    padding:var(--space-4) 0 0;
    border-top:1px solid var(--color-border);
}

.profile-overview-panel h4{
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--color-text-muted);
    margin-bottom:-5px;
}

/* ===========================================================
   PAGE LAYOUT GRIDS
===========================================================*/

.four-col-grid{
    display:grid;
    grid-template-columns:0.85fr 0.85fr 0.85fr 1.45fr;
    gap:var(--space-4);
    margin:var(--space-6) 0;
    align-items:stretch;
    
    
}

.four-col-grid .card{
    display:flex;
    flex-direction:column;
}

.three-col-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:var(--space-4);
    margin-bottom:var(--space-7);
    align-items:stretch;
}

.three-col-grid .card{
    display:flex;
    flex-direction:column;
    margin-bottom:-10px;
}

/* ===========================================================
   PERFORMANCE GRID (Batting / Bowling Performance cards)
===========================================================*/

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

.perf-grid.perf-grid-2{
    grid-template-columns:repeat(2, 1fr);
}

.perf-item .value{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:1.15rem;
}

.perf-item .label{
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

.perf-section-title{
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:var(--space-3);
}

.recent-form-row{
    display:flex;
    gap:var(--space-2);
    flex-wrap:wrap;
}

.form-pill{
    flex:1;
    min-width:44px;
    text-align:center;
    padding:8px 4px;
    border-radius:var(--radius-sm);
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    font-family:var(--font-mono);
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

.form-pill.form-pill-best{
    background:rgba(34,197,94,0.15);
    border-color:var(--color-success);
    color:var(--color-success);
}

/* ===========================================================
   CAREER STATISTICS CARD — format tab pills
===========================================================*/

.format-tabs{
    display:flex;
    gap:6px;
}

.format-tab{
    padding:5px 14px;
    border-radius:var(--radius-pill);
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    color:var(--color-text-muted);
    cursor:pointer;
    transition:all var(--transition-fast);
}

.format-tab.active{
    background:var(--color-purple);
    border-color:var(--color-purple);
    color:#fff;
}

.career-stats-table tr.row-highlight td{
    color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

/* This card is the narrowest of the four (1fr vs the others' wider share),
   so the 8-column table needs tighter spacing than the global table.css
   default or the last couple of columns get pushed out of view. */
.career-stats-table th,
.career-stats-table td{
    padding:var(--space-2) 6px;
    font-size:var(--fs-tiny);
    white-space:nowrap;
}

/* ===========================================================
   PLAYER BIO CARD
===========================================================*/

.bio-text{
    color:var(--color-text-muted);
    margin-bottom:var(--space-4);
    font-size:var(--fs-small);
}

.bio-social-row{
    display:flex;
    gap:var(--space-2);
    margin-top:var(--space-4);
}

/* ===========================================================
   MATCH HISTORY TABLE (compact — reuses global table.css rules)
===========================================================*/

.match-history-table td,
.match-history-table th{
    white-space:nowrap;
}

/* ===========================================================
   ACHIEVEMENTS LIST
===========================================================*/

.achievements-list{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
}

.achievement-row-sm{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.achievement-icon-sm{
    width:32px;
    height:32px;
    border-radius:50%;
    background:rgba(232,170,61,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.95rem;
    flex-shrink:0;
}

.achievement-row-sm .text{
    font-size:var(--fs-small);
    color:var(--color-text);
}

/* ===========================================================
   TEAMMATES LIST
===========================================================*/

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

.teammate-item{
    text-align:center;
}

.teammate-item .avatar{
    width:64px;
    height:64px;
    margin:0 auto var(--space-2);
}

.teammate-item .name{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-tiny);
}

.teammate-item .role{
    font-size:9px;
    color:var(--color-text-muted);
}

.teammate-item.teammate-view-all .avatar{
    background:var(--color-surface-alt);
    color:var(--color-text-muted);
}

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

@media (max-width: 1200px){
    .profile-hero-top{
        justify-content:center;
    }
    .profile-overview-panel{
        width:100%;
    }
    .four-col-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 1024px){
    /* FIX: the old rule here targeted .profile-hero-card, which only
       has a background-image on it and is NOT a flex container — so
       "flex-direction:column" on it did nothing. The real flex row
       that lays out photo / identity / crest / overview side-by-side
       is .profile-hero-top. That's the element that needs the mobile
       override. */
    .profile-hero-top{
        flex-direction:column;
    }

    /* Everything in the identity block is centered on mobile EXCEPT
       the photo/jersey block, which stays left exactly as it renders
       by default. This covers: the ALL ROUNDER badge (a plain inline
       span, centered via text-align on its parent), the name row, the
       team line, and the nationality/DOB/age/role/batting/bowling
       meta rows. The team crest block below centers itself via its
       own align-self:center rule already defined above. */
    .profile-identity{
        text-align:center;
    }
    .profile-name-row{
        justify-content:center;
    }
    .profile-team-line{
        justify-content:center;
    }
    .profile-meta-row{
        justify-content:center;
    }

    .three-col-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 768px){
    .perf-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    .four-col-grid{
        grid-template-columns:1fr;
    }
    .teammates-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 480px){
    .teammates-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}