/* Ta liste simple */
.projects-index{
  display: flex;
  align-items: flex-start;
}
.projects-index__inner{
  width: 100%;
}

/* reset ul */
.projects-list{
  list-style:none;
  margin:0;
  padding:0;
}

/* chaque ligne */
.projects-item{
  /* rien ici */
}

/* le lien = grille "table" */
.projects-link{
  position: relative;              /* nécessaire pour l’overlay preview */
  display: grid;
  grid-template-columns:
    clamp(90px, 8vw, 120px)
    minmax(320px, 1fr)
    clamp(50px, 5vw, 100px)
    clamp(250px, 25vw, 370px);
  column-gap: clamp(24px, 3vw, 48px);
  align-items: left;
  width: 100%;
  text-decoration: none;
  color: inherit;

  /* la hauteur de ligne doit venir du texte, pas de la preview */
  padding: 4px 0;                   /* spacing entre lignes */
}

/* colonnes texte: UNE ligne */
.projects-col{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* si tu veux pas d’ellipsis, enlève overflow/text-overflow */
.projects-year{}
.projects-tags{ text-align: right; }

/* reset style h1: ici on n’utilise pas h1, donc pas besoin */

/* le slot ne fait rien sauf réserver la colonne */
.projects-preview-slot{
  position: relative;
  display:block;
  height: 0;                        /* ne crée AUCUNE hauteur */
}

/* preview = overlay centré verticalement sur la ligne */
.projects-preview {
  position: absolute;
  top: 50%;
  width: clamp(100px, 100%, 300px);
  transform: translateY(-50%);
  overflow: hidden;
  pointer-events: none;             /* le hover reste sur le lien */
  opacity: 0;
}

/* pour ancrer précisément la preview sur la colonne 3:
   on la positionne depuis le début de la grille avec un padding-left correspondant
   => alternative plus clean: voir note juste en dessous */
.projects-link{
  --col-gap: 48px;
  --col-year: 140px;
  --col-preview: 15vw;

  /* on calcule le début de la colonne 3 : year + gap + title + gap
     MAIS le title est flexible => impossible en pur calc.
     Donc: on aligne la preview au CENTRE du slot (col3) via une autre technique ci-dessous. */
}

/* vidéo */
.projects-video{
  width: 100%;
  height: 100%;
  display:block;
}

/* hover: show preview */
.projects-item:hover .projects-preview,
.projects-link:hover .projects-preview{
  opacity: 1;
}


@media (max-width: 768px) {
  .projects-link {
    grid-template-columns:
      clamp(var(--space-4), 15vw, var(--space-6))   /* year */
      1fr;                       /* title */

    column-gap: 16px;
  }

  /* cacher preview + tags */
  .projects-preview,
  .projects-tags {
    display: none;
  }
}