/* PM PERF: externalized Home News responsive CSS 2026-09-08 */
/* PM HOME: top latest news card full width on smaller screens 2026-07-06
   Must stay after embedded pages/news.php CSS.
   Scope: only the latest post card above TODAY, not the right-side news column.
*/
.pm-home-latest-news-above-today,
.pm-home-latest-news-above-today .pm-news-page,
.pm-home-latest-news-above-today .pm-news-home-latest-only,
.pm-home-latest-news-above-today .pm-news-grid {
    width: 100% !important;
    max-width: none !important;
}

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

.pm-home-latest-news-above-today .pm-news-grid > .pm-news-card,
.pm-home-latest-news-above-today .pm-news-card,
.pm-home-latest-news-above-today article {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

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

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

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

@media (max-width: 768px) {
    .pm-home-latest-news-above-today {
        margin-bottom: 12px !important;
    }

    .pm-home-latest-news-above-today img,
    .pm-home-latest-news-above-today .pm-home-news-img,
    .pm-home-latest-news-above-today .pm-news-card-image {
        width: 100% !important;
        max-height: 210px !important;
        object-fit: cover !important;
    }
}
/* PM FIX: stable top-news image slot on small screens 2026-08-30 START */

/*
|--------------------------------------------------------------------------
| Home selected News card — stable first-paint image height
|--------------------------------------------------------------------------
|
| The embedded News image has no intrinsic width/height attributes and the
| shared mobile News CSS uses height:auto.
|
| Reserve the final visual image slot before the PNG finishes decoding so
| the selected card above TODAY does not fold/open during page refresh.
|
| Scope is deliberately limited to:
|   Home -> latest News above TODAY -> screens <= 768px
|
| The regular News page and Home right-side News cards are untouched.
|--------------------------------------------------------------------------
*/
@media (max-width: 768px) {
    .pm-home-latest-news-above-today .pm-news-image-link {
        display: block !important;
        width: 100% !important;

        /*
         * Existing Home rules use approximately 190–210px for this image.
         * Keep that visual range while scaling correctly on narrow phones.
         */
        height: clamp(170px, 52vw, 210px) !important;

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

    .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: stable top-news image slot on small screens 2026-08-30 END */

/* PM UX: Home mobile news identity and meta single row 2026-09-03 START */

/*
 * Runtime phone inspection proved the rendered Home latest-News grid is:
 *
 *     .pm-news-grid
 *
 * NOT:
 *
 *     .pm-news-grid.pm-news-latest-grid
 *
 * The previous selector therefore matched zero elements.
 *
 * Actual phone computation before this correction:
 *
 *     row       flex-wrap: wrap
 *     identity  top first row
 *     metadata  32px lower
 *     metadata  12px / weight 800
 *
 * Target:
 *
 * [country] [league logo] Premier League | Date at Time
 *
 * Home latest-News card only.
 * Shared News page remains untouched.
 */
@media (max-width: 760px) {

    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-card
    .pm-news-card-heading
    > .pm-news-card-meta-line {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

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

        gap: 4px !important;

        text-align: left !important;
        overflow: visible !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-card
    .pm-news-card-heading
    > .pm-news-card-meta-line
    > .pm-news-card-competition-identity {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;
        justify-content: flex-start !important;

        flex: 0 0 auto !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 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-card
    .pm-news-card-heading
    > .pm-news-card-meta-line
    > .pm-news-meta {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        align-items: center !important;

        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;

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

        font-size: 9px !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;

        white-space: nowrap !important;
        text-align: left !important;

        overflow: visible !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-card
    .pm-news-card-heading
    > .pm-news-card-meta-line
    > .pm-news-meta
    span {
        font-size: 9px !important;
        line-height: 1.15 !important;
        font-weight: 400 !important;

        white-space: nowrap !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-card
    .pm-news-card-heading
    > .pm-news-card-meta-line
    > .pm-news-meta
    .pm-news-card-meta-separator {
        margin-left: 2px !important;
        margin-right: 2px !important;
    }
}

/* PM UX: Home mobile news identity and meta single row 2026-09-03 END */


/* PM HOME END: top latest news card full width on smaller screens 2026-07-06 */