/* LOT NATIONS-LEAGUE-FIXES — LE BLOC « PHASE DE GROUPES », EN FEUILLE DE COMPOSANT.
 *
 * ═══ POURQUOI CE FICHIER EXISTE ═══
 *
 * Ces regles vivaient dans `home-wc.css`, chargee UNIQUEMENT par la branche
 * World Cup de `home.blade.php`. Le LOT 20-NATIONS-LEAGUE-A a pose le meme
 * composant sur la home d'une competition a groupes : le markup partait, la
 * feuille non.
 *
 * Ce que ca donnait en production sur /ligue-des-nations, mesure dans le DOM :
 *   - `.wc-group-card` est un <a> : sans `display: grid`, il calcule
 *     `display: inline`, et son `overflow: hidden` herite de `.card` faisait
 *     deborder le contenu — la QUATRIEME equipe de chaque groupe se lisait
 *     comme absente alors que les quatre <li> etaient bien rendus,
 *     `display: list-item`, hauteur 120-130 px ;
 *   - `.wc-group-card__teams` retombait sur `list-style-type: disc` — des
 *     puces brutes ;
 *   - `.wc-group-card__hint` s'affichait en texte courant au lieu d'une
 *     micro-etiquette, une fois par carte.
 *
 * Un seul defaut, deux symptomes. Il a fallu mesurer les deux cotes pour le
 * dire : le « rang manquant » n'etait pas un defaut de donnees.
 *
 * ═══ POURQUOI PAS « CHARGER home-wc.css ICI » ═══
 *
 * `home-wc.css` fait 2 000 lignes et commence par des regles de PAGE
 * (`body`, `.shell`, `*`). La charger sur la home competition restylerait
 * toute la page. Les regles du composant sont donc SORTIES de home-wc.css —
 * pas dupliquees : une seule source, chargee par les deux surfaces.
 *
 * Toute surface qui rend `.wc-group-card` doit lier cette feuille.
 * `CompetitionGroupsStylesheetTest` echoue sinon.
 */

.wc-groups-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.wc-group-card {
    display: grid;
    gap: 16px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
    background:
        radial-gradient(circle at 12% 10%, rgba(var(--accent-rgb), 0.12), transparent 34%),
        linear-gradient(145deg, rgba(var(--card-rgb), 0.94), rgba(var(--card-rgb), 0.82));
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.wc-group-card::after {
    content: '';
    position: absolute;
    inset: auto -28px -36px auto;
    width: 96px;
    height: 96px;
    border-radius: 999px;
    border: 1px solid rgba(var(--text-rgb), 0.06);
    background: rgba(var(--text-rgb), 0.025);
    pointer-events: none;
}

.wc-group-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 54px rgba(var(--shadow-rgb), 0.26);
    border-color: rgba(var(--accent-rgb), 0.28);
}

.wc-group-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.wc-group-card__title {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.03em;
}

.wc-group-card__hint {
    color: var(--muted-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wc-group-card__teams {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.wc-group-card__team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(var(--text-rgb), 0.035);
    border: 1px solid rgba(var(--text-rgb), 0.075);
    backdrop-filter: blur(8px);
}

.wc-group-card__team.is-placeholder {
    border-style: dashed;
    color: var(--muted-text);
    background: rgba(var(--text-rgb), 0.02);
}

.wc-group-card__identity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wc-group-card__flag {
    width: 28px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(var(--text-rgb), 0.1);
    background: rgba(var(--text-rgb), 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 28px;
    box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.12);
}

.wc-group-card__flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wc-group-card__flag-fallback {
    font-size: 11px;
    line-height: 1;
}

.wc-group-card__code {
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wc-group-card__points {
    font-size: 12px;
    color: var(--muted-text);
    font-variant-numeric: tabular-nums;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--text-rgb), 0.045);
    border: 1px solid rgba(var(--text-rgb), 0.06);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .wc-groups-grid { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1100px) {
    .wc-groups-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}