@import url("../../assets/design-systeme.css");

/*
  inspiration de la timeline par Jonas Hietala
  https://www.jonashietala.se/blog/2024/08/25/a_simple_timeline_using_css_flexbox/
*/
.timeline {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--unit) * 3);

  .description {
    display: flex;
    flex-direction: column;

    h3 {
      font-family: "InterDisplay";
      margin-top: 0;
      margin-bottom: 0;
    }

    p {
      margin: 0;
    }
  }
}

article {
  margin-bottom: calc(var(--unit) * 4);
}

.cv {
  font-family: "InterDisplay";
  font-size: 2em;
  font-weight: 700;
}

.recommandation {
  blockquote {
    font-style: italic;
    margin: initial;

    .begin-quote {
      float: inline-start;
      position: relative;
      overflow: visible;
      min-width: 5em;
      max-width: 5em;
      min-height: 2em;
      max-height: 2em;

      p {
        font-size: 5em;
        position: absolute;
        top: -1.7em;
        left: 0.3em;
      }
    }
  }

  .auteurice {
    margin-left: 65%;

    &::before {
      content: "-- ";
    }
  }
}

@media screen and (max-width: 991px) {
  .marker { display: none; }

  .recommandation {
    .auteurice {
      margin-left: 50%;
    }
  }
}

@media screen and (min-width: 992px) {
  .timeline {
    position: relative;
    margin: 0 auto;
    gap: calc(var(--unit) * 2);

    &::before {
      content: "";
      width: 1px;
      position: absolute;
      top: 0;
      height: 100%;
      left: 50%;
      background: black;
    }

    div {
      display: flex;
      align-items: baseline;

      .marker {
        flex: none;
        position: relative;
        order: 1;
        left: -6px;
      }

      article {
        width: 50%;
        text-align: right;
        margin-bottom: 0;
      }

      &:nth-child(even) {
        flex-direction: row-reverse;

        article { padding-left: 16px; }

        &>* { text-align: left; }

        .marker { left: 6px; }
      }

      &:nth-child(odd) {
        article { padding-right: 16px; }
      }
    }
  }
}