/* assets/css/pages/more-games.css */

/*
   On utilise l'ID #games-listing pour augmenter la spécificité des sélecteurs.
   Cela garantit que les styles de cette page (display: grid, width: 100% sur les cartes)
   ne sont pas écrasés par les styles globaux des carrousels (display: flex, largeurs fixes)
   définis dans game-cards.css.
*/
#games-listing .wrapping-grid {
    display: grid;
    gap: 15px;
    width: 100%;
    padding: 0;
    /* Comportement par défaut (mobile) : 2 colonnes qui s'adaptent à la largeur. */
    grid-template-columns: repeat(2, 1fr);
}

/*
   NOUVELLE LOGIQUE DE GRILLE ADAPTATIVE :
   Au lieu d'utiliser "auto-fill" qui ajoute des colonnes dès que possible (ce qui peut réduire la taille des cartes),
   nous définissons un nombre de colonnes fixe pour différentes tailles d'écran (breakpoints).
   Avec "1fr", les colonnes (et donc les cartes de jeu) s'agrandiront pour remplir l'espace disponible,
   tandis que la gouttière ("gap") restera fixe. Cela correspond au comportement souhaité.
*/

/* Tablettes et petits écrans */
@media (min-width: 540px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Écrans de bureau */
@media (min-width: 820px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* NOUVEAU : Écrans de bureau plus larges */
@media (min-width: 1200px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

/* NOUVEAU : Très grands écrans (pour atteindre les 6 colonnes) */
@media (min-width: 1600px) {
    #games-listing .wrapping-grid {
        grid-template-columns: repeat(6, 1fr);
    }
    #games-listing .wrapping-grid.portrait-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

#games-listing .wrapping-grid .game-card {
    width: 100%; /* La carte prend 100% de la colonne de la grille */
    max-width: none; /* On annule toute largeur maximale (ex: max-width: 233px) qui pourrait être héritée des styles de carrousel. */
}