/* ==========================================================================
   ZAPPYWIN - RESPONSIVE SCALING (Mobile, Tablet, Desktop)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile (< 768px) - Exact Figma Mobile Layout
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .container-figma-mobile {
        max-width: 100%;
        padding-left: 8px;
        padding-right: 8px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 90px; /* Space for bottom dock */
    }

    .grid-featured-games {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .grid-compact-games {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   Tablet (768px - 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .container-figma-mobile {
        max-width: 860px;
        padding-left: 20px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 95px;
    }

    .grid-featured-games {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .grid-compact-games {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .game-card-featured .card-media-wrap {
        height: 155px;
    }
}

/* --------------------------------------------------------------------------
   Desktop (> 1024px) - Expansive Full-Screen Gaming Layout (No Dead Space)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .container-figma-mobile {
        width: 94%;
        max-width: 1540px;
        padding-left: 24px;
        padding-right: 24px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 85px;
    }

    /* 4-column large featured games on desktop */
    .grid-featured-games {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }

    /* 6-column compact games on desktop */
    .grid-compact-games {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 14px;
    }

    @media (min-width: 1400px) {
        .grid-compact-games {
            grid-template-columns: repeat(8, 1fr);
            gap: 16px;
        }
    }

    .game-card-featured .card-media-wrap {
        height: 175px;
    }

    /* Side-by-side Dual Row on Desktop for Process & Live Feeds */
    .desktop-row-dual {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }

    /* Side-by-side Split for Champions Podium & Leaderboard */
    .champions-desktop-split {
        display: grid;
        grid-template-columns: 5fr 7fr;
        gap: 24px;
        align-items: start;
    }

    .floating-widgets-holder {
        right: 32px;
        bottom: 85px;
    }
}