/* ===========================================================
   RESPONSIVE BREAKPOINTS
   (Shared/generic components only — page-specific responsive
   rules like .hero live in that page's own CSS file, e.g. home.css)
===========================================================*/

/* Tablet */

@media (max-width: 1024px){

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

    .live-card-grid{
        grid-template-columns:1fr;
    }

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

    .app-sidebar{
        width:200px;
    }

}

/* Nav switches to the hamburger dropdown here — this is wider than the
   general "Mobile" breakpoint below because the full nav (logo + links
   + search/notification/admin-login) stops fitting on screen well
   before 768px; testing showed overflow starting around 1024–1099px. */

@media (max-width: 1100px){

    .main-nav{
        display:none;
    }

    /* Hamburger-triggered dropdown (navbar.js toggles this .open class) */
    .main-nav.open{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;

        position:absolute;
        top:var(--header-height);
        left:0;
        right:0;

        background:var(--color-surface);
        border-bottom:1px solid var(--color-border);
        box-shadow:var(--shadow-card);
        padding:var(--space-3) var(--space-4);
        z-index:99;
    }

    .main-nav.open a{
        width:100%;
        justify-content:space-between;
        padding:var(--space-3) var(--space-2);
        border-radius:0;
        border-bottom:1px solid var(--color-border);
        border-color:transparent transparent var(--color-border) transparent;
    }

    .main-nav.open a:last-child{
        border-bottom:none;
    }

    .main-nav.open a.active{
        background:none;
        border-color:transparent transparent var(--color-border) transparent;
    }

    /* Inside the mobile hamburger overlay, dropdowns become inline
       accordions instead of floating panels — floating would look odd
       stacked in a full-width column layout. */
    .main-nav.open .nav-dropdown{
        width:100%;
    }

    .main-nav.open .nav-dropdown-toggle{
        width:100%;
        justify-content:space-between;
        padding:var(--space-3) var(--space-2);
        border-radius:0;
        border-bottom:1px solid var(--color-border);
    }

    .main-nav.open .nav-dropdown-menu{
        position:static;
        border:none;
        box-shadow:none;
        background:var(--color-surface-alt);
        padding:0;
        border-radius:0;
    }

    .main-nav.open .nav-dropdown-menu a{
        padding:var(--space-3) var(--space-2) var(--space-3) var(--space-5);
        border-radius:0;
        border-bottom:1px solid var(--color-border);
    }

    .nav-toggle{
        display:block;
    }

}

/* Mobile */

@media (max-width: 768px){

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

    .form-row{
        grid-template-columns:1fr;
    }

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

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:var(--space-5) var(--space-4);
    }

    .footer-grid > *:first-child{
        grid-column:1 / -1;
    }

    .footer-bottom{
        flex-direction:column;
        gap:var(--space-3);
        text-align:center;
    }

    .app-shell{
        flex-direction:column;
    }

    .app-sidebar{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-around;

        padding:var(--space-2);

        position:fixed;
        bottom:0;
        left:0;
        right:0;
        z-index:100;

        border-right:none;
        border-top:1px solid var(--color-border);
    }

    .app-sidebar .brand{
        display:none;
    }

    .sidebar-nav{
        display:flex;
        width:100%;
        justify-content:space-around;
    }

    .sidebar-nav a{
        flex-direction:column;
        gap:2px;
        font-size:10px;
        padding:6px;
    }

    .app-main{
        padding:var(--space-4);
        padding-bottom:80px;
    }

    .stat-strip{
        flex-wrap:wrap;
        row-gap:var(--space-4);
    }

    .stat-strip .stat-item{
        flex:1 1 40%;
        min-width:130px;
    }

    .stat-strip .stat-item-prize{
        flex:1 1 100%;
        min-width:0;
    }

    .stat-strip .btn{
        flex:1 1 100%;
        justify-content:center;
    }

    /* ==========================================
       LIVE MATCH SCOREBOARD — keep the score row on
       ONE line on mobile: [RW]128/4  VS  126/7[RS].
       A 3-column grid (team / vs / team) is used instead
       of flex-wrap, which was breaking the row onto
       multiple lines. Shared by home.html's live-match
       preview card and live-match.html itself.
       ========================================== */
    .scoreboard-row,
    .match-banner .scoreboard-row{
        display:grid;
        grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
        align-items:center;
        gap:6px;
        width:100%;
    }

    .scoreboard-team{
        min-width:0;
    }

    .scoreboard-team-main{
        display:flex;
        align-items:center;
        gap:5px;
        min-width:0;
        overflow:hidden;
    }

    .scoreboard-team-right .scoreboard-team-main{
        justify-content:flex-end;
    }

    .scoreboard-team .crest-badge-sm,
    .match-banner .crest-badge-sm{
        width:30px;
        height:30px;
        font-size:10px;
        flex-shrink:0;
    }

    .scoreboard-team-name,
    .match-banner .scoreboard-team-name{
        font-size:9.5px;
        line-height:1.2;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-top:2px;
    }

    .scoreboard-score{
        display:flex;
        align-items:baseline;
        flex-wrap:wrap;
        gap:0 4px;
        min-width:0;
        overflow:hidden;
    }

    .scoreboard-runs,
    .match-banner .scoreboard-runs{
        font-size:0.95rem;
        white-space:nowrap;
    }

    .scoreboard-overs,
    .match-banner .scoreboard-overs{
        font-size:9px;
        white-space:nowrap;
    }

    /* live-match.html's scoreboard has an extra "RR: 7.84" element that
       home.html's preview card doesn't — drop it to its own full-width
       line under runs/overs instead of fighting them for space. */
    .scoreboard-rr{
        flex:1 1 100%;
        font-size:9px;
        margin-top:0;
    }

    .scoreboard-team-right .scoreboard-rr{
        text-align:right;
    }

    .scoreboard-vs{
        flex-shrink:0;
        width:24px;
        height:24px;
        font-size:10px;
    }

}

@media (max-width: 360px){
    /* Overs text ("16.2 OV") was getting visually clipped alongside the
       runs at this width. Stack it under the runs number instead of
       cutting it off — the crest+score still reads as one compact unit,
       only the secondary overs line wraps, not the whole scoreboard row. */
    .scoreboard-score{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
    }

    .scoreboard-team-right .scoreboard-score{
        align-items:flex-end;
    }

    .scoreboard-runs,
    .match-banner .scoreboard-runs{
        font-size:0.9rem;
    }

    .scoreboard-overs,
    .match-banner .scoreboard-overs{
        font-size:8.5px;
    }

    .scoreboard-rr{
        font-size:8.5px;
    }
}

/* Small Mobile */

@media (max-width: 600px){
    .header-search-btn,
    .header-admin-login-btn{
        display:none;
    }
}

@media (max-width: 480px){

    .container{
        padding:0 var(--space-4);
    }

    .countdown-unit{
        min-width:60px;
        padding:var(--space-2);
    }

    .stat-strip .stat-item{
        flex:1 1 40%;
        min-width:0;
    }

    .stat-strip .stat-item-prize{
        flex:1 1 100%;
    }

}