/*
  NJ — Related Articles
  Design auto-contenu (voir nj-articles-filter/assets/css pour le même
  raisonnement) : référence les custom properties définies site-wide dans
  nj-tokens.css (--fg, --fg-dim-*, --line-*, --max, --gutter, --font),
  jamais de valeur redéfinie ici. Reproduit fidèlement la section
  "À lire ensuite" de article-no-code-ou-sur-mesure.html — même valeurs
  que .article-card/.article-media/.article-theme/.article-title (sans
  l'extrait, volontairement absent de cette section-là dans la référence).
*/

/*
  Pas de max-width/padding propre à .nj-related : sur le template Article
  de blog, le shortcode est posé DANS un conteneur Elementor qui porte déjà
  les classes globales "wrap" + "post-related" (largeur max + padding-top
  110px) — les dupliquer ici les additionnerait. Si ce shortcode est un
  jour utilisé hors de ce conteneur, ajouter le padding au niveau de
  l'endroit qui l'affiche, pas ici.
*/
.nj-related-eyebrow {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg-dim-42);
  font-weight: 500;
  margin: 0 0 36px;
}

.nj-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.nj-related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  transition: opacity 0.18s ease;
}
.nj-related-card:hover, .nj-related-card:focus-visible { opacity: 0.86; }

.nj-related-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-09);
  background: #0e0f11;
}
.nj-related-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nj-related-theme {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
}

.nj-related-title {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .nj-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .nj-related-grid { grid-template-columns: 1fr; }
}