/*
 * La liste des projets : une grille de cartes, et la commande qui en ouvre un de plus.
 */

/*
 * La grille occupe l'écran entier. La mesure de lecture du paquet borne une page de texte suivi,
 * qu'on parcourt ligne à ligne ; des cartes se balaient du regard, et la brider laisserait une
 * moitié d'écran vide pour une rangée de moins.
 *
 * Ciblé par ce que la page contient, plutôt que par une classe posée sur le corps : le gabarit
 * du paquet n'offre pas d'emplacement pour en ajouter une.
 */
.app-main:has(.project-grid) {
    max-width: none;
}

/* La commande tient le haut de la page, du côté où la ligne se termine — là où se rangent les
   actions dans le reste de l'interface. */
.project-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--app-space-lg);
}

/*
 * La grille vient du paquet. Ne restent ici que les marques de liste, qu'aucune remise à zéro
 * n'enlève, et la largeur des colonnes : `auto-fill` garde les pistes vides, sans quoi deux
 * projets s'étireraient chacun sur une moitié d'écran.
 */
.project-grid {
    padding: 0;
    margin: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

/* Les cartes d'une même rangée descendent aussi bas l'une que l'autre, quel que soit le nombre
   de lignes qu'un nom demande. */
.project-grid > li {
    display: flex;
}

/*
 * Une carte de projet est un lien, et se lit pourtant comme une carte : l'encre reste celle du
 * texte et le soulignement du survol s'efface — c'est le relief qui répond au curseur.
 */
.project-card {
    flex: 1;
    flex-direction: row;
    align-items: center;
    gap: var(--app-space-md);
    padding: var(--app-space-lg);
    color: inherit;
}

.project-card:hover {
    text-decoration: none;
}

/* Le dessin dans son carré d'accent, à la taille d'une icône d'application et non d'une ligne
   de texte : c'est ce qui se reconnaît avant qu'un nom soit lu. */
.project-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--app-radius-ui);
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 1.25rem;
}

/* Le nom porte la carte : il en prend le poids, et passe à la ligne plutôt que de déborder du
   cadre quand il est long. */
.project-card-name {
    min-width: 0;
    font-weight: var(--app-weight-semibold);
    overflow-wrap: anywhere;
}