/* ==========================================================================
   .pm-card — carte de la colonne « Notre sélection »
   Figma : frames « 01 », « 02 », « 4 » de Col Gauche.
   ========================================================================== */

.pm-card {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-2xs);
  /* La carte ne décide pas de l'espace qui la sépare de sa voisine : c'est la
     grille qui l'entoure. Marge remise à zéro parce que l'ancien design en
     posait une sur `.node--view-mode-teaser`, et que la carte sert maintenant
     ce view mode : sans cela, la même carte n'aurait pas le même encombrement
     dans une vue et en pied d'article.
     @see scss/components/node.scss */
  margin: 0;
  /* Filet de séparation entre cartes, en `border-bottom` avec 1px repris sur
     le padding : dans la maquette le filet est À L'INTÉRIEUR des 24px de marge
     basse, pas en plus. Sans cette reprise, chaque carte gagnerait 1px. */
  padding-bottom: calc(var(--pm-space-l) - var(--pm-border-width));
  border-bottom: var(--pm-border);
}

/* La dernière carte de la colonne n'a pas de filet dans la maquette. */
.pm-card--last {
  padding-bottom: 0;
  border-bottom: 0;
}

.pm-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 188;
  object-fit: cover;
}

.pm-card__title {
  margin: 0;
}

/* Survol : soulignement du titre ET voile bleu sur l'image (voir tint.css).
   La maquette dessine les deux ensemble sur le même bloc, ce sont donc deux
   moitiés d'un seul état, déclenchées par un seul geste — d'où le survol porté
   par le bloc entier et non par le lien seul.

   Conséquence assumée : survoler le chapô souligne aussi le titre. C'est le
   comportement usuel d'une carte, et c'est ce que montre la maquette, qui met
   le bloc entier dans l'état sans distinguer ses parties. */
.pm-card:hover .pm-card__title a,
.pm-card:focus-within .pm-card__title a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pm-card__byline {
  color: var(--pm-color-ink);
}

.pm-card__eyebrow {
  color: var(--pm-color-blue);
}