/* ===========================
   Large Tablet / Small Desktop
   (max-width: 1199.98px)
   =========================== */
@media (max-width: 1199.98px) {
    .header-search {
        width: 200px;
    }
}

/* ===========================
   Tablet (max-width: 991.98px)
   =========================== */
@media (max-width: 991.98px) {
    /* Header */
    .header-search { width: 180px; }
    .main-nav .nav-link { font-size: 13px; padding: 6px 10px; }

    /* News Column - unstick on tablet */
    .news-column-inner {
        position: static;
        max-height: none;
        display: flex;
        /* flex-direction: row; */
        flex-wrap: wrap;
        gap: 16px;
    }
    .news-featured { flex: 1; min-width: 280px; }
    .news-list { flex: 1; min-width: 280px; }

    /* League Cards */
    .league-header { flex-wrap: wrap; gap: 8px; }
    .league-header-right { gap: 6px; }
    .league-tab { font-size: 11px; padding: 3px 8px; }

    /* Countries Accordion */
    .country-header { flex-wrap: wrap; gap: 8px; }
    .country-header-right { gap: 6px; }
    .league-accordion-right { gap: 6px; }

    /* Match Rows */
    .match-row { padding: 10px 12px; }
    .match-team .team-name { font-size: 13px; }

    /* Standings */
    .standings-widget { margin-top: 0; }

    /* App Banner */
    .app-banner {
        padding: 24px;
        flex-direction: column;
        text-align: start;
        background-image: var(--bg-app-banner-overlay), url('../images/app-banner-bg.png');
        background-size: auto, cover;
    }
    .app-banner-content { max-width: 100%; }

    /* Footer watermark */
    .site-footer::before { display: none; }

    /* Date Navigation */
    .date-nav-container { flex-wrap: wrap; gap: 12px; }
    .date-nav-info { width: 100%; justify-content: center; }
    .date-nav-pills { overflow-x: auto; }
    /* Home variant is inherently two-row: undo the single-row wrap/centering */
    .home-date-nav .date-nav-container { flex-wrap: nowrap; }
    .home-date-nav .date-nav-info { width: auto; justify-content: flex-start; }

    /* Match Detail Page — see match-detail.css for full responsive rules */
    .lineups-container { grid-template-columns: 1fr; }
}

/* ===========================
   Desktop (min-width: 992px)
   =========================== */
@media (min-width: 992px) {
    /* Home news column is col-lg-7: spread the compact list into a 2-col grid.
       Gated at lg+ so it never fights the tablet flex-wrap rules above. */
    .news-list--compact {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* ===========================
   Mobile (max-width: 767.98px)
   =========================== */
@media (max-width: 767.98px) {
    /* Date Navigation */
    .date-nav { padding: 10px 0; }
    .home-date-nav { padding: 8px 10px; } /* card variant keeps horizontal padding */
    .date-nav-container { gap: 8px; }
    .date-nav-info { margin-bottom: 4px; }
    .date-nav-day { font-size: 14px; }
    .date-nav-date { font-size: 12px; }
    .date-nav-arrow { width: 28px; height: 28px; }
    .date-pill { padding: 4px 10px; height: 36px; font-size: 11px; }
    .date-nav-btn { width: 28px; height: 28px; }

    /* Date picker + filter popovers: Flatpickr's natural 307px grid is cramped on
       small phones, and the filter pills need the same room. .date-nav-actions is
       only as wide as its two buttons, so re-anchor both panels to the full-width
       .date-nav-top row and let them span it minus a 12px side margin — the day
       grid is a 7-column CSS grid and .filter-radio-group already wraps, so the
       contents simply reflow to fill the wider box. */
    .date-nav-top { position: relative; }
    .date-nav-actions { position: static; }
    .date-picker-popover,
    .filter-modal {
        inset-inline: 12px; /* overrides the desktop inset-inline-end: 0 */
        width: auto;
        transform-origin: top center;
    }
    .date-picker-body { padding: 8px 10px 12px; }
    /* Larger tap targets than the 36px desktop cells, in step with the mobile
       .date-pill scale above. */
    .date-picker-popover .flatpickr-day { height: 40px; line-height: 38px; }

    /* League Cards */
    .league-header { padding: 10px 12px; }
    .league-header-left { gap: 8px; }
    .league-logo { width: 20px; height: 20px; }
    .league-name { font-size: 13px; }
    .league-tab { font-size: 10px; padding: 2px 6px; }
    .league-round { font-size: 10px; padding: 2px 8px; }

    /* Countries Accordion */
    .country-header { padding: 10px 12px; }
    .country-header-left { gap: 8px; }
    .country-name { font-size: 13px; }
    .fixture-count-badge { font-size: 10px; padding: 2px 8px; }
    .league-accordion-header { padding: 8px 12px; }
    .league-accordion-name { font-size: 12px; }

    /* Match Rows */
    .match-row { padding: 8px 10px; gap: 6px; }
    .match-team { gap: 6px; }
    .match-team .team-logo { width: 22px; height: 22px; }
    .match-team .team-name { font-size: 12px; }
    .match-score { font-size: 14px; min-width: 50px; }
    .match-time { font-size: 11px; }
    .match-badge { font-size: 9px; padding: 2px 6px; }

    /* News */
    .news-featured-bg { height: 140px; }
    .news-featured-title { font-size: 14px; }
    .news-list-item { gap: 10px; }
    .news-thumb-wrapper { width: 70px; height: 52px; }
    .news-item-title { font-size: 12px; }

    /* Standings widget: the shared renderer (standings.css) owns the table's
       responsive rules; only tighten the widget chrome here. */
    .standings-widget-button-name { font-size: 13px; }
    .standings-widget-popup { max-height: 240px; }

    /* App Banner */
    .app-banner { padding: 20px 16px; border-radius: 12px; min-height: 0; }
    .app-banner-title { font-size: 18px; }
    .app-banner-desc { font-size: 12px; }
    .app-banner-content { flex-direction: column; gap: 14px; }
    .app-banner-badges { gap: 8px; }
    .app-banner-badges img { height: 36px; }

    /* Footer */
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* Header - smaller login button */
    .btn-login { font-size: 12px; padding: 6px 14px; }
    .main-nav .nav-link { font-size: 12px; padding: 5px 8px; }

    /* Match Detail Page — see match-detail.css for full responsive rules */
}

/* ===========================
   Small Mobile (max-width: 575.98px)
   =========================== */
@media (max-width: 575.98px) {
    /* Extra small adjustments */
    .main-nav .nav-link { font-size: 11px; padding: 4px 6px; }
    .match-team .team-name {
        font-size: 11px;
        max-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .match-score { font-size: 13px; min-width: 44px; }
    .league-name {
        font-size: 12px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .league-country { display: none; }
    .league-round { display: none; }
    .news-featured { min-width: unset; }
    .news-list { min-width: unset; }
}