/* assets/css/pages/home.css */

.hero-games-showcase {
    padding: 10px 0 12px 0;
}

/* =================================================================== */
/* NOUVEAU : CORRECTION POUR LA TAILLE DES IMAGES DANS LA SECTION HERO */
/* =================================================================== */

/* On s'assure que le conteneur de l'image (le lien <a> ou la div .small-game)
   a une taille définie par la grille et qu'il cache tout ce qui dépasse. */
.hero-grid-item a,
.hero-grid-item .small-game {
    display: block;
    position: relative;
    overflow: hidden; /* C'est la règle la plus importante pour éviter les débordements */
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius); /* Appliquer le radius au conteneur pour que l'image soit bien coupée */
}

/* On s'assure que l'élément <picture> remplit bien son conteneur (le lien <a>) */
.hero-grid-item picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* C'est la correction principale :
   - On sort l'image du flux normal pour que ses dimensions natives n'affectent pas la grille.
   - On la force à remplir son conteneur (le <picture>).
   - `object-fit: cover` s'assure qu'elle remplit l'espace sans se déformer. */
.hero-grid-item img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease-out;
    will-change: transform;
}

/* Cache visuellement la description des sections de genre sur la page d'accueil pour le SEO. */
#genre-sections-container .section-description {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

/* MODIFIÉ : Optimisation CLS pour les carrousels */
/* Au lieu de display:none, on utilise l'opacité et une hauteur minimale pour réserver l'espace */
/* On exclut la section hero, qui est le LCP et ne doit pas être cachée. */
.js-enabled .carousel-section-wrapper:not(#hero-section) {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out, visibility 0s linear 0.4s, min-height 0.4s ease-in-out;
    /* NOUVEAU : Hauteur minimale dynamique basée sur la largeur de la carte (38vw) et son ratio (16/9) + hauteur du header (~2.5rem) */
    min-height: calc(21.375vw + 2.5rem);
    overflow: hidden; /* Important pour que la transition de hauteur fonctionne */
}

/* Hauteur minimale plus grande pour les sections en mode portrait */
.js-enabled .carousel-section-wrapper.portrait-section:not(#hero-section) {
    /* NOUVEAU : Hauteur minimale dynamique basée sur la largeur de la carte (38vw) et son ratio (2/3) + hauteur du header (~2.5rem) */
    min-height: calc(57vw + 2.5rem);
}

/* NOUVEAU : Lorsque la largeur max des cartes est atteinte, on passe à une hauteur fixe. */
/* Le point de rupture est calculé : max-width (233px) / largeur en vw (0.38) = 613.15px */
@media (min-width: 614px) {
    .js-enabled .carousel-section-wrapper:not(#hero-section) {
        /* Hauteur fixe = (233px * 9/16) + 2.5rem = 131px + 2.5rem */
        min-height: calc(131px + 2.5rem);
    }
    .js-enabled .carousel-section-wrapper.portrait-section:not(#hero-section) {
        /* Hauteur fixe = (233px * 3/2) + 2.5rem = 350px + 2.5rem */
        min-height: calc(350px + 2.5rem);
    }
}

/* Classe ajoutée par JS pour afficher la section si elle a du contenu scrollable */
.js-enabled .carousel-section-wrapper:not(#hero-section).is-visible {
    opacity: 1;
    visibility: visible;
    /* La hauteur s'adapte au contenu une fois visible. La transition se fera vers la hauteur réelle. */
}

/* NOUVEAU : Classe pour cacher COMPLÈTEMENT une section sans laisser d'espace. */
.js-enabled .carousel-section-wrapper:not(#hero-section).is-hidden {
    display: none;
}