/**
 * 🆕 v4.7.7 — CSS responsive pour les composants WC Hub
 *
 * Couvre :
 *   .rems-wc-all-groups        ([REMS_WC_ALL_GROUPS])
 *   .rems-wc-favorites         ([REMS_WC_TOURNAMENT_FAVORITES])
 *   .rems-wc-continent-focus   ([REMS_WC_CONTINENT_FOCUS])
 *   .rems-wc-world-stars       (fallback CONTINENT_FOCUS)
 *   .rems-wc-related-big5      ([REMS_WC_RELATED_BIG5])
 *
 * Problème résolu : les styles inline `repeat(auto-fit, minmax(180px,1fr))`
 * sur certains thèmes WP ne s'appliquent pas correctement en mobile à cause
 * de containers parents qui forcent overflow/width. On force ici un layout
 * mobile explicite et défensif.
 */

/* === BASE — Force min-width 0 pour permettre le grid shrink === */
.rems-wc-all-groups,
.rems-wc-favorites,
.rems-wc-continent-focus,
.rems-wc-world-stars,
.rems-wc-related-big5 {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.rems-wc-all-groups *,
.rems-wc-favorites *,
.rems-wc-continent-focus *,
.rems-wc-world-stars *,
.rems-wc-related-big5 * {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* === Grids défensifs : force le passage en 1 col sous 640px === */
@media (max-width: 640px) {
    .rems-wc-groups-grid,
    .rems-wc-favorites-grid,
    .rems-wc-continent-grid,
    .rems-wc-stars-grid,
    .rems-wc-related-big5-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* === Très petit mobile : 1 col forcé avec scroll horizontal interdit === */
@media (max-width: 480px) {
    .rems-wc-all-groups,
    .rems-wc-favorites,
    .rems-wc-continent-focus,
    .rems-wc-world-stars,
    .rems-wc-related-big5 {
        max-width: 100% !important;
    }
}

/* === Tablette : 2 colonnes pour les composants à 4-5 items === */
@media (min-width: 641px) and (max-width: 900px) {
    .rems-wc-favorites-grid,
    .rems-wc-continent-grid,
    .rems-wc-stars-grid,
    .rems-wc-related-big5-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .rems-wc-groups-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* === Force lisibilité des cards intérieures sur mobile === */
@media (max-width: 480px) {
    .rems-wc-all-groups .rems-wc-group-card,
    .rems-wc-favorites > div > div > div,
    .rems-wc-continent-focus > div > div > div,
    .rems-wc-world-stars > div > div > div,
    .rems-wc-related-big5 > div > div > a {
        padding: 12px !important;
        font-size: 13px !important;
    }
    .rems-wc-all-groups table {
        font-size: 12px !important;
    }
    .rems-wc-all-groups table th,
    .rems-wc-all-groups table td {
        padding: 5px 3px !important;
    }
    /* Le bloc 8e Group A avec en-tête (#32 vert) doit rester lisible */
    .rems-wc-all-groups h3 {
        font-size: 14px !important;
    }
}

/* === Empty state fallback : message clair quand le bloc n'a rien à afficher === */
.rems-wc-empty-fallback {
    text-align: center;
    padding: 18px 16px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
}
.rems-wc-empty-fallback strong {
    color: #1e293b;
    display: block;
    margin-bottom: 4px;
}