/* ===========================================================
   TOURNAMENT HERO
   (Same dual-layer gradient+image pattern as home.css's .hero,
   but shorter, with a floating "Tournament Dates" card instead
   of the Breaking News panel.)
===========================================================*/

.tournament-hero{
    position:relative;
    min-height:420px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(6,10,20,.96) 0%,
        rgba(6,10,20,.90) 28%,
        rgba(6,10,20,.55) 55%,
        rgba(6,10,20,.15) 78%,
        transparent 100%
    ),
    url("../images/hero/tournament\ banner.webp");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center 30%;
}

.tournament-hero>.container{
    width:100%;
    max-width:1320px;
    margin:auto;
    position:relative;
    z-index:5;
    padding:0 40px;
}

.tournament-hero-copy{
    max-width:620px;
    padding-top:var(--space-6);
}

.tournament-hero-copy h1{
    font-size:3.25rem;
    font-weight:800;
    letter-spacing:-1px;
    line-height:1;
    margin-bottom:var(--space-3);
}

.tournament-hero-copy .tagline{
    font-size:1.05rem;
    color:#D3D8E2;
    margin-bottom:var(--space-5);
}

/* Stat row — smaller/darker chips than home.css's .stat-strip,
   since here it sits directly on the hero image rather than in
   its own full-width section below the hero. */

.tournament-stat-row{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
}

.tournament-stat-item{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(16,24,41,.7);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius-md);
    padding:10px 16px;
    backdrop-filter:blur(6px);
}

.tournament-stat-icon{
    width:34px;
    height:34px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
    flex-shrink:0;
}

.tournament-stat-item .stat-value{
    font-size:1.1rem;
    font-weight:700;
    line-height:1;
}

.tournament-stat-item .stat-label{
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
    text-transform:uppercase;
    letter-spacing:0.03em;
}

/* Floating "Tournament Dates" card — same positioning idea as
   home.css's .news-panel, reused here with its own content. */

.tournament-dates-card{
    position:absolute;
    top:50%;
    right:30px;
    transform:translateY(-50%);
    width:380px;
    /* Safety net: even if a caching issue or cascade surprise stops the
       max-width:1300px override below from applying, this stops the
       card from ever being wider than the viewport allows and getting
       clipped off the right edge. */
    max-width:calc(100vw - 60px);
    box-sizing:border-box;
    padding:var(--space-5);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(18,27,49,.97), rgba(11,18,34,.97));
    border:1px solid var(--color-border);
    box-shadow:var(--shadow-lift);
}

.tournament-dates-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--color-gold);
    font-size:var(--fs-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:var(--space-4);
}

.tournament-dates-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-4);
}

.tournament-dates-grid .label{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
    letter-spacing:0.04em;
    margin-bottom:4px;
}

.tournament-dates-grid .value{
    font-size:var(--fs-body);
    font-weight:700;
}

.tournament-dates-grid .value-start{ color:var(--color-success); }
.tournament-dates-grid .value-final{ color:var(--color-gold); }

/* ===========================================================
   TABS
   (Same pattern as live-match.css / team-profile.css's
   .match-tabs/.match-tab — duplicated here per site convention
   rather than linking an unrelated page's stylesheet.)
===========================================================*/

.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;
}

.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;
}

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

/* ===========================================================
   MAIN LAYOUT — schedule/tab content (left) + persistent
   sidebar (League Table / Participating Teams / Venues, right)
===========================================================*/

.tournament-layout{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:var(--space-5);
    align-items:start;
    margin-top:var(--space-6);
}

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

.tournament-sidebar{
    display:flex;
    flex-direction:column;
    gap:var(--space-5);
    min-width:0;
}

/* --- Overview tab: About NPL value tiles --- */

.about-npl-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:var(--space-4);
    margin-top:var(--space-4);
}

.value-tile{
    background:var(--color-surface-alt);
    border:1px solid var(--color-border);
    border-radius:var(--radius-md);
    padding:var(--space-4);
}

.value-tile .value-tile-icon{
    width:40px;
    height:40px;
    border-radius:var(--radius-sm);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    margin-bottom:var(--space-3);
    background:rgba(232,170,61,0.15);
    color:var(--color-gold);
}

.value-tile h4{
    font-size:var(--fs-body);
    margin-bottom:4px;
}

/* --- Schedule tab --- */

.schedule-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    margin-bottom:var(--space-4);
}

.schedule-filter-chips{
    display:flex;
    gap:var(--space-2);
}

.schedule-chip{
    padding:8px 18px;
    border-radius:var(--radius-pill);
    border:1px solid var(--color-border);
    background:var(--color-surface);
    color:var(--color-text-muted);
    font-size:var(--fs-small);
    font-weight:var(--fw-semibold);
    cursor:pointer;
}

.schedule-chip.active{
    background:rgba(232,170,61,0.15);
    border-color:var(--color-gold);
    color:var(--color-gold);
}

.schedule-selects{
    display:flex;
    gap:var(--space-3);
}

.schedule-selects select{
    background:var(--color-surface);
    border:1px solid var(--color-border);
    color:var(--color-text);
    border-radius:var(--radius-sm);
    padding:8px 14px;
    font-size:var(--fs-small);
}

.schedule-section-title{
    font-size:var(--fs-small);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.04em;
    color:var(--color-cyan);
    margin:var(--space-5) 0 var(--space-3);
}

.schedule-section-title.playoffs{
    color:var(--color-purple);
}

.schedule-table-wrap{
    overflow-x:auto;
}

.schedule-table{
    width:100%;
    border-collapse:collapse;
}

.schedule-table th{
    text-align:left;
    font-size:var(--fs-tiny);
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--color-text-faint);
    padding:var(--space-2) var(--space-3);
    border-bottom:1px solid var(--color-border);
}

.schedule-table td{
    padding:var(--space-3);
    border-bottom:1px solid var(--color-border);
    font-size:var(--fs-small);
    vertical-align:middle;
}

.schedule-date-cell{
    text-align:center;
    font-weight:700;
}

.schedule-date-cell .day-num{
    font-size:1.05rem;
    color:var(--color-text);
    display:block;
}

.schedule-date-cell .day-month{
    font-size:var(--fs-tiny);
    color:var(--color-text-faint);
    text-transform:uppercase;
}

.schedule-teams-cell{
    display:flex;
    align-items:center;
    gap:var(--space-2);
}

/* Recurring bug: .crest-badge's base margin:0 auto (for column/grid
   layouts) breaks when reused inline in a flex row like this — cancel
   it here, same fix as .scoreboard-team-main .crest-badge elsewhere. */
.schedule-teams-cell .crest-badge{
    margin:0;
}

.schedule-vs{
    color:var(--color-text-faint);
    font-size:var(--fs-tiny);
}

.schedule-final-row td{
    background:rgba(232,170,61,0.06);
}

/* --- Standings tab (full-size table, same data as sidebar) --- */

.standings-note{
    margin-top:var(--space-3);
    font-size:var(--fs-small);
    color:var(--color-text-muted);
}

/* ===========================================================
   SIDEBAR CARDS
===========================================================*/

.points-table-mini th,
.points-table-mini td{
    padding:8px 6px;
    font-size:var(--fs-small);
}

.pts-rank{
    width:22px;
    height:22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-tiny);
    font-weight:700;
    background:var(--color-surface-alt);
}

.pts-rank.qualified{
    background:rgba(34,197,94,0.18);
    color:var(--color-success);
}

.pts-team-cell{
    display:flex;
    align-items:center;
    gap:8px;
}

.pts-team-cell .crest-badge{
    margin:0;
}

.pts-legend{
    display:flex;
    gap:var(--space-4);
    margin-top:var(--space-3);
    font-size:var(--fs-tiny);
    color:var(--color-text-muted);
}

.pts-legend-dot{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    margin-right:6px;
}

/* Participating Teams — compact 4-column crest grid, smaller than
   teams.html's full .team-grid cards since this is a sidebar widget. */

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

.participating-team-mini{
    text-align:center;
    text-decoration:none;
}

.participating-team-mini .crest-badge{
    width:52px;
    height:52px;
    margin:0 auto var(--space-2);
    font-size:var(--fs-small);
}

.participating-team-mini .team-mini-name{
    font-size:var(--fs-tiny);
    color:var(--color-text);
    line-height:1.25;
}

/* Tournament Venues — stacked image cards */

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

.venue-mini-card{
    display:flex;
    gap:var(--space-3);
    align-items:center;
    text-decoration:none;
}

.venue-mini-photo{
    width:96px;
    height:64px;
    border-radius:var(--radius-sm);
    flex-shrink:0;
    background:linear-gradient(135deg, rgba(34,211,238,0.25), rgba(124,92,252,0.25));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.3rem;
    position:relative;
    overflow:hidden;
}

.venue-mini-photo .primary-venue-tag{
    position:absolute;
    top:4px;
    left:4px;
    background:var(--color-gold);
    color:#1A1305;
    font-size:8px;
    font-weight:700;
    padding:2px 6px;
    border-radius:var(--radius-pill);
    text-transform:uppercase;
}

.venue-mini-name{
    font-weight:600;
    font-size:var(--fs-small);
}

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

/* Full venue grid (Venues tab) */

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

.venue-card{
    text-align:center;
}

.venue-card-photo{
    height:130px;
    border-radius:var(--radius-md);
    margin-bottom:var(--space-3);
    background:linear-gradient(135deg, rgba(34,211,238,0.22), rgba(124,92,252,0.22));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2rem;
    position:relative;
}

/* ===========================================================
   PROMO BANNER (bottom of page)
===========================================================*/

.tournament-promo-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    margin-top:var(--space-7);
    padding:var(--space-5) var(--space-6);
    border-radius:var(--radius-lg);
    background:linear-gradient(90deg, rgba(18,27,49,.97), rgba(35,26,58,.9));
    border:1px solid var(--color-border);
}

.tournament-promo-left{
    display:flex;
    align-items:center;
    gap:var(--space-4);
}

.tournament-promo-left .crest-badge{
    margin:0;
    width:56px;
    height:56px;
}

.tournament-promo-left h3{
    font-size:1.15rem;
    margin-bottom:2px;
}

.tournament-promo-trophy{
    font-size:2.5rem;
    flex-shrink:0;
}

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

@media (max-width: 1300px){
    /* Card stays in its top-right spot (not stacked full-width below) —
       it just shrinks progressively as the screen narrows. Card size and
       stat-row sizing are tuned further at 720px/480px below for phones. */
    .tournament-dates-card{
        width:260px;
        padding:var(--space-4);
    }

    .tournament-dates-title{
        font-size:11px;
        margin-bottom:var(--space-3);
    }

    .tournament-dates-grid{
        gap:var(--space-3);
    }

    .tournament-dates-grid .value{
        font-size:0.85rem;
    }

    .tournament-hero{
        min-height:0;
        padding:var(--space-6) 0;
    }
}

@media (max-width: 1100px){
    .tournament-layout{
        grid-template-columns:1fr;
    }

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

@media (max-width: 720px){
    .tournament-hero-copy h1{
        font-size:2.25rem;
    }

    /* Card now sits in normal document flow (nested after the stat row
       in the HTML) rather than floating absolute over the title — this
       is what actually guarantees no overlap with the title/tagline,
       instead of relying on positioning offsets. */
    .tournament-dates-card{
        position:static;
        transform:none;
        width:100%;
        max-width:300px;
        margin:var(--space-4) auto 0;
    }

    .tournament-dates-title{
        font-size:12px;
        margin-bottom:var(--space-3);
    }

    .tournament-dates-grid{
        grid-template-columns:1fr 1fr;
        gap:var(--space-3);
    }

    .tournament-dates-grid .label{
        font-size:9px;
    }

    .tournament-dates-grid .value{
        font-size:0.85rem;
    }

    /* Stat row: one single line on mobile, not a 2x2 wrap — shrink each
       chip down so all 4 fit across the width left of the dates card. */
    .tournament-stat-row{
        flex-wrap:nowrap;
        gap:6px;
    }

    .tournament-stat-item{
        flex:1 1 0;
        min-width:0;
        gap:5px;
        padding:6px 6px;
    }

    .tournament-stat-icon{
        width:22px;
        height:22px;
        font-size:0.7rem;
        flex-shrink:0;
    }

    .tournament-stat-item .stat-value{
        font-size:0.7rem;
    }

    .tournament-stat-item .stat-label{
        font-size:7px;
        white-space:nowrap;
    }

    .schedule-toolbar{
        flex-direction:column;
        align-items:flex-start;
    }

    .about-npl-grid,
    .participating-teams-grid,
    .venue-grid{
        grid-template-columns:repeat(2, 1fr);
    }

    .tournament-promo-banner{
        flex-direction:column;
        text-align:center;
    }
}

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

    .venue-grid{
        grid-template-columns:1fr;
    }
}