/* ==========================================================================
   .pm-related — « Sur le même sujet », en pied d'article
   Figma : « Frame 5541 » (2399:3783), 1728×540, marges intérieures de 48

   Six cartes de 232 écartées de 48 : 6×232 + 5×48 = 1632, la largeur utile
   exacte. Les cartes elles-mêmes sont celles de la home — vignette, surtitre,
   titre, pastille abonnés, signature — d'où la réutilisation de .pm-card et
   l'absence de tout style de carte ici.
   ========================================================================== */

.pm-related {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
  padding-block: var(--pm-space-l);
}

@media (min-width: 1024px) {
  .pm-related {
    gap: var(--pm-space-xl);
    padding-block: var(--pm-space-xl);
  }
}

/* Le titre et le bouton « En voir plus » se font face. En mobile la maquette
   les empile, le bouton passant sous le titre. */
.pm-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--pm-space-l);
}

.pm-related__grille {
  display: grid;

  /* Comme le catalogue des newsletters, le nombre de colonnes se déduit d'une
     largeur plancher plutôt que d'être déclaré : à 1728 la grille retrouve les
     six colonnes de 232 de la maquette, et se réorganise seule en dessous.

     Les 232px sont la largeur de carte de la maquette elle-même, ce qui rend
     ce plancher plus sûr que celui des newsletters — il est relevé, pas
     inféré. */
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--pm-space-xl);
  align-items: start;
}

/* Pas de filet sous les cartes de ce bloc. Elles réutilisent .pm-card, dont le
   filet vient de la colonne latérale de la home — mais la maquette ne le donne
   qu'à celles-là : les cartes de « Sur le même sujet » déclarent bien un poids
   de bordure basse de 1px, avec `strokes: []`, donc aucune peinture. Un trait
   annoncé mais jamais dessiné.

   Les 24px de marge basse, eux, restent : ils sont dans la maquette. */
.pm-related__grille .pm-card {
  padding-bottom: 0;
  border-bottom: 0;
}