/* PM PERF: externalized Home responsive CSS 2026-09-08 */
/* PM HOME RESPONSIVE: stack Home split in collapsed/tablet layout 2026-07-06
   When the left sidebar is hidden / hamburger is active, Home must not keep narrow left/right columns.
*/
@media (max-width: 1250px) {
    .pm-home-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
        gap: 16px !important;
    }

    .pm-home-column,
    .pm-home-matches-column,
    .pm-home-news-column,
    .pm-home-latest-news-above-today,
    .pm-home-matches-column > *,
    .pm-home-news-column > * {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pm-home-latest-news-above-today .pm-news-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .pm-home-latest-news-above-today .pm-news-grid > .pm-news-card {
        width: 100% !important;
        max-width: none !important;
    }

    .pm-home-news-column .pm-news-page.pm-news-home-embed .pm-news-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: none !important;
    }
}

/* Also follow the JS collapsed state, even if browser zoom changes media-query behaviour. */
body.pm-header-menu-collapsed .pm-home-split {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
    gap: 16px !important;
}

body.pm-header-menu-collapsed .pm-home-column,
body.pm-header-menu-collapsed .pm-home-matches-column,
body.pm-header-menu-collapsed .pm-home-news-column,
body.pm-header-menu-collapsed .pm-home-latest-news-above-today,
body.pm-header-menu-collapsed .pm-home-matches-column > *,
body.pm-header-menu-collapsed .pm-home-news-column > * {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.pm-header-menu-collapsed .pm-home-latest-news-above-today .pm-news-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: none !important;
}

body.pm-header-menu-collapsed .pm-home-latest-news-above-today .pm-news-grid > .pm-news-card {
    width: 100% !important;
    max-width: none !important;
}

body.pm-header-menu-collapsed .pm-home-news-column .pm-news-page.pm-news-home-embed .pm-news-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    .pm-home-news-column .pm-news-page.pm-news-home-embed .pm-news-grid,
    body.pm-header-menu-collapsed .pm-home-news-column .pm-news-page.pm-news-home-embed .pm-news-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* PM HOME RESPONSIVE END: stack Home split in collapsed/tablet layout 2026-07-06 */

/* PM HOME MOBILE ONLY LATEST ABOVE TODAY 2026-07-06
   Desktop/tablet wide: keep latest post only in the right news column.
   Smaller screens: when the right news column disappears, show latest post above TODAY. */
.pm-home-latest-news-above-today {
    display: none !important;
}

@media (max-width: 768px) {
    .pm-home-latest-news-above-today {
        display: block !important;
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    .pm-home-latest-news-above-today .pm-home-news-shell,
    .pm-home-latest-news-above-today .pm-home-news-card,
    .pm-home-latest-news-above-today article {
        width: 100% !important;
        max-width: none !important;
    }
}


/* PM HOME HIDE SIDE NEWS EARLIER SHOW LATEST ABOVE TODAY 2026-07-06
   At medium desktop/tablet widths, the right-side news column becomes too tight.
   Hide the side news column and show the latest post above Today's Matches instead. */
@media (max-width: 1450px) {
    .pm-home-news-side-column,
    .pm-home-news-column,
    aside.pm-home-news-shell {
        display: none !important;
    }

    .pm-home-latest-news-above-today {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 16px 0 !important;
        order: -20 !important;
    }

    .pm-home-latest-news-above-today .pm-home-news-shell,
    .pm-home-latest-news-above-today .pm-home-news-card,
    .pm-home-latest-news-above-today article {
        width: 100% !important;
        max-width: none !important;
    }

    .pm-home-layout,
    .pm-home-grid,
    .pm-home-content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .pm-home-matches-column {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

/* Keep wide desktop unchanged: latest-above-Today stays hidden while right news is visible. */
@media (min-width: 1451px) {
    .pm-home-latest-news-above-today {
        display: none !important;
    }
}


/* PM HOME EXPAND MATCHES WHEN SIDE NEWS HIDDEN 2026-07-06
   When the right news column is hidden, let the Home main column use the full available width. */
@media (max-width: 1450px) {
    body:not(.pm-header-menu-collapsed) .site-shell > .site-main,
    body:not(.pm-header-menu-collapsed) .site-shell > main.site-main {
        width: calc(100vw - 300px) !important;
        max-width: none !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .pm-home-layout,
    .pm-home-grid,
    .pm-home-content-grid,
    .pm-home-page,
    .pm-home-main,
    .pm-home-wrap {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pm-home-layout,
    .pm-home-grid,
    .pm-home-content-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
    }

    .pm-home-matches-column {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .pm-home-matches-column > *,
    .pm-home-latest-news-above-today,
    .tm-page,
    .tm-wrapper,
    .tm-matches-list {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }
}

@media (max-width: 900px) {
    body:not(.pm-header-menu-collapsed) .site-shell > .site-main,
    body:not(.pm-header-menu-collapsed) .site-shell > main.site-main {
        width: 100% !important;
    }
}


/* PM HOME PREVENT HORIZONTAL OVERFLOW AT MEDIUM WIDTH 2026-07-06
   Keep Home responsive content inside the visible area once the right news column is hidden.
   Avoid 100vw math because it can exceed the real space beside the sidebar and create page-level horizontal scroll. */
@media (max-width: 1450px) {
    body:not(.pm-header-menu-collapsed) .site-shell > .site-main,
    body:not(.pm-header-menu-collapsed) .site-shell > main.site-main {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        overflow-x: clip !important;
    }

    .pm-home-split,
    .pm-home-layout,
    .pm-home-grid,
    .pm-home-content-grid,
    .pm-home-page,
    .pm-home-main,
    .pm-home-wrap,
    .pm-home-matches-column,
    .pm-home-matches-column > *,
    .pm-home-latest-news-above-today,
    .tm-page,
    .tm-wrapper,
    .tm-matches-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .pm-home-split {
        grid-template-columns: minmax(0, 1fr) !important;
        overflow-x: clip !important;
    }

    .tm-date-nav,
    .tm-view-tabs,
    .tm-filter-tabs,
    .tm-tabs,
    .tm-toolbar {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        flex-wrap: wrap !important;
    }

    .tm-page img,
    .pm-home-latest-news-above-today img {
        max-width: 100% !important;
    }
}

@supports not (overflow-x: clip) {
    @media (max-width: 1450px) {
        body:not(.pm-header-menu-collapsed) .site-shell > .site-main,
        body:not(.pm-header-menu-collapsed) .site-shell > main.site-main,
        .pm-home-split {
            overflow-x: hidden !important;
        }
    }
}


/* PM FIX: desktop Home split allow News shadow outside grid 2026-09-05 START */

/*
 * Desktop only.
 *
 * The right News rail is visible only above 1650px.
 * Historical Home overflow-x:clip protects responsive layouts,
 * but on wide desktop it also cuts the outer-right News-card shadow.
 *
 * Open overflow only where the desktop right rail actually exists.
 */
@media (min-width: 1651px) {
    body .pm-home-split {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
}

/* PM FIX: desktop Home split allow News shadow outside grid 2026-09-05 END */

/* PM HOME HIDE RIGHT NEWS AT MEDIUM DESKTOP 1650 2026-07-06
   Final Home-only responsive rule:
   below medium desktop width, remove the right news rail and move latest news above Today's Matches. */
@media (max-width: 1650px) {
    body .site-shell .site-main .pm-home-split > aside.pm-home-news-column,
    body .site-shell main.site-main .pm-home-split > aside.pm-home-news-column,
    body .pm-home-split > aside.pm-home-column.pm-home-news-column,
    body .pm-home-split > .pm-home-news-column {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body .pm-home-split {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: clip !important;
    }

    body .pm-home-split > .pm-home-matches-column,
    body .pm-home-matches-column {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .pm-home-latest-news-above-today {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 16px 0 !important;
    }

    body .pm-home-latest-news-above-today .pm-news-page,
    body .pm-home-latest-news-above-today .pm-news-grid,
    body .pm-home-latest-news-above-today .pm-news-card,
    body .pm-home-latest-news-above-today article,
    body .tm-page,
    body .tm-wrapper,
    body .tm-matches-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1651px) {
    body .pm-home-latest-news-above-today {
        display: none !important;
    }
}