/* ==========================================================================
   .pm-footer — pied de page
   Figma : composant « Footer », fond #08001E, texte #F7F5F3.
   ========================================================================== */

.pm-footer {
  padding: var(--pm-space-l) var(--pm-gutter);
  background-color: var(--pm-color-ink);
  color: var(--pm-color-surface-muted);
}

/* En mobile : une colonne, dans l'ordre du DOM — logo, magazine,
   informations, réseaux. En desktop, la grille recompose les trois colonnes de
   la maquette, où le logo et les réseaux se retrouvent ensemble à gauche. */
.pm-footer__inner {
  display: grid;
  gap: var(--pm-space-xl);
  max-width: calc(1632px + 2 * var(--pm-gutter));
  margin-inline: auto;
}

/* Le logo du footer est la version monochrome blanche. Plutôt qu'exporter un
   second fichier, on masque le logo existant et on le peint en currentColor :
   le masque ne garde que la silhouette, ses deux couleurs d'origine (bleu et
   encre) disparaissent. Un seul asset à maintenir. */
.pm-footer__logo {
  display: block;
  width: 300px;
  max-width: 100%;
  aspect-ratio: 300 / 70;
  background-color: currentColor;
  -webkit-mask: url("../../img/logo-philomag.svg") left center / contain
    no-repeat;
  mask: url("../../img/logo-philomag.svg") left center / contain no-repeat;
}

/* Chaque groupe du footer est coiffé d'un titre souligné d'un filet clair. */
.pm-footer__heading {
  margin: 0;
  padding-block: var(--pm-space-xs);
  box-shadow: inset 0 calc(var(--pm-border-width) * -1) 0
    var(--pm-color-surface-muted);
}

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

/* Deux colonnes, en multi-colonnes CSS plutôt qu'en grille : le flux se fait
   naturellement de haut en bas puis colonne suivante, donc l'ordre du DOM est
   l'ordre de lecture. Une grille aurait imposé d'entrelacer les entrées dans
   le markup pour obtenir le même visuel — intenable dès que Drupal produira
   ce menu, dont le nombre d'entrées varie. */
.pm-footer__links {
  columns: 2;
  column-gap: var(--pm-space-xs);
}

.pm-footer__links li {
  break-inside: avoid;
  margin-bottom: var(--pm-space-xs);
}

.pm-footer__link:hover {
  text-decoration: underline;
}

.pm-footer__issue {
  display: flex;
  gap: var(--pm-space-l);
  align-items: center;
}

.pm-footer__cover {
  flex: 0 0 auto;
  width: 135px;
  aspect-ratio: 135 / 182;
  object-fit: cover;
}

.pm-footer__issue-meta {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--pm-space-xs);
  min-width: 0;
}

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

  .pm-footer__inner {
    flex-direction: row;
    gap: var(--pm-space-xl);
  }

  /* Proportions de la maquette : 372 / 511 / 653 sur 1632. En `fr` plutôt
     qu'en px figés — sinon la colonne « Informations » devient trop étroite
     vers 1440 et ses liens se coupent sur trois lignes.

     Le placement explicite est ce qui permet au DOM de rester dans l'ordre
     mobile : logo et réseaux se retrouvent empilés dans la colonne 1, alors
     que deux blocs les séparent dans le markup. */
  .pm-footer__inner {
    grid-template-columns: 372fr 511fr 653fr;
    align-items: start;
  }

  .pm-footer__logo {
    grid-column: 1;
    grid-row: 1;
  }

  .pm-footer__group--social {
    grid-column: 1;
    grid-row: 2;
  }

  .pm-footer__group--info {
    grid-column: 2;
    grid-row: 1 / 3;
  }

  .pm-footer__group--issue {
    grid-column: 3;
    grid-row: 1 / 3;
  }
}