/*
  Hover de cards avec animation d'apparition de bas en haut
*/

@media (min-width: 1024px) {
  .hover-appear .swiper-slide > .e-con-full.e-flex.e-con.e-child > .e-con-full.e-flex.e-con.e-child {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition-property: opacity, visibility, transform !important;
    transition-duration: 0.3s !important;
    transition-delay: 0s !important;
    transition-timing-function: ease !important;
  }
  .hover-appear .swiper-slide:hover > .e-con-full.e-flex.e-con.e-child > .e-con-full.e-flex.e-con.e-child {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}


/*
  Changement de couleurs pour la grande card de la grille de boucle & hover avec image de la médiathèque WP
*/

.post_magazine_grid .ue-grid-item:first-child {
  position: relative;
  .ue-grid-item-content {
    position: relative;
    z-index: 1;
    background-color: var(--e-global-color-secondary) !important;

    .ue-grid-item-title {
      border-color: var(--e-global-color-0094bf0) !important;
    }
    .uc_more_btn {
      background-color: var(--e-global-color-0094bf0) !important;
      color: var(--e-global-color-secondary) !important;
    }
    a {
      color: var(--e-global-color-0094bf0) !important;
    }
  }

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://reflexe-voyages.preprod-galopins.fr/wp-content/uploads/2026/05/hover_explorez_voyages.png");
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 2;
    transition-property: opacity !important;
    transition-duration: 0.3s !important;
    height: 75%;
  }

  @media (max-width: 1300px) {
    &::before {
      height: 70%;
      background-position: center top;
    }
  }

  @media (max-width: 1024px) {
    &::before {
      height: 65%;
      background-position: center top;
    }
  }

  &:hover::before {
    opacity: 1;
  }
}

.gl-escapades-container .uc-items-wrapper .ue-grid-item:nth-of-type(2) {

  a .elementor-element {
    background-color: var(--e-global-color-text) !important;
    border-color: var(--e-global-color-255c9e2) !important;
  }

  a.elementor-element > div:nth-of-type(1)::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("https://reflexe-voyages.preprod-galopins.fr/wp-content/uploads/2026/06/mask_loop_escapades.png");
    background-size: cover;
    background-position: center;
    z-index: 2;
    height: 100%;
  }

  h3, p, span {
    color: var(--e-global-color-255c9e2) !important;
  }
}