/* ===========================================================
   TEAMS HERO BANNER
   Same technique as players.css's .players-hero (dual-layer gradient +
   image) — written standalone here since this page doesn't load
   players.css just for one shared block.
===========================================================*/

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

    padding:var(--space-6) 0 var(--space-5);

    background-image:
        linear-gradient(90deg, rgba(11,18,32,0.95) 25%, rgba(11,18,32,0.6) 60%, rgba(11,18,32,0.35) 100%),
        url("../images/hero/Teams\ banner.webp");
    background-repeat:no-repeat;
    background-size:100% 100%, cover;
    background-position:center, center 35%;
    background-color:var(--color-bg);
}

.teams-hero h1{
    font-size:2.5rem;
    margin-bottom:10px;
}

.teams-hero .breadcrumb{
    margin-top:0;
}

/* ===========================================================
   TEAMS PAGE — top row (stats strip + "Create Your Team" CTA)
===========================================================*/

.teams-top-row{
    display:flex;
    gap:50px;
    align-items:stretch;
    margin-bottom:var(--space-5);

    /* Pull this row up so it overlaps the bottom edge of .teams-hero,
       instead of sitting as a separate block below it (matches the
       original design where the stats bar floats over the banner).
       Pushed further up this round — sits well inside the image now,
       not just touching its bottom edge. */
    position:relative;
    margin-top:-130px;

    /* Inset from the left/right edges so it reads as a card floating
       over the banner image, not a full-bleed bar flush with the
       team-grid's edges below it. */
    margin-left:200px;
    margin-right: 30px;
}

.teams-stat-strip{
    background:linear-gradient(135deg, rgba(124,92,252,0.25), rgba(232,170,61,0.15));
    flex:1;
    margin:0; /* .stat-strip normally has its own vertical margin —
                 not needed here since the parent row controls spacing */
}

.team-cta-card{
    flex-shrink:0;
    width:300px;

    display:flex;
    align-items:center;

    background:linear-gradient(135deg, rgba(124,92,252,0.25), rgba(232,170,61,0.15));
    border:1px solid var(--color-purple);
    border-radius:var(--radius-lg);
    padding:var(--space-4) var(--space-5);
}

.team-cta-card h4{
    margin-bottom:2px;
}

.team-cta-card .btn{
    margin-top:var(--space-3);
}

/* ===========================================================
   SEARCH + FILTERS ROW
===========================================================*/

.teams-filter-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-bottom:var(--space-5);
}

.search-input{
    flex:1;
    max-width:340px;
    display:flex;
    align-items:center;
    gap:var(--space-2);

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

    color:var(--color-text-muted);
}

.search-input input{
    flex:1;
    min-width:0;
    background:none;
    border:none;
    outline:none;
    color:var(--color-text);
    font-family:inherit;
    font-size:var(--fs-body);
}

.teams-filter-row-right{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-3);
}

.filter-select{
    width:auto;
    padding:10px var(--space-4);
}

.sort-by-label{
    font-size:var(--fs-small);
    color:var(--color-text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}

.filter-select-inline{
    background:none;
    border:none;
    color:var(--color-gold);
    font-weight:var(--fw-semibold);
    font-family:inherit;
    font-size:var(--fs-small);
}

/* ===========================================================
   TEAMS GRID
===========================================================*/

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

    margin-bottom:var(--space-5);
}

.team-grid-card{
    position:relative;
    display:block;
    text-align:center;

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

    text-decoration:none;
    color:inherit;

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

.team-grid-card:hover{
    border-color:var(--team-color, var(--color-purple));
    transform:translateY(-3px);
}

/* The Champions card gets a permanent gold border + ribbon, whether or
   not you're hovering it — it doesn't need "--team-color" for that. */
.champion-card{
    border-color:var(--color-gold);
    background:rgba(232,170,61,0.06);
}

.team-ribbon{
    position:absolute;
    top:0;
    left:0;
    background:var(--color-gold);
    color:#1A1305;
    font-size:var(--fs-tiny);
    font-weight:var(--fw-bold);
    text-transform:uppercase;
    letter-spacing:0.04em;
    padding:4px 14px;
    border-radius:var(--radius-lg) 0 var(--radius-md) 0;
}

.team-star{
    position:absolute;
    top:var(--space-3);
    right:var(--space-3);
    color:var(--color-gold);
    font-size:1.1rem;
}

.team-grid-crest{
    /* Bigger than the usual 56px .crest-badge — this is the hero image
       on each card, not a small inline icon. */
    width:88px;
    height:88px;
    margin:var(--space-2) auto var(--space-3);
    font-size:1.1rem;
}

.team-grid-name{
    font-weight:var(--fw-bold);
    font-size:var(--fs-h3);
    margin-bottom:4px;
}

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

.team-status-pill{
    display:inline-block;
    margin-top:var(--space-3);
}

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

    margin:var(--space-4) 0;
    padding:var(--space-3) 0;
    border-top:1px solid var(--color-border);
    border-bottom:1px solid var(--color-border);
}

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

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

/* ===========================================================
   PAGINATION + "WANT TO JOIN" ROW
===========================================================*/

.teams-bottom-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    flex-wrap:wrap;

    margin-bottom:var(--space-7);
}

.pagination{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:var(--space-2);
}

.pagination-btn{
    width:32px;
    height:32px;
    border-radius:var(--radius-md);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text);
    cursor:pointer;
}

.pagination-btn.active{
    border-color:var(--color-gold);
    color:var(--color-gold);
    font-weight:var(--fw-bold);
}

.pagination-ellipsis{
    color:var(--color-text-faint);
    padding:0 4px;
}

.join-cta{
    display:flex;
    align-items:center;
    gap:var(--space-3);

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

.join-cta .btn{
    margin-left:var(--space-3);
}

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

@media (max-width: 1200px){
    .team-grid{
        grid-template-columns:repeat(3, 1fr);
    }
}

@media (max-width: 1024px){
    .teams-top-row{
        flex-direction:column;
        margin-top:var(--space-5);
        margin-left:0;
        margin-right:0;
    }
    .team-cta-card{
        width:100%;
    }
    .team-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 768px){
    .teams-filter-row{
        flex-direction:column;
        align-items:stretch;
    }
    .search-input{
        max-width:none;
    }
    .teams-filter-row-right{
        flex-wrap:wrap;
    }
    .teams-filter-row-right .filter-select,
    .teams-filter-row-right .sort-by-label{
        flex:1 1 140px;
    }
    .teams-filter-row-right .view-toggle{
        flex-shrink:0;
    }
    .teams-bottom-row{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }
    .teams-bottom-row > *{
        min-width:0;
        width:100%;
    }
    .pagination{
        justify-content:center;
    }
    .join-cta{
        text-align:left;
        flex-wrap:wrap;
    }
    .join-cta .btn{
        margin-left:0;
        width:100%;
        justify-content:center;
    }
}

@media (max-width: 480px){
    .team-grid{
        grid-template-columns:1fr;
    }
}