/*
  Vitrine des projets façon bibliothèque de jeux (Steam / Xbox / PlayStation) :
  une grille de jaquettes serrées, qui au survol se soulèvent et s'éclairent
  d'un halo, comme une carte de jeu dans un launcher de console. Le titre et
  le genre restent affichés en permanence en bas de la jaquette (on doit
  pouvoir identifier un projet sans avoir à le survoler) ; au survol, la
  ligne de contexte (équipe, année) se déplie au-dessus.
  Chaque tuile ancre vers la fiche projet détaillée plus bas dans la page.
*/

.showcase {
  margin-top: var(--space-7);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.showcase__tile {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-soft);
  isolation: isolate;
  transform: translateY(0) scale(1);
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.showcase__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard);
}

/* Halo d'accent façon "glow" de console, caché par défaut */
.showcase__tile::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: conic-gradient(
    from 180deg,
    var(--color-accent),
    var(--color-secondary),
    var(--color-accent-strong),
    var(--color-accent)
  );
  opacity: 0;
  filter: blur(1.25rem);
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* Overlay d'infos, façon carte de jeu sélectionnée dans un launcher */
.showcase__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  isolation: isolate;
  padding: var(--space-4);
  /* Dégradé court : il ne sert qu'à assurer la lisibilité du titre et du
     genre posés sur n'importe quelle jaquette, sans l'assombrir en entier. */
  background: linear-gradient(
    to top,
    rgba(17, 14, 23, 0.9) 0%,
    rgba(17, 14, 23, 0.6) 28%,
    rgba(17, 14, 23, 0) 56%
  );
}

/* Couche de fond renforcée, révélée au survol / focus : la ligne de contexte
   dépliée peut faire 4-5 lignes et passe alors sur la jaquette, il lui faut
   un fond plus couvrant que le dégradé court du repos. */
.showcase__overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(17, 14, 23, 0.94) 0%,
    rgba(17, 14, 23, 0.82) 45%,
    rgba(17, 14, 23, 0.4) 72%,
    rgba(17, 14, 23, 0) 92%
  );
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.showcase__meta {
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-secondary);
  /* Repliée au repos, dépliée au survol / focus clavier. flex-end ancre le
     titre en bas : la ligne se déplie vers le haut, sans faire sauter le
     titre. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height var(--duration-base) var(--ease-standard),
    opacity var(--duration-base) var(--ease-standard);
}

.showcase__title {
  margin-top: var(--space-1);
  font-size: var(--step-md);
  color: #FFFFFF;
  line-height: var(--leading-tight);
}

.showcase__tag {
  margin-top: var(--space-2);
  font-size: var(--step-xs);
  color: rgba(255, 255, 255, 0.75);
  /* 2 lignes réservées : un genre qui passe à la ligne ne décale plus le
     titre de sa tuile par rapport aux voisines. */
  min-height: 2.8em;
  min-height: 2lh;
}

/* États hover : montée de la carte, halo, overlay. Restreint aux
   vrais dispositifs à pointeur précis (souris/trackpad) : sur
   tactile, :hover n'a pas de sens réel (pas de survol avant contact)
   et reste souvent "collé" après un tap tant qu'on ne touche pas
   ailleurs, ce qui donne une carte visuellement bloquée en hover. */
@media (hover: hover) and (pointer: fine) {
  .showcase__tile:hover {
    transform: translateY(-0.5rem) scale(1.04);
    box-shadow: var(--shadow-raised);
  }

  .showcase__tile:hover::before {
    opacity: 0.55;
  }

  .showcase__tile:hover img {
    transform: scale(1.08);
    filter: brightness(0.75);
  }

  .showcase__tile:hover .showcase__meta {
    max-height: 8rem;
    opacity: 1;
  }

  .showcase__tile:hover .showcase__overlay::before {
    opacity: 1;
  }
}

/* Focus clavier : toujours actif, quel que soit l'appareil (Tab reste
   un vrai signal d'intention, contrairement au hover tactile). */
.showcase__tile:focus-visible {
  transform: translateY(-0.5rem) scale(1.04);
  box-shadow: var(--shadow-raised);
}

.showcase__tile:focus-visible::before {
  opacity: 0.55;
}

.showcase__tile:focus-visible img {
  transform: scale(1.08);
  filter: brightness(0.75);
}

.showcase__tile:focus-visible .showcase__meta {
  max-height: 8rem;
  opacity: 1;
}

.showcase__tile:focus-visible .showcase__overlay::before {
  opacity: 1;
}

.showcase__tile:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Appareils sans hover fiable (tactile) : pas d'animation d'entrée,
   l'overlay d'infos (titre, rôle, année) reste visible en permanence
   plutôt que caché derrière un survol qui n'existe pas sur ces
   écrans. Le halo et la montée de carte restent réservés à la souris
   (purement décoratifs, sans perte d'info).
   Le dégradé et le texte sont resserrés par rapport à la version
   hover : certaines tuiles (travaux) ont un "meta" long, et un
   overlay figé en permanence ne doit pas manger toute la jaquette. */
@media (hover: none) {
  .showcase__tile img {
    filter: brightness(0.8);
  }

  .showcase__overlay {
    opacity: 1;
    transform: translateY(0);
    /* Dégradé plus bas et plus progressif : l'image reste lisible
       sur la majorité de la tuile, le texte garde un fond assez
       sombre juste où il en a besoin. */
    background: linear-gradient(
      to top,
      rgba(17, 14, 23, 0.95) 0%,
      rgba(17, 14, 23, 0.78) 30%,
      rgba(17, 14, 23, 0) 62%
    );
    padding: var(--space-3);
  }

  /* Le "meta" (parfois long : "Devoir de deuxième année, gestion de
     production") est la ligne la plus à risque de déborder ; on la
     tronque sur une seule ligne plutôt que de laisser le bloc de
     texte grossir et couvrir l'image. */
  .showcase__meta {
    max-height: none;
    opacity: 1;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
  }

  .showcase__title {
    margin-top: 0.15rem;
    font-size: var(--step-sm);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Le tag (sous-titre) est la description la plus longue : sur
     tactile, où l'on ne peut pas compter sur un hover pour "faire de
     la place", on le masque pour garder l'overlay compact. Le titre
     et le meta suffisent à identifier le projet ; le sous-titre
     complet reste disponible sur la fiche projet elle-même. */
  .showcase__tag {
    display: none;
  }
}

@media (min-width: 32rem) {
  .showcase {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 26rem) {
  .showcase {
    gap: var(--space-4);
  }
}

@media (min-width: 52rem) {
  .showcase {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__tile,
  .showcase__tile img,
  .showcase__tile::before,
  .showcase__overlay::before,
  .showcase__meta {
    transition: none;
  }

  .showcase__tile:hover,
  .showcase__tile:focus-visible {
    transform: none;
  }
}