/* .schedule {
  border-bottom: 1px solid var(--base0);
} */

.scheduleList {
  display: flex;
  flex-direction: column;
  /* gap: 48px; */
  /* border-top: 1px solid var(--base0);
  border-left: 1px solid var(--base0); */
}

.scheduleList li {
  border-bottom: 1px solid var(--base0);
  padding-bottom: var(--med-margin);
}

.scheduleList li + li {
  padding-top: var(--med-margin);
}

.scheduleList li > a {
  display: flex;
  flex-wrap: wrap;
  border-bottom-width: 0;
}

.scheduleList li > a:hover {
  background-color: var(--base100);
}

.scheduleList li > a figure {
  flex-basis: 100%;
  flex-shrink: 0;
  aspect-ratio: 16/10;
  transition: border-color 0.2s ease;
}

.scheduleList li > a figure img {
  height: 100%;
  object-fit: cover;
}

.scheduleList li > a.evenement figure {
  border-color: var(--orange);
}

.scheduleList li > a.creason figure {
  border-color: var(--red);
}

.scheduleList li > a.formason figure {
  border-color: var(--blue);
}

.scheduleList li > a.les-seances-d-ecoute figure {
  border-color: var(--yellow);
}

.scheduleList li > a.atelier figure {
  border-color: var(--green);
}

.scheduleList li > a:hover figure {
  border-color: var(--base100);
}

.scheduleList li > a .date {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 14px 12px;
}

.scheduleList li > a .date p {
  display: inline-block;
  font-size: var(--tiny-font-size);
  text-transform: uppercase;
}

.scheduleList li > a .date p + p {
  margin-top: 0;
}

.scheduleList li > a .infos {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 14px 12px 18px;
  transition: background-color 0.2s ease;
}

.scheduleList li > a .infos h1 {
  font-size: var(--small-font-size);
  margin-bottom: 6px;
}

.scheduleList li > a .infos p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  font-size: var(--tiny-font-size);
}

.scheduleList li > a .infos p.exerg {
  display: inline-block;
  border-bottom: 0.1em solid currentColor;
  transition: letter-spacing 0.5s ease;
}

.scheduleList li > a:hover .infos p.exerg {
  letter-spacing: 0.1em;
  border-color: var(--red);
}

.pastEvents {
  margin-top: var(--med-margin);
}

.lastEvent {
  position: relative;
  width: 100%;
  border-bottom-width: 0;
  margin: 0 0 var(--med-margin);
}

.lastEvent .date {
  font-size: var(--tiny-font-size);
  font-weight: 500;
}

.lastEvent h1 {
  background-color: var(--base100);
  padding: var(--small-margin);
  margin-bottom: 0!important;
  transition: background-color 0.2s ease, letter-spacing 0.5s ease;
}

.lastEvent:hover h1 {
  background-color: var(--red);
  letter-spacing: 0.15em;
}

.lastEvent figure.gradient-bg {
    height: 70vh;
    aspect-ratio: 16 / 10;
    width: 100%;
}

.lastEvent figure > img {
  aspect-ratio: 16/10;
  object-fit: cover;
}

@media screen and (min-width: 580px) {
  .scheduleList li > a .infos {
    flex-basis: 0;
  }
}

@media screen and (min-width: 1024px) {
  .scheduleList li > a .date {
    flex-basis: 10em;
    flex-grow: 0;
    word-break: break-word;
    hyphens: auto;
    text-align: center;
    padding: 14px 18px 18px;
  }

  .scheduleList li > a .date p {
    display: block;
  }

  .scheduleList li > a .date p + p {
    margin-top: 1em;
  }

  .scheduleList li > a .date p span {
    display: block;
    font-size: var(--base-font-size);
    margin-top: -0.1em;
  }
  .scheduleList li > a figure {
    flex-basis: 40%;
  }

  .scheduleList li > a .infos {
    padding: 14px 18px 18px;
  }

  .lastEvent h1 {
    position: absolute;
    left: 12px;
    bottom: 12px;
    right: 12px;
  }
}