/* ==========================================================================
   .pm-nl-grid / .pm-nl-card — le catalogue des newsletters
   Figma : « Page newsletter » / Frame 139 (desktop 2198:5742, mobile 2198:5745)

   Huit cartes identiques en structure : une vignette de 92×92 à gauche, le
   nom et la périodicité à droite, puis une description et un bouton pleine
   largeur. Le composant Figma décline la vignette de deux façons — un aplat
   coloré portant le « p » de Philosophie magazine, ou une image de couverture,
   auquel cas le « p » est masqué (`visible: false` dans le fichier). D'où deux
   variantes de vignette plutôt qu'un empilement conditionnel.
   ========================================================================== */

.pm-nl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--pm-space-xl);

  /* Les cartes n'ont pas toutes la même hauteur dans la maquette : 279px quand
     le nom tient sur une ligne, 291px quand il passe à deux. Elles épousent
     leur contenu et s'alignent par le haut, les bas restant irréguliers.
     `start` reproduit cela ; sans lui, la grille les étirerait toutes à la
     hauteur de la plus grande et décollerait les boutons de leur description. */
  align-items: start;
}

/* Le nombre de colonnes n'est pas déclaré : la grille le déduit d'une largeur
   de carte minimale. À 1728 cela redonne exactement la maquette — 1632 de
   contenu, 48 de gouttière entre les cartes, soit (1632 - 3×48) / 4 = 372 —
   et la grille se réorganise seule en 3, 2 puis 1 colonne en descendant, sans
   qu'aucun palier n'ait à être inventé.

   C'est ce qui remplace des seuils écrits à la main, dont le premier jet était
   faux : à 640px, deux colonnes donnaient des cartes de 278px, plus étroites
   que les 354px de la colonne unique à 390px. La mise en page se dégradait en
   agrandissant la fenêtre.

   Les 300px sont la largeur en dessous de laquelle la vignette et son écart
   (92 + 48) mangent la moitié de la carte. La maquette ne fournit aucun cadre
   entre 390 et 1728 : ce plancher est une inférence, pas une valeur relevée.
   ------------------------------------------------------------------------- */

/* --- Gabarit de la page --------------------------------------------------
   Mobile : le cadre « Frame 73 » est en auto-layout — 48px de marge haute et
   basse, 72px entre le chapeau et la grille. Ces trois valeurs sont fiables.

   Desktop : le cadre est en positionnement libre, les blocs y sont posés à la
   main. Les 76px sous le bandeau et les 117px au-dessus du pied de page sont
   donc mesurés, pas déclarés — à confirmer avec la designer si un écart se
   voit. Les 96px entre le chapeau et la grille, eux, viennent bien d'un
   auto-layout imbriqué.
   ------------------------------------------------------------------------- */

.pm-nl-page {
  display: flex;
  flex-direction: column;
  gap: 72px;
}

@media (min-width: 1024px) {
  .pm-nl-page {
    gap: 96px;
    padding-top: 76px;
    padding-bottom: 117px;
  }
}

/* --- La carte ------------------------------------------------------------ */

.pm-nl-card {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

.pm-nl-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--pm-space-xl);
}

.pm-nl-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);

  /* La colonne de texte absorbe la largeur restante. `min-width: 0` est ce qui
     l'autorise à rétrécir sous la largeur de son plus long mot : sans lui, un
     titre comme « La Semaine de Philosophie magazine » imposerait sa taille
     minimale à la carte et déborderait la colonne de grille. */
  min-width: 0;
}

/* --- La vignette ---------------------------------------------------------- */

.pm-nl-card__thumb {
  display: grid;
  place-items: center;

  /* 92×92 fixes : `flex: 0 0 auto` empêche le flex de la comprimer quand la
     colonne se resserre — c'est le texte qui cède, jamais la vignette. */
  flex: 0 0 auto;
  width: 92px;
  height: 92px;
  overflow: hidden;
}

.pm-nl-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Le « p » est un masque peint en `currentColor`, comme les icônes du projet
   (voir base.css) : la maquette le décline en blanc, en encre et en bleu selon
   le fond, et une seule ressource suffit à couvrir les trois. Il n'est pas
   carré — 32×53 — donc il ne peut pas passer par .pm-icon. */
.pm-nl-card__mark {
  width: 32px;
  height: 53px;
  background-color: currentColor;
  -webkit-mask: url("../../icons/logo-mark.svg") center / contain no-repeat;
  mask: url("../../icons/logo-mark.svg") center / contain no-repeat;
}

/* Les cinq aplats de la maquette. La couleur du « p » vient de `color`, ce qui
   évite une règle par combinaison fond × marque. */
.pm-nl-card__thumb--blue {
  background-color: var(--pm-color-blue);
  color: var(--pm-color-on-dark);
}

.pm-nl-card__thumb--yellow {
  background-color: var(--pm-color-yellow);
  color: var(--pm-color-ink);
}

.pm-nl-card__thumb--sand {
  background-color: var(--pm-color-sand);
  color: var(--pm-color-blue);
}

.pm-nl-card__thumb--ink {
  background-color: var(--pm-color-ink);
  color: var(--pm-color-on-dark);
}

.pm-nl-card__thumb--white {
  background-color: var(--pm-color-surface);
  color: var(--pm-color-blue);
}

/* --- Textes de la carte --------------------------------------------------- */

.pm-nl-card__cadence,
.pm-nl-card__desc {
  color: var(--pm-color-ink);
}

/* « Voir la newsletter » est souligné en permanence : les huit cartes portent
   la même plage `styleOverrideTable` en UNDERLINE, sans exception. Ce n'est
   donc pas un état de survol dessiné sur une carte — ce motif-là existe
   ailleurs dans le fichier — mais bien le repos.

   Le survol n'est défini nulle part pour ce lien. Le seul survol de lien que le
   fichier documente ajoute la graisse et le soulignement ; celui-ci étant déjà
   souligné, il ne reste que la graisse. */
.pm-nl-card__link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pm-nl-card__link:hover {
  font-weight: 700;
}

/* Le bouton d'inscription occupe toute la largeur de la carte aux deux
   breakpoints — 372px en desktop, 354px en mobile, soit la carte entière. */
.pm-nl-card__cta {
  width: 100%;
}