/*
  NJ — Recent Projects
  Design auto-contenu (même raisonnement que les autres plugins nj-* : le
  HTML rendu par ce shortcode est invisible au compilateur de CSS des
  Global Classes Elementor). Reproduit fidèlement `.projects-grid` /
  `.project-card` de index.html (section Réalisations).
*/

/*
  Le widget Shortcode d'Elementor n'est qu'UN SEUL enfant de `realisations-grid`
  (Global Class côté page : display:grid;grid-template-columns:repeat(3,1fr)) —
  sans cette règle, ce widget unique n'occupe que la 1ère des 3 pistes de la
  grille parente (~1/3 de la largeur), et notre propre grille interne se
  retrouve écrasée dans cet espace au lieu d'utiliser toute la largeur de la
  section. `.nj-recent-projects-widget` est la classe posée sur le wrapper
  `.elementor-element` du widget via son contrôle `_css_classes`.
*/
.nj-recent-projects-widget {
  grid-column: 1 / -1;
}

.nj-recent-projects-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.nj-recent-project-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.nj-recent-project-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line-09);
  background: var(--panel-02);
}

/*
  Sélecteur `.nj-recent-project-card .nj-recent-project-media img` (au lieu de
  `.nj-recent-project-media img`) : Elementor charge sa propre règle globale
  `.elementor img { height: auto }` (frontend.min.css) à spécificité égale
  (0,1,1) — sur une égalité de spécificité, l'ordre de chargement décide, et
  Elementor gagnait, écrasant notre `height: 100%` et cassant le crop
  `object-fit: cover` (l'image gardait son ratio naturel au lieu de remplir
  `.nj-recent-project-media`, ratio 4/5). Ajouter `.nj-recent-project-card`
  porte la spécificité à (0,2,1), qui l'emporte quel que soit l'ordre.
*/
.nj-recent-project-card .nj-recent-project-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nj-recent-project-card:hover .nj-recent-project-media img,
.nj-recent-project-card:focus-visible .nj-recent-project-media img {
  transform: scale(1.045);
}

.nj-recent-project-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.nj-recent-project-name {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.nj-recent-project-sector {
  font-family: var(--font);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
  white-space: nowrap;
}

.nj-recent-project-metric {
  margin-top: 8px;
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--fg-dim-52);
  font-weight: 300;
}

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