/* ========== REVIEWS CARDS ($reviews_variant = 'cards' de blocks/city-reviews.php) ==========
   Bande blanche pleine largeur entre la grille des jeux (gris clair) et le
   bandeau cartes-cadeaux (sombre). En-tête centré, mêmes titre et sous-titre
   que .games-header, puis une rangée de cartes au dessin des cartes d'avis de
   city-home.css. Plus spécifique que ces styles, donc l'ordre de chargement
   n'a pas d'importance. */

.reviews-section.reviews-section-cards {
    background: #fff;
    padding: 70px 0 80px;
}

.reviews-section-cards .reviews-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    color: #181818;
}

.reviews-section-cards .reviews-intro {
    max-width: 600px;
    margin: 15px auto 0;
    font-family: 'Hind', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    color: #555;
}

/* Note moyenne sous le titre (fiche jeu, $reviews_aggregate), avant l'intro */
.reviews-section-cards .reviews-aggregate {
    margin: 10px auto 0;
    font-family: 'Hind', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    color: #555;
}

.reviews-section-cards .reviews-aggregate b {
    color: #181818;
}

.reviews-section-cards .reviews-aggregate-stars {
    color: #f5a623;
}

.reviews-section-cards .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1100px;
    /* Écart fixe sous l'en-tête, qu'il ait une intro, une note ou seulement le titre */
    margin: 50px auto 0;
}

.reviews-section-cards .review-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    text-align: left;
}

.reviews-section-cards .review-stars {
    margin: 0 0 16px;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 3px;
    color: #f5a623;
}

.reviews-section-cards .review-text {
    flex: 1 1 auto;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-family: 'Hind', sans-serif;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.6;
    color: #333;
}

.reviews-section-cards .review-author {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #181818;
}

.reviews-section-cards .review-city {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
}

/* Tablette : trois colonnes plus étroites */
@media (max-width: 991px) {
    .reviews-section.reviews-section-cards {
        padding: 50px 0 60px;
    }

    .reviews-section-cards .reviews-grid {
        gap: 16px;
        margin-top: 36px;
    }

    .reviews-section-cards .review-card {
        padding: 24px 20px;
    }
}

/* Mobile : cartes à faire glisser au doigt (scroll-snap, sans JS), bord à
   bord quel que soit le padding du .container ; la suivante dépasse à droite
   pour inviter à glisser */
@media (max-width: 767px) {
    .reviews-section.reviews-section-cards {
        padding: 50px 0;
    }

    .reviews-section-cards .reviews-title {
        padding: 0 10px;
        font-size: 1.5rem;
    }

    .reviews-section-cards .reviews-intro {
        padding: 0 10px;
        font-size: 1rem;
    }

    .reviews-section-cards .reviews-aggregate {
        font-size: 1rem;
    }

    .reviews-section-cards .reviews-grid {
        display: flex;
        gap: 12px;
        max-width: none;
        margin-top: 26px;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 2px 20px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .reviews-section-cards .reviews-grid::-webkit-scrollbar {
        display: none;
    }

    .reviews-section-cards .review-card {
        flex: 0 0 min(82%, 340px);
        scroll-snap-align: start;
    }
}