/* PM PERF: externalized Home main CSS 2026-09-08 */
/* PM FIX: Home two-column layout */
.pm-home-split {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
    gap: 18px;
    align-items: start;
    width: 100%;
}

.pm-home-column {
    min-width: 0;
}

.pm-home-matches-column {
    min-width: 0;
}

.pm-home-matches-column > * {
    max-width: 100%;
}

.pm-home-news-column {
    min-width: 0;
}

/*
 * PM CHANGE: Home side news images use cover 2026-08-24
 *
 * Scope only the News cards inside Home's right column.
 * Keep every existing card/image-area dimension unchanged;
 * fill the existing image area using the featured image.
 */
body .pm-home-split
.pm-home-news-column
.pm-news-page.pm-news-home-embed
.pm-news-card
img.pm-news-image {
    object-fit: cover !important;
    object-position: center center !important;
    background: #fff !important;
}


/* PM UX: Home right News no-image title 22px 2026-09-06 START */
/*
 * Live Home desktop right-side embedded News rail only.
 *
 * A card without a featured image uses its headline as the main
 * visual element, so increase that title from the embedded 18px
 * size to 22px.
 *
 * Image cards, top Home News, standalone Updates and article pages
 * are intentionally untouched.
 */
body .pm-home-split
.pm-home-news-column
.pm-news-page.pm-news-home-embed
.pm-news-grid
> .pm-news-card.pm-news-card-no-image
.pm-news-card-title-stack
h2 {
    font-size: 22px !important;
    line-height: 1.18 !important;
}
/* PM UX: Home right News no-image title 22px 2026-09-06 END */

.pm-home-news-shell,
.pm-home-news-card {
    background: #ffffff;
    border: 1px solid #e4e9f2;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(19, 41, 75, 0.08);
    overflow: hidden;
}

.pm-home-news-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #13294b;
    color: #ffffff;
    padding: 14px 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pm-home-news-card-header a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.9;
}

.pm-home-news-card-header a:hover {
    opacity: 1;
    text-decoration: underline;
}

.pm-home-news-card-body {
    padding: 18px;
    min-height: 360px;
    color: #13294b;
}

.pm-home-news-card-body h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    color: #13294b;
}

.pm-home-news-card-body p {
    margin: 0;
    color: #617089;
    font-size: 14px;
    line-height: 1.5;
}

.pm-home-fallback {
    background: #ffffff;
    border: 1px solid #e4e9f2;
    border-radius: 12px;
    padding: 18px;
    color: #13294b;
}

@media (max-width: 1200px) {
    .pm-home-split {
        grid-template-columns: 1fr;
    }
}






/* PM FIX: Align home split top with leagues sidebar */
.pm-home-split {
    margin-top: 4px !important;
}

.pm-home-matches-column,
.pm-home-news-column {
    align-self: start;
}

.pm-home-matches-column .tm-page,
.pm-home-matches-column .tm-top-controls,
.pm-home-news-shell,
.pm-home-news-shell > div,
.pm-home-news-card {
    margin-top: 0 !important;
}
/* PM FIX END: Align home split top with leagues sidebar */



/* PM FIX: Home News date selector style bar */
.pm-home-news-date-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    background: #fff;
    border: 1px solid #dbe6f3;
    border-radius: 6px !important;
    box-shadow: 0 3px 10px rgba(17, 31, 61, 0.05);
    color: #13294b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
}

.pm-home-news-date-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 9px;
    color: #13294b;
    font-size: 17px;
    line-height: 1;
}

.pm-home-news-date-bar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #13294b;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
/* PM FIX END: Home News date selector style bar */



/* PM FIX: Home News label and icon match Today */
.pm-home-news-date-bar {
    gap: 9px !important;
}

.pm-home-news-date-bar-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    margin-right: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #13294b !important;
    line-height: 1 !important;
}

.pm-home-news-date-bar-icon svg {
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
}

.pm-home-news-date-bar-label {
    color: #13294b !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0 !important;
}
/* PM FIX END: Home News label and icon match Today */







/* PM FIX: Home News icon 1.3 bigger */
.pm-home-news-date-bar-icon,
.pm-home-news-date-bar-icon svg {
    width: 22.1px !important;
    height: 22.1px !important;
    min-width: 22.1px !important;
}
/* PM FIX END: Home News icon 1.3 bigger */


/* PM HOME NEWS: cleanup old custom news cards 2026-06-27 */

/* PM HOME NEWS: embedded menu shared source cleanup 2026-06-27 */


/* PM HOME: latest above Today plus side news 2026-07-06 */
/* PM HOME SIDE NEWS INCLUDES LATEST ON DESKTOP 2026-07-06 */
.pm-home-matches-column .pm-home-latest-news-above-today {
    width: 100%;
    margin: 0 0 14px 0;
}

.pm-home-matches-column .pm-home-latest-news-above-today .pm-news-home-latest-only,
.pm-home-matches-column .pm-home-latest-news-above-today .pm-home-news-shell,
.pm-home-matches-column .pm-home-latest-news-above-today .pm-home-news-card {
    width: 100%;
    max-width: none;
}

.pm-home-matches-column .pm-home-latest-news-above-today img,
.pm-home-matches-column .pm-home-latest-news-above-today .pm-home-news-img,
.pm-home-matches-column .pm-home-latest-news-above-today .pm-news-card-image {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    display: block;
}

@media (max-width: 1200px) {
    .pm-home-matches-column .pm-home-latest-news-above-today {
        margin-bottom: 12px;
    }
}

@media (max-width: 768px) {
    .pm-home-matches-column .pm-home-latest-news-above-today img,
    .pm-home-matches-column .pm-home-latest-news-above-today .pm-home-news-img,
    .pm-home-matches-column .pm-home-latest-news-above-today .pm-news-card-image {
        max-height: 190px;
    }
}
/* PM HOME END: latest above Today plus side news 2026-07-06 */



/* PM HOME NEWS: top latest card real divider spacing 2026-07-06
   Target only the Home news card above TODAY.
   Put the separator on the meta row so margin-top = space above line and padding-top = space below line.
*/
body .pm-home-split .pm-home-matches-column .pm-home-latest-news-above-today .pm-news-page.pm-news-home-embed.pm-news-home-latest-only .pm-news-grid.pm-news-latest-grid > .pm-news-card .pm-news-card-heading > .pm-news-card-title-stack {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

body .pm-home-split .pm-home-matches-column .pm-home-latest-news-above-today .pm-news-page.pm-news-home-embed.pm-news-home-latest-only .pm-news-grid.pm-news-latest-grid > .pm-news-card .pm-news-card-heading > .pm-news-card-title-stack::after {
    content: none !important;
    display: none !important;
}

body .pm-home-split .pm-home-matches-column .pm-home-latest-news-above-today .pm-news-page.pm-news-home-embed.pm-news-home-latest-only .pm-news-grid.pm-news-latest-grid > .pm-news-card .pm-news-card-heading > .pm-news-card-meta-line {
    border-top: 1px solid #dbe6f3 !important;
    margin-top: 14px !important;
    padding-top: 14px !important;
}
/* PM HOME NEWS END: top latest card real divider spacing 2026-07-06 */


/* PM PERF: Home final responsive layout before first paint 2026-08-30 START */

/*
|--------------------------------------------------------------------------
| Critical Home responsive geometry
|--------------------------------------------------------------------------
|
| Home originally starts as a 60/40 grid.
|
| At <=1650px the FINAL Home rules hide the right News rail and expand the
| matches/top-News column to full width, but those rules currently appear
| after the embedded News HTML.
|
| Mirror only that final geometry here, before any Home HTML is emitted,
| so the browser never paints the temporary narrow layout.
|--------------------------------------------------------------------------
*/
@media (max-width: 1650px) {
    .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;
    }

    .pm-home-split > aside.pm-home-news-column,
    .pm-home-split > .pm-home-news-column,
    .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;
    }

    .pm-home-split > .pm-home-matches-column,
    .pm-home-matches-column {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .pm-home-latest-news-above-today {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}


/* PM FIX: Home top-news final spacing before first paint 2026-08-31 START */

/*
 * The final responsive Home layout uses a 16px gap below the
 * latest News card before Today's Matches.
 *
 * Older rules above use 14px and <=1200px uses 12px, while
 * later rules switch the rendered layout to 16px !important.
 *
 * Apply the final spacing in the existing pre-paint CSS so the
 * TODAY/date selector starts and remains at the same Y position.
 *
 * Home only. No date-selector dimensions or behaviour changed.
 */
@media (max-width: 1650px) {
    .pm-home-latest-news-above-today {
        margin: 0 0 16px 0 !important;
    }
}

/* PM FIX: Home top-news final spacing before first paint 2026-08-31 END */



/* PM FIX: mobile top-news final image geometry before first paint 2026-09-03 START */

/*
 * The embedded News CSS initially provides a 190px image slot.
 *
 * The existing final Home mobile rule, emitted after the News embed,
 * changes that slot to clamp(170px, 52vw, 210px).
 *
 * On a 360px mobile viewport that final value is 187.2px, which caused:
 *
 *     first paint: 190px
 *     final paint: 187.2px
 *     movement:    -2.8px
 *
 * Mirror ONLY the existing final Home image geometry here, before the
 * Home/News HTML is emitted. The later existing Home rule remains the
 * authoritative final cascade and uses the exact same values.
 *
 * Scope:
 * Home -> latest News above TODAY -> mobile only.
 */
@media (max-width: 768px) {
    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today
    .pm-news-image-link {
        display: block !important;
        width: 100% !important;

        height: clamp(170px, 52vw, 210px) !important;

        overflow: hidden !important;
        background: #f4f7fb !important;
    }

    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today
    .pm-news-image-link
    > img.pm-news-image {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-height: none !important;

        object-fit: cover !important;
        object-position: center center !important;
    }
}

/* PM FIX: mobile top-news final image geometry before first paint 2026-09-03 END */


/* PM PERF: Home final responsive layout before first paint 2026-08-30 END */


/* PM HOME NO FLASH LATEST ABOVE TODAY DESKTOP 2026-07-06
   Critical early rule before the Home HTML renders:
   on wide desktop, keep the duplicated latest-above-Today block hidden immediately.
   It is shown later only when the right-side news column is hidden. */
@media (min-width: 1651px) {
    .pm-home-split .pm-home-matches-column .pm-home-latest-news-above-today,
    .pm-home-latest-news-above-today {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 1650px) {
    .pm-home-latest-news-above-today {
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* PM UX: Home responsive latest-3 News autoslider prepaint 2026-09-05 START */

/*
|--------------------------------------------------------------------------
| Home responsive latest-News slider
|--------------------------------------------------------------------------
|
| <=1650px is already the point where Home hides the right News rail and
| displays the selected/latest card above TODAY.
|
| All three cards occupy the same grid cell.
| Hidden cards remain part of grid sizing, so the slider reserves the
| tallest card height and TODAY does not jump when the article changes.
|--------------------------------------------------------------------------
*/

@media (max-width: 1650px) {

    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        position: relative !important;
    }

    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid
    > .pm-news-card {
        grid-area: 1 / 1 !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        margin: 0 !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity 0.35s ease,
            visibility 0s linear 0.35s !important;
    }

    /*
     * No-JS / first-paint fallback:
     * show the newest article immediately.
     */
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid
    > .pm-news-card:first-child {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transition-delay: 0s !important;
        z-index: 2 !important;
    }

    /*
     * Once JS is ready, the explicit active class becomes authoritative.
     */
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid.pm-home-news-slider-ready
    > .pm-news-card:first-child:not(.pm-home-news-slide-active) {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transition:
            opacity 0.35s ease,
            visibility 0s linear 0.35s !important;

        z-index: 1 !important;
    }

    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid
    > .pm-news-card.pm-home-news-slide-active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transition:
            opacity 0.35s ease,
            visibility 0s linear 0s !important;

        z-index: 2 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-grid
    > .pm-news-card {
        transition: none !important;
    }
}


/* PM FIX: responsive Home active no-image News natural height 2026-09-06 START */

/*
 * Root cause:
 * responsive slider cards normally share grid-area 1 / 1 and hidden
 * image slides deliberately remain in grid sizing.
 *
 * When the selected article has no featured image this creates a large
 * empty area below its content.
 *
 * <=1200px only:
 * remove inactive slides from layout sizing while a no-image article
 * is active. Image slides keep the existing stable-height behaviour.
 *
 * The pre-JS first-card rule prevents a first-paint height flash when
 * the newest article itself has no image.
 */
@media (max-width: 1200px) {

    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-news-grid-first-no-image:not(.pm-home-news-slider-ready)
    > .pm-news-card:not(:first-child),

    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-home-news-active-no-image
    > .pm-news-card:not(.pm-home-news-slide-active) {
        position: absolute !important;
        inset: 0 !important;
    }


    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-news-grid-first-no-image:not(.pm-home-news-slider-ready)
    > .pm-news-card:first-child,

    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-home-news-active-no-image
    > .pm-news-card.pm-home-news-slide-active {
        position: relative !important;
        align-self: start !important;

        height: auto !important;
        min-height: 0 !important;
    }


    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-news-grid-first-no-image:not(.pm-home-news-slider-ready)
    > .pm-news-card:first-child
    > .pm-news-card-body,

    body
    .pm-home-split
    .pm-home-matches-column
    .pm-home-latest-news-above-today.pm-home-news-slider
    .pm-news-page.pm-news-home-embed.pm-news-home-latest-only
    .pm-news-grid.pm-home-news-active-no-image
    > .pm-news-card.pm-home-news-slide-active
    > .pm-news-card-body {
        flex: 0 0 auto !important;

        height: auto !important;
        min-height: 0 !important;
    }
}

/* PM FIX: responsive Home active no-image News natural height 2026-09-06 END */


/* PM UX: hide Home top Updates on smaller screens 2026-09-06 START */

/*
 * Home responsive policy:
 *
 * <=1200px:
 *   do not display the Updates/News slider above TODAY.
 *
 * >1200px:
 *   preserve the existing Home News behaviour unchanged.
 *
 * Scope is only the responsive top-News wrapper.
 * Standalone Updates, desktop News rail, TODAY and match cards are untouched.
 */
@media (max-width: 1200px) {
    .pm-home-split
    .pm-home-matches-column
    > .pm-home-latest-news-above-today.pm-home-news-slider {
        display: none !important;
        visibility: hidden !important;

        width: 0 !important;
        height: 0 !important;

        min-height: 0 !important;
        max-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }
}

/* PM UX: hide Home top Updates on smaller screens 2026-09-06 END */


/* PM UX: Home News slider mobile swipe touch-action 2026-09-05 START */
@media (max-width: 768px) {
    .pm-home-latest-news-above-today.pm-home-news-slider {
        touch-action: pan-y pinch-zoom;
    }
}
/* PM UX: Home News slider mobile swipe touch-action 2026-09-05 END */

/* PM UX: Home responsive latest-3 News autoslider prepaint 2026-09-05 END */