/* ============================================================
   RÉSULTATS RÉCENTS — extension de `.pick-row`.
   Hotfix `hotfix-portfolio-recent-results`.

   ⚠️ FICHIER SÉPARÉ, CHARGÉ APRÈS `footlab.css`. Modèle : `plan-rail.css`.
   `footlab.css` est le CSS réellement servi en production ET un miroir au bit
   près du projet Claude Design : on ne l'édite jamais pour porter un correctif.
   Toute règle ajoutée ici SURCHARGE, elle ne remplace pas.

   CE QUE LA MAQUETTE DÉFINIT DÉJÀ (et qu'on ne retouche pas) :
     .pick-row  grid auto 1fr auto auto · gap 12 · bordure basse
     .pick-main flex colonne, min-width 0
     .pick-match 13.5px/600, nowrap + ellipsis
     .pick-meta  mono 10px, texte atténué
     .pick-res   pastille 22×22 W/L
     .pick-val   tnum 15px/700, aligné à droite, min-width 64

   ÉCART MAQUETTE ASSUMÉ (DoD du hotfix) : la maquette ne prévoit ni écusson ni
   score dans `.pick-match`. Les deux sont ajoutés parce qu'une ligne qui ne dit
   ni qui a joué ni comment ça s'est terminé n'explique pas d'où vient un gain —
   le défaut même que ce hotfix corrige.
   ============================================================ */

/* ---------- La ligne devient un lien ---------- */

/* Le gabarit maquette est un `div` ; il devient `a` dès qu'une cible existe.
   L'apparence ne doit pas changer pour autant : ni soulignement, ni couleur de
   lien — le repère d'interaction est le fond au survol. */
.pick-row--link {
    color: inherit;
    text-decoration: none;
    /* `.pick-row` est déjà `display:grid` ; un `<a>` doit le redéclarer. */
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    /* La bordure basse vient de `.pick-row` : on n'ajoute qu'un léger retrait
       horizontal pour que le fond de survol ne colle pas au bord de la carte. */
    padding-inline: 6px;
    margin-inline: -6px;
    transition: background-color 150ms ease;
}

.pick-row--link:hover,
.pick-row--link:focus-visible {
    background: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.pick-row--link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ---------- Équipes, écussons, score ---------- */

.pick-match {
    display: flex;
    align-items: center;
    gap: 6px;
    /* Indispensable : sans lui, le contenu flex impose sa largeur minimale et
       fait déborder la piste `1fr` de la grille au lieu de s'y comprimer. */
    min-width: 0;
}

.pick-side {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    /* Les deux camps se partagent l'espace à parts égales : un nom long ne
       mange pas la place de l'autre, donc les deux restent identifiables. */
    flex: 1 1 0;
    min-width: 0;
}

.pick-side--away {
    /* L'extérieur se lit de droite à gauche : écusson au plus près du score,
       comme sur les affiches de la maquette. */
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.pick-team {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pick-score {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
    padding: 1px 6px;
    border-radius: 5px;
    background: color-mix(in oklab, var(--foreground) 7%, transparent);
}

.pick-versus {
    flex: none;
    font-size: 10px;
    color: var(--muted-foreground);
}

.pick-row .team-crest {
    flex: none;
}

/* ---------- Mobile : deux rangs plutôt qu'une troncature ambiguë ---------- */

/*
 * SOUS 420 px, `.pick-main` ne dispose que d'environ 175 px dans le gabarit à
 * quatre colonnes. Deux écussons, deux noms et un score n'y tiennent pas : la
 * ligne se réduirait à « Olympique de Mars… », indiscernable d'« Olympique
 * Lyonn… ». Une troncature ambiguë est pire qu'une ligne haute.
 *
 * La ligne passe donc à deux rangs — repères courts et chiffres en haut, match
 * en dessous sur toute la largeur — et `.pick-match` a le droit de se replier
 * au lieu d'être coupé. Les noms restent COMPLETS : l'ambiguïté disparaît par
 * construction, elle n'est pas atténuée.
 */
@media (max-width: 420px) {

    .pick-row,
    .pick-row--link {
        grid-template-columns: auto 1fr auto auto;
        grid-template-areas:
            "date .    res  val"
            "main main main main";
        row-gap: 6px;
    }

    .pick-date { grid-area: date; }
    .pick-res  { grid-area: res; }
    .pick-val  { grid-area: val; }
    .pick-main { grid-area: main; }

    .pick-match {
        /* Repli autorisé : c'est ce qui remplace l'ellipsis ambiguë. */
        flex-wrap: wrap;
        white-space: normal;
        row-gap: 2px;
    }

    .pick-team {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .pick-side {
        /* Les camps ne se partagent plus la largeur à parts égales : chacun
           prend ce dont il a besoin et le second passe à la ligne si nécessaire. */
        flex: 0 1 auto;
    }

}