/**
 * ###############  Events cards  ##################
 */

 .next-events-group,
 .next-event-ailleurs {
    margin-bottom: 50px;
 }

 .next-event {
  /* max-width: 380px; */
  margin: 0 auto;
  box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
  border-radius: 20px;
 }

.next-event .event-header {
  height: 82px;

  border-radius: 20px 20px 0 0;
  border-width: 2px;
  border-style: solid;
  margin-bottom: 0;


}
.next-event .event-title {
  color: white;
  font-family: "Montserrat Alternates", serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  font-variant-caps: small-caps;
  line-height: 26px;

  padding: 0 10px;
  margin: 15px 0;

  display: -webkit-box;       /* nécessaire pour le rendu, déprécié mais maintenu */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;               /* version standard, pour les navigateurs qui la supportent déjà */
  max-width: 100%;
  overflow: hidden;
}

.outside-event .event-content {
  border-radius: 0 0 20px 20px;
}

.next-event .event-content {
  padding: 15px;
  position: relative;
  font-size: clamp(14px, 1.2vw, 16px);
  border-width: 2px;
  border-style: solid;
  background-color: white;
}

.next-event .event-label {
  font-weight: 700;
  padding-left: 24px;
  margin-bottom: 10px;
  position: relative;
  display: flow-root;
}

.next-event .event-label::before {
  content: "";
  display : inline-block;
  height : 0;
  width : 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid var(--orange-clair);
  position: absolute;
  /* left: 16px;
  top: 20px; */
  left: 5px;
  top: 6px;
}

.next-event .event-image {
  height: 235px;
}

.next-event .event-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: top;
}

.next-event .event-info {
  padding: 10px 0;
}

.event-info-line {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
  /* flex-wrap: wrap; */
}

.event-info-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.next-event .event-info-text {
  line-height: 24px;
  font-family: "Montserrat Alternates", serif;
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 16px);
  padding-left: 10px;
}

.outside-event .event-info-text {
  display: flex;
  flex-wrap: wrap;
}

.next-event .event-excerpt {
  height: 110px;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

/* .next-event .event-excerpt p::after { */
.next-event .event-excerpt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}

.next-event .event-excerpt p {
  margin-bottom: 0;
}

.event-link-button {
  margin-left: auto;
  margin-right: 0;
  width: 150px;
  height: 45px;
  font-family: "Montserrat Alternates", serif;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: inset 0 0 7px 4px rgba(0,0,0,0.2);
  text-align: center;
  line-height: 45px;
  margin-bottom: 10px;
}

.event-link-button a,
.event-link-button a:visited,
.event-link-button a:hover {
  color: white;
  text-decoration: none;
}

.em-event-add-to-calendar .em-icon-calendar {
  display: none;
}

.next-event-add-to-agenda {
  width: 100%;
  height: 58px;
  position: relative;
  border-radius: 0 0 20px 20px;
  border-width: 2px;
  border-style: solid;
}

.next-event-add-to-calendar-icon {
  position: absolute;
  font-size: 38px;
  font-weight: 700;
  color: white;
  left: 15px;
  pointer-events: none;
  line-height: 56px;
}

.next-event .em-event-add-to-calendar {
  width: 100%;
  font-size: clamp(14px, 1vw, 16px);
}


/* @media (max-width: 768px) { */
@media (max-width: 526px) {

  .next-event .event-content {
    display: flex;
    flex-direction: column;
  }
  .next-event .event-image {
    height: 180px;
    order: 1;
  }
  .next-event .event-label {
    order: 0;
  }
  .next-event .event-info {
    order: 2;
  }
  .next-event .event-excerpt {
    order: 3;
  }
  .next-event .event-link-button {
    order: 4;
  }


}

 @media (max-width: 1190px) {

  /* .next-event .event-image {
    height: 180px;
  } */

  .hydre-event .event-info {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 40px;
  }

  /* .next-event .event-excerpt {
    height: 50px;
  }

  .next-event .event-excerpt p::after {
    height: 50px;
  } */

 }

 /* PROCHAIN EVENMT AILLEURS HORIZONTAL A PARTIR DE 527PX */

 @media (min-width: 527px) {

   .next-event.outside-event {
    container-type: inline-size;
  }

  .next-event.outside-event .event-image {
    width: 45%;
    height: 290px;
    margin-right: 20px;
    float: left;
  }

  /* .next-event.outside-event .event-label {
    margin-bottom: 0;
  } */
 }




/* @media (min-width: 769px) and (max-width: 1190px) { */
@media (min-width: 527px) and (max-width: 1190px) {

  /* next-event card is horizontal */

  .next-events-group {
    flex-direction: column;
  }

  .next-event-column {
    width: 100%;
  }

  .next-event .event-content {
    container-type: inline-size;
  }

  .next-event .event-image {
    width: 45%;
    height: 290px;
    margin-right: 20px;
    float: left;
  }

  .next-event .event-label {
    margin-bottom: 0;
  }

  .event-link-button {
    margin-bottom: 0;
  }


}

@media (min-width: 1191px) {
  /* next-event card is vertical */

  .next-events-group {
    justify-content: flex-start;
    /* max-width: 1245px; */
  }

  .hydre-event {
    max-width: 380px;
  }

  .outside-event {
    /* max-width: 1245px; */
    margin: 0 auto 0 0;
  }

  .hydre-event .event-content {
    display: flex;
    flex-direction: column;
  }

  .hydre-event .event-image {
    order: 1;
  }
  .hydre-event .event-label {
    order: 0;
  }
  .hydre-event .event-info {
    order: 2;
  }
  .hydre-event .event-excerpt {
    order: 3;
  }
  .hydre-event .event-link-button {
    order: 4;
  }
}

/* eventcard des prochains évènements ailleurs sur la page événements ailleurs */
.evenement-ailleurs-item .next-event .event-excerpt p::after,
.evenement-ailleurs-item .next-event .event-excerpt {
  height: auto;
}

.evenement-ailleurs-item .next-event.outside-event .event-image {
  height: auto;
}

.evenement-ailleurs-item .event-link-button {
  display: none;
}

.evenement-ailleurs-item .event-content {
  overflow: hidden;
}





/* colors */

/* vert activités regulières + prochain évènement ailleurs */

.next-event-reg .event-header,
.next-event-reg .next-event-add-to-agenda,
.next-event-reg .event-link-button:hover,
.next-event-ailleurs .event-header,
.next-event-ailleurs .next-event-add-to-agenda,
.next-event-ailleurs .event-link-button:hover {
  background-color: var(--vert-fonce);
}

.next-event-reg .event-header,
.next-event-reg .event-content,
.next-event-reg .next-event-add-to-agenda,
.next-event-ailleurs .event-header,
.next-event-ailleurs .event-content,
.next-event-ailleurs .next-event-add-to-agenda {
  border-color: var(--vert-fonce);
}

.next-event-reg .event-label,
.next-event-reg .event-info,
.next-event-ailleurs .event-info {
  color: var(--vert-fonce);
}

.next-event-reg .event-link-button,
.next-event-ailleurs .event-link-button {
  background-color: var(--vert-clair);
}

.next-event-reg .event-info-icon svg,
.next-event-ailleurs .event-info-icon svg {
  fill: var(--vert-fonce);
}

/* orange activités ponctuelles */

.next-event-ponc .event-header,
.next-event-ponc .next-event-add-to-agenda,
.next-event-ponc .event-link-button:hover {
  background-color: var(--orange-fonce);
}

.next-event-ponc .event-header,
.next-event-ponc .next-event-add-to-agenda,
.next-event-ponc .event-content {
  border-color: var(--orange-fonce);
}

.next-event-ponc .event-label,
.next-event-ponc .event-info {
  color: var(--orange-fonce);
}

.next-event-ponc .event-info-icon svg {
  fill: var(--orange-fonce);
}

.next-event-ponc .event-link-button {
  background-color: var(--orange-clair);
}

/* bleu rdv adhérents */

.next-event-rdv-adh .event-header,
.next-event-rdv-adh .next-event-add-to-agenda,
.next-event-rdv-adh .event-link-button:hover {
  background-color: var(--bleu-fonce);
}

.next-event-rdv-adh .event-header,
.next-event-rdv-adh .event-content,
.next-event-rdv-adh .next-event-add-to-agenda {
  border-color: var(--bleu-fonce);
}

.next-event-rdv-adh .event-label,
.next-event-rdv-adh .event-info {
  color: var(--bleu-fonce);
}

.next-event-rdv-adh .event-info-icon svg {
  fill: var(--bleu-fonce);
}

.next-event-rdv-adh .event-link-button {
  background-color: var(--bleu-clair);
}