/* ==========================================================================
   INKÛNU — Le Journal : la carte d'article.

   Partagée par la liste du blog et les articles liés en bas de lecture.
   Copier la carte aurait garanti qu'elles divergent au premier réglage.

   Les couleurs et la typo viennent de la section hôte, par les variables
   --jr-*. Cette feuille ne décide d'aucune couleur : elle ne pose que la
   forme, pour qu'une même carte tienne sur le fond clair de la liste comme
   sur le bas d'un article.

   IMPORTANT — ordre de cascade : lier cette feuille AVANT le bloc {% style %}
   de la section hôte. Ses règles n'ont qu'une classe de spécificité, comme
   celles des sections ; chargée après, elle gagnerait les égalités.

   Angles droits partout : aucun border-radius dans ce fichier, et aucun à
   ajouter. C'est la règle de cohérence du site.
   ========================================================================== */

.ink-jr__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--jr-gap, 32px);
}

/* La carte entière est un lien : le titre seul obligerait à viser, alors que
   la vignette et l'extrait désignent le même article. */
.ink-jr__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 0;
}

.ink-jr__shot {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--jr-ratio, 1 / 1);
  overflow: hidden;
  background: var(--jr-rule, rgba(10, 10, 10, .08));
  border-radius: 0;
}

.ink-jr__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .6s ease;
}

/* Un mouvement de l'image, pas de la carte : la grille ne bouge pas d'un
   pixel au survol, seule la photo respire dans son cadre. */
.ink-jr__card:hover .ink-jr__shot img,
.ink-jr__card:focus-visible .ink-jr__shot img {
  transform: scale(1.04);
}

.ink-jr__card:focus-visible {
  outline: 2px solid var(--jr-fg, #0a0a0a);
  outline-offset: 4px;
}

/* Le texte sans photo ne doit pas remonter contre le bord de la carte
   précédente : la marge vit sur le corps, pas sur l'image. */
.ink-jr__text {
  display: block;
  padding: 16px 0 0;
}

.ink-jr__tag {
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 10px;
  border: 1px solid var(--jr-rule, rgba(10, 10, 10, .16));
  color: var(--jr-soft, #5a5347);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 0;
}

.ink-jr__title {
  display: block;
  margin: 0;
  color: var(--jr-fg, #0a0a0a);
  font-weight: var(--jt-w, 500);
  font-style: var(--jt-i, normal);
  font-size: var(--jt-s, 19px);
  line-height: 1.3;
  letter-spacing: 0;
}

.ink-jr__excerpt {
  display: block;
  margin: 10px 0 0;
  color: var(--jr-soft, #5a5347);
  font-weight: var(--je-w, 400);
  font-style: var(--je-i, normal);
  font-size: var(--je-s, 14px);
  line-height: 1.65;
  letter-spacing: 0;
}

/* Date et durée de lecture sur une seule ligne, séparées par un point médian :
   le tiret est réservé ailleurs et ne sert jamais de séparateur ici. */
.ink-jr__meta {
  display: block;
  margin: 12px 0 0;
  color: var(--jr-soft, #5a5347);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .02em;
}

.ink-jr__meta span + span::before {
  content: " · ";
}

@media (min-width: 750px) {
  .ink-jr__grid {
    grid-template-columns: repeat(var(--jr-cols, 3), minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ink-jr__shot img,
  .ink-jr__card:hover .ink-jr__shot img,
  .ink-jr__card:focus-visible .ink-jr__shot img {
    transition-duration: .01s;
    transform: none;
  }
}