/* ===========================================================
   TEAM PROFILE HERO BANNER
   Same technique as teams.css's .teams-hero — stadium image behind
   the breadcrumb + team hero card.
===========================================================*/

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

.team-profile-hero .breadcrumb{
    margin:0 0 var(--space-3) !important;
}

/* ===========================================================
   TAB NAVIGATION
   (Same pattern as live-match.css's .match-tabs/.match-tab — duplicated
   here rather than linking live-match.css into a page that doesn't need
   its match-specific styles.)
===========================================================*/

.match-tabs{
    display:flex;
    align-items:center;
    gap:var(--space-2);

    border-bottom:1px solid var(--color-border);
    margin-bottom:var(--space-5);
    overflow-x:auto;
}

.match-tab{
    display:flex;
    align-items:center;
    gap:6px;

    padding:var(--space-3) var(--space-4);

    font-size:var(--fs-small);
    font-weight:var(--fw-medium);
    color:var(--color-text-muted);
    white-space:nowrap;
    background:none;
    border:none;
    border-bottom:2px solid transparent;
    cursor:pointer;
    transition:all var(--transition-fast);
}

.match-tab:hover{
    color:var(--color-text);
}

.match-tab.active{
    color:var(--color-gold);
    border-bottom-color:var(--color-gold);
    font-weight:var(--fw-semibold);
}

.tab-panel{
    display:none;
}

.tab-panel.active{
    display:block;
}

/* ===========================================================
   TEAM HERO CARD
===========================================================*/

.team-hero-card{
    position:relative;
    overflow:hidden;

    display:flex;
    align-items:flex-start;
    gap:var(--space-6);
    flex-wrap:wrap;

    background-image:
        linear-gradient(90deg, rgba(11,18,32,0.9) 30%, rgba(11,18,32,0.6) 65%, rgba(11,18,32,0.35) 100%),
        url("../images/hero/Team\ profile\ banner.webp");
    background-repeat:no-repeat;
    background-size:100% 100%, cover;
    background-position:center, center 40%;
}

.team-hero-left{
    text-align:center;
    flex-shrink:0;
}

.team-hero-crest{
    width:140px;
    height:140px;
    font-size:1.75rem;
    margin:0 auto var(--space-3);
}

.team-hero-champ-badge{
    display:inline-block;
}

.team-hero-info{
    flex:1;
    min-width:240px;
}

.team-hero-info h2{
    font-size:1.5rem;
    display:flex;
    align-items:center;
    gap:8px;
}

.team-hero-star{
    color:var(--color-gold);
    font-size:1.1rem;
}

.team-hero-meta{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

.team-hero-desc{
    margin:var(--space-3) 0 var(--space-4);
    color:var(--color-text-muted);
    max-width:46ch;
}

.team-hero-actions{
    display:flex;
    gap:var(--space-3);
}

.team-hero-right{
    flex-shrink:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-4);
}

/* ===========================================================
   QUICK STATS ROW (Matches Played / Won / Lost / No Result / Win Rate)
===========================================================*/

.quick-stats-row{
    display:flex;
    gap:var(--space-5);
}

.quick-stat{
    text-align:center;
}

.quick-stat-icon{
    width:32px;
    height:32px;
    margin:0 auto 6px;
    border-radius:50%;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text-muted);
}

.quick-stat .value{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:1.1rem;
}

.quick-stat .label{
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
    white-space:nowrap;
}

/* Win-rate ring — pure CSS conic-gradient, no SVG/JS needed. The --win-rate
   custom property drives how much of the ring is gold vs empty. */
.win-rate-ring{
    width:52px;
    height:52px;
    border-radius:50%;
    margin:0 auto 6px;
    background:conic-gradient(var(--color-gold) var(--win-rate, 0%), var(--color-border) 0);
    display:flex;
    align-items:center;
    justify-content:center;
}

.win-rate-ring-inner{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--color-surface);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:var(--fw-bold);
}

/* ===========================================================
   TITLE STATS ROW (NPL Titles / Runners Up / Best Finish / Total Points)
===========================================================*/

.title-stats-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:var(--space-4);

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

.title-stat{
    text-align:center;
}

.title-stat-icon{
    width:32px;
    height:32px;
    margin:0 auto 6px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-small);
}

.title-stat-icon.icon-gold{ background:rgba(232,170,61,0.15); }
.title-stat-icon.icon-blue{ background:rgba(59,130,246,0.15); }
.title-stat-icon.icon-purple{ background:rgba(124,92,252,0.15); }

.title-stat .value{
    display:block;
    font-weight:var(--fw-bold);
    font-size:1.1rem;
}

.title-stat .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

.title-stat .sublabel{
    display:block;
    font-size:9px;
    color:var(--color-text-faint);
}

/* ===========================================================
   OVERVIEW TAB
===========================================================*/

.overview-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr 1fr;
    gap:var(--space-4);
    margin-bottom:var(--space-4);
    align-items:start;
}

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

/* --- Team Information card --- */

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

.info-row-icon{
    width:32px;
    height:32px;
    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;
}

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

.info-row .value{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

.team-colors-row{
    display:flex;
    gap:6px;
    margin-top:2px;
}

.color-dot{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid var(--color-surface);
}

/* --- Key Players card --- */

.key-players-row{
    display:flex;
    gap:var(--space-3);
    overflow-x:auto;
    scroll-behavior:smooth;
    padding-bottom:4px;
}

.key-player-card{
    position:relative;
    flex:1;
    min-width:110px;
    text-align:center;

    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-3);
}

.key-player-tag{
    position:absolute;
    top:6px;
    left:6px;
    padding:2px 6px;
    font-size:9px;
}

.key-player-avatar{
    width:56px;
    height:56px;
    margin:0 auto var(--space-2);
}

.key-player-card .name{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

.key-player-card .role{
    font-size:9px;
    color:var(--color-text-muted);
    margin-bottom:6px;
}

.key-player-card .value{
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:var(--fs-body);
}

.key-player-card .label{
    display:block;
    font-size:9px;
    color:var(--color-text-muted);
    text-transform:uppercase;
}

.key-players-scroll-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    color:var(--color-text);
    cursor:pointer;
    margin-top:var(--space-3);
    margin-left:auto;
    display:block;
}

/* --- Recent Performance card --- */

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

/* Same fix as live-auction.css's .sold-to-row: .crest-badge's own
   margin:0 auto centers it (fine in a column layout) but fights a
   flex ROW like this one, pushing the text off to the right. Cancel it. */
.recent-perf-row .crest-badge{
    margin:0;
    flex-shrink:0;
}

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

.recent-perf-info{
    flex:1;
    display:flex;
    flex-direction:column;
}

.recent-perf-info .opp{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

.recent-perf-info .date{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

.recent-perf-result{
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:2px;
}

.recent-perf-result .margin{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

/* --- Team Achievements card --- */

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

.achievement-icon{
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    background:rgba(232,170,61,0.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    flex-shrink:0;
}

/* --- Team Stats (Season 2025) card --- */

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

.team-season-stats-grid .value{
    display:block;
    font-family:var(--font-mono);
    font-weight:var(--fw-bold);
    font-size:var(--fs-h3);
}

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

/* --- Next Match card --- */

.next-match-teams{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:var(--space-4);
}

.next-match-team{
    text-align:center;
    font-size:var(--fs-tiny);
    font-weight:var(--fw-semibold);
}

.next-match-team .crest-badge-sm{
    margin:0 auto 4px;
}

.vs-circle{
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    font-weight:var(--fw-bold);
    color:var(--color-text-muted);
}

/* --- Tab placeholders (Stats/Matches/History/News/Gallery) --- */

.tab-placeholder{
    text-align:center;
    color:var(--color-text-muted);
    padding:var(--space-7) var(--space-5);
    margin-bottom:var(--space-7);
}

/* ===========================================================
   SQUAD TAB (reused pattern)
===========================================================*/

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

.squad-player{
    text-align:center;
}

.squad-player .avatar{
    width:72px;
    height:72px;
    margin:0 auto var(--space-2);
    font-size:var(--fs-body);
}

.squad-player .name{
    font-weight:var(--fw-semibold);
    font-size:var(--fs-small);
}

.squad-player .role{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

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

@media (max-width: 1200px){
    .overview-grid{
        grid-template-columns:1fr;
    }
    .overview-bottom-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width: 1024px){
    .team-hero-card{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .team-hero-actions{
        justify-content:center;
    }
    .quick-stats-row{
        justify-content:center;
        flex-wrap:wrap;
    }
    .squad-grid{
        grid-template-columns:repeat(4, 1fr);
    }
}

@media (max-width: 768px){
    .title-stats-row{
        grid-template-columns:repeat(2, 1fr);
    }
    .squad-grid{
        grid-template-columns:repeat(3, 1fr);
    }
    .team-season-stats-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

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