// Le titre "Ressources" est rendu par chaque node (dans .page-header-outside,
// frère de .ressources). On masque par défaut, et on n'affiche que sur la
// 1re ressource via .views-row:first-of-type ci-dessous.
.views-row .page-header-outside {
  display: none;
}

// Pas d'espace entre les .views-row sur la page Ressources : on veut donner
// l'illusion d'une colonne blanche unique. On annule margin-bottom de la
// .views-row, et padding-top/bottom de chaque carte .ressources.
.views-row:has(> .ressources) {
  margin-bottom: 0 !important;
}
// Border-bottom brand color uniquement sur la dernière ressource (les
// .fullpage intermédiaires l'ont par défaut, cf. _fullpage.scss).
.views-row:not(:last-of-type) > .ressources {
  border-bottom: none !important;
}

.ressources {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  > div {
    padding: 0 $x_margin;
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-auto-rows: auto;
    > div > div:first-of-type {
      display: none;
    }
    > h2 {
      grid-column: 2;
      grid-row: 1;
      margin: 0 !important;
      padding: 0 !important;
      justify-self: start;
      align-self: end;
      > a {
        display: block;
        pointer-events: none;
        > span {
          display: block;
          @include sous_titre_alt();
        }
      }
    }
    // lien
    > div:has(a) {
      grid-column: 2;
      grid-row: 3;
      > div > span {
        margin-top: -1rem;
        @include fluo_button();
        // Carte sur fond blanc : on contraste le CTA en gris pâle.
        a { background-color: $page_bg; }
      }
      > div > span:last-of-type {
        display: none;
      }
    }
    // image
    > div:has(img) {
      grid-column: 1;
      grid-row: 1/4;
      min-width: 120px;
      padding: 2rem 0;
      margin-right: 2rem;
      img {
        border: solid 1px $teal;
        width: 100%;
        height: auto;
      }
    }
    // date
    > div:has(time) {
      grid-column: 2;
      grid-row: 2;
      margin-top: -1rem;
      align-self: center;
      display: block;
      padding-bottom: 0.5rem;
      @include main_text_content();
    }
  }
}

// Scope strict à la page /ressources (article.ressources frère du
// .page-header-outside dans la 1re views-row). On ne touche pas aux autres
// pages où un .page-header-outside peut aussi être dans une .views-row
// (ex. /taxonomy/term/N avec .taxonomy_header).
.views-row:first-of-type:has(> article.ressources) {
  > .page-header-outside {
    display: block;
    // La page /ressources utilise un layout hacky qui pousse <main> à ~255px
    // sous le header (cause non identifiée, conçu ainsi par le précédent dev).
    // On compense avec un margin-top négatif pour rapprocher visuellement le
    // titre du header, comme sur les autres pages d'index.
    margin-top: calc(-200px + 3rem) !important;
    @media (min-width: $breakpoint_desktop) {
      margin-top: calc(-200px + 3rem) !important;
    }
  }
}

.ressource {
  .retour_ressources {
    padding-top: 3vh;
    padding-left: $x_margin;
    @include main_text_content();
    a {
      font-size: $fs_xs;
      font-weight: 800;
      color: $teal;
    }
  }
  > div:not(.retour_ressources) {
    margin: $x_margin;
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    grid-auto-rows: auto;
    > div > div:first-of-type {
      display: none;
    }
    > h2 {
      grid-column: 2;
      grid-row: 1;
      margin: 0 !important;
      padding: 0 !important;
      justify-self: start;
      > span {
        //margin-top: -1rem !important;
        display: block;
        @include sous_titre_alt();
      }
    }
    > div:not(.retour_ressources):first-of-type {
      grid-column: 2;
      grid-row: 3;
      > div > span {
        margin-top: -1rem;
        @include fluo_button();
      }
      > div > span:last-of-type {
        display: none;
      }
    }
    > div:nth-of-type(2) {
      grid-column: 1;
      grid-row: 1/4;
      padding: 2rem 0;
      margin-right: 2rem;
      img {
        width: 100%;
        height: auto;
      }
    }
    > div:nth-of-type(3) {
      grid-column: 2;
      grid-row: 2;
      margin-top: -1rem;
      @include main_text_content();
    }
  }
}