/* MATCHSHOCK_HOMEPAGE_V3_PHASE4B_DESKTOP_HIERARCHY_CSS */

/*
 * Homepage V3 Phase 4B
 *
 * Desktop-only visual hierarchy:
 * - wider editorial canvas
 * - improved hero balance
 * - larger navigation targets
 * - lead-story hierarchy in Top stories
 *
 * Existing mobile compact rules remain authoritative.
 */


/* ---------------------------------------------------------
   LARGE DESKTOP CANVAS
   --------------------------------------------------------- */

@media (min-width: 1100px) {
    :root {
        --ms-homepage-v3-desktop-width: 1320px;
    }

    .ms-homepage-v3-hero,
    .zones,
    .ms-live-feed,
    .ms-home-match-center,
    .ms-home-leagues,
    .ms-homepage-v3-stories,
    #football.section,
    #ufc.section,
    #nba.section,
    #transfers.section,
    .ms-newsletter-signup {
        width: min(
            calc(100% - 48px),
            var(--ms-homepage-v3-desktop-width)
        );
        max-width: var(--ms-homepage-v3-desktop-width);
    }


    /* -----------------------------------------------------
       HEADER AND NAVIGATION
       ----------------------------------------------------- */

    .ms-header {
        min-height: 76px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .ms-header .logo {
        font-size: 32px;
    }

    .ms-header .nav {
        align-items: center;
        gap: 8px;
    }

    .ms-header .nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 10px 14px;
        font-size: 12px;
        line-height: 1;
    }

    .ms-header .nav a[href*="#ms-live-feed"] {
        gap: 7px;
        border-color: rgba(255, 71, 71, .28);
        background: rgba(239, 17, 17, .13);
    }

    .ms-header .nav a[href*="#ms-live-feed"]::before {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow:
            0 0 0 3px rgba(34, 197, 94, .12),
            0 0 12px rgba(34, 197, 94, .65);
        content: "";
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .ms-homepage-v3-hero {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(0, .92fr);
        gap: 34px;
        padding-right: 0;
        padding-left: 0;
    }

    .ms-homepage-v3-hero > div:first-child {
        align-self: center;
        max-width: 720px;
    }

    .ms-homepage-v3-hero h1 {
        max-width: 720px;
        font-size: clamp(70px, 5.3vw, 96px);
    }

    .ms-homepage-v3-hero .lead {
        max-width: 640px;
        font-size: 17px;
    }

    .ms-homepage-v3-hero .hero-card {
        align-self: stretch;
    }

    .ms-homepage-v3-hero .hero-card img,
    .ms-homepage-v3-hero .hero-card .fallback.big {
        height: 330px;
        min-height: 330px;
    }

    .ms-homepage-v3-hero .hero-card .pad {
        padding: 22px;
    }

    .ms-homepage-v3-hero .hero-card h2 {
        font-size: 32px;
    }


    /* -----------------------------------------------------
       TOP STORIES EDITORIAL GRID
       ----------------------------------------------------- */

    .ms-homepage-v3-stories {
        padding-right: 0;
        padding-left: 0;
    }

    .ms-homepage-v3-stories .grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-template-rows: auto auto auto;
        gap: 18px;
    }

    .ms-homepage-v3-stories .card {
        min-width: 0;
        overflow: hidden;
    }


    /*
     * Lead story:
     * occupies the large left side across two rows.
     */

    .ms-homepage-v3-stories
    .card:first-child {
        grid-column: 1 / span 7;
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        min-height: 626px;
    }

    .ms-homepage-v3-stories
    .card:first-child > a:first-child {
        display: block;
        flex: 0 0 auto;
    }

    .ms-homepage-v3-stories
    .card:first-child img,
    .ms-homepage-v3-stories
    .card:first-child .fallback {
        width: 100%;
        height: 358px;
        min-height: 358px;
        object-fit: cover;
    }

    .ms-homepage-v3-stories
    .card:first-child .pad {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 26px;
    }

    .ms-homepage-v3-stories
    .card:first-child h3 {
        max-width: 760px;
        margin: 10px 0;
        font-size: 32px;
        line-height: 1.04;
    }

    .ms-homepage-v3-stories
    .card:first-child p {
        display: block;
        max-width: 690px;
        font-size: 15px;
    }


    /*
     * Side stories:
     * two compact cards stacked beside the lead story.
     */

    .ms-homepage-v3-stories
    .card:nth-child(2),
    .ms-homepage-v3-stories
    .card:nth-child(3) {
        grid-column: 8 / span 5;
        display: grid;
        grid-template-columns: 190px minmax(0, 1fr);
        min-height: 304px;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) {
        grid-row: 1;
    }

    .ms-homepage-v3-stories
    .card:nth-child(3) {
        grid-row: 2;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) > a:first-child,
    .ms-homepage-v3-stories
    .card:nth-child(3) > a:first-child {
        display: block;
        min-width: 0;
        height: 100%;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) img,
    .ms-homepage-v3-stories
    .card:nth-child(3) img,
    .ms-homepage-v3-stories
    .card:nth-child(2) .fallback,
    .ms-homepage-v3-stories
    .card:nth-child(3) .fallback {
        width: 190px;
        height: 100%;
        min-height: 304px;
        object-fit: cover;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) .pad,
    .ms-homepage-v3-stories
    .card:nth-child(3) .pad {
        display: flex;
        min-width: 0;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) h3,
    .ms-homepage-v3-stories
    .card:nth-child(3) h3 {
        display: -webkit-box;
        margin: 8px 0;
        overflow: hidden;
        font-size: 23px;
        line-height: 1.08;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) p,
    .ms-homepage-v3-stories
    .card:nth-child(3) p {
        display: -webkit-box;
        margin-bottom: 0;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.45;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }


    /*
     * Supporting row:
     * three equal stories beneath the main editorial area.
     */

    .ms-homepage-v3-stories
    .card:nth-child(4),
    .ms-homepage-v3-stories
    .card:nth-child(5),
    .ms-homepage-v3-stories
    .card:nth-child(6) {
        grid-row: 3;
    }

    .ms-homepage-v3-stories
    .card:nth-child(4) {
        grid-column: 1 / span 4;
    }

    .ms-homepage-v3-stories
    .card:nth-child(5) {
        grid-column: 5 / span 4;
    }

    .ms-homepage-v3-stories
    .card:nth-child(6) {
        grid-column: 9 / span 4;
    }

    .ms-homepage-v3-stories
    .card:nth-child(n + 4):nth-child(-n + 6) img,
    .ms-homepage-v3-stories
    .card:nth-child(n + 4):nth-child(-n + 6) .fallback {
        width: 100%;
        height: 184px;
        min-height: 184px;
        object-fit: cover;
    }

    .ms-homepage-v3-stories
    .card:nth-child(n + 4):nth-child(-n + 6) .pad {
        padding: 18px;
    }

    .ms-homepage-v3-stories
    .card:nth-child(n + 4):nth-child(-n + 6) h3 {
        display: -webkit-box;
        margin: 8px 0;
        overflow: hidden;
        font-size: 21px;
        line-height: 1.1;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .ms-homepage-v3-stories
    .card:nth-child(n + 4):nth-child(-n + 6) p {
        display: -webkit-box;
        overflow: hidden;
        font-size: 13px;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }


    /* Keep posts beyond the editorial six out of layout. */

    .ms-homepage-v3-stories
    .card:nth-child(n + 7) {
        display: none;
    }


    /* -----------------------------------------------------
       CATEGORY AND SIGNUP ALIGNMENT
       ----------------------------------------------------- */

    #football.section,
    #ufc.section,
    #nba.section,
    #transfers.section {
        grid-template-columns:
            minmax(0, .9fr)
            minmax(0, 1.1fr);
    }

    .ms-newsletter-signup {
        grid-template-columns:
            minmax(0, 1.08fr)
            minmax(390px, .92fr);
    }
}


/* ---------------------------------------------------------
   MEDIUM DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1100px) and (max-width: 1240px) {
    .ms-homepage-v3-stories
    .card:nth-child(2),
    .ms-homepage-v3-stories
    .card:nth-child(3) {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) img,
    .ms-homepage-v3-stories
    .card:nth-child(3) img,
    .ms-homepage-v3-stories
    .card:nth-child(2) .fallback,
    .ms-homepage-v3-stories
    .card:nth-child(3) .fallback {
        width: 150px;
    }

    .ms-homepage-v3-stories
    .card:nth-child(2) h3,
    .ms-homepage-v3-stories
    .card:nth-child(3) h3 {
        font-size: 20px;
    }
}


/* ---------------------------------------------------------
   TABLET AND MOBILE PROTECTION
   --------------------------------------------------------- */

@media (max-width: 1099px) {
    /*
     * Explicitly retain Phase 2's tablet/mobile behavior.
     * No desktop hierarchy selectors are applied here.
     */

    .ms-homepage-v3-stories
    .card:nth-child(n + 7) {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-header .nav a {
        transition: none;
    }
}