/*
Theme Name: royal-elementor-kit-child
Description: Thème enfant pour le Royal Elementor Kit
Author: NEX
Template: royal-elementor-kit
Version: 1.0
*/

.social-media-buttons a {
  display: inline-block;
  width: 28px !important; /* ajustez la taille des images */
  height: 28px !important;
}

.post-media {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px;
}

.eael-grid-post .eael-entry-overlay > i {
  color: #ffffff;
  font-size: 30px;
  font-family: "Roboto Flex" !important;
}

.ms-theme-cubic,
.metaslider.ms-theme-cubic.ms-is-small {
  padding-bottom: 0 !important;
}

.ue_inner_menu {
  transform: scale(1.5) !important;
}

@media screen and (max-width: 767px) {
  .post-media {
    text-align: center;
    width: auto;
  }
  .post-media img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
  }
  .metaslider .slides img {
    aspect-ratio: 800 / 500 !important;
  }
}

@media screen and (min-width: 768px) {
  .post-media {
    width: 760px;
  }
  .elementor-element-804eecb,
  .elementor-element-804eecb > div,
  .elementor-element.elementor-element-594c72c,
  #metaslider-id-943,
  #metaslider_container_943,
  #metaslider_943,
  .metaslider .flexslider,
  .metaslider .slides,
  .metaslider .slides li,
  .metaslider .slides img {
    height: 500px !important;
  }
}

/**** STYLE  CUSTOM POSTS GRID ****/
/* Structure de base du grid */
.custom-post-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px;
}

/* Bordure en bas pour chaque type de contenu */
.custom-post-grid .grid-item.restaurants_bars,
.custom-post-grid .grid-item.commerces,
.custom-post-grid .grid-item.famille,
.custom-post-grid .grid-item.formation-emploi,
.custom-post-grid .grid-item.weekend,
.custom-post-grid .grid-item.agenda {
  border-width: 0px 0px 4px 0px !important;
}
/* Couleurs spécifiques pour chaque type de contenu */
.custom-post-grid .grid-item.restaurants_bars {
  border: 1px solid #af60a0; /* Violet pour Restaurants & Bars */
}

.custom-post-grid .grid-item.commerces {
  border: 1px solid #a78564; /* Marron pour Commerces */
}

.custom-post-grid .grid-item.famille {
  border: 1px solid #f7941d; /* Orange pour Famille */
}

.custom-post-grid .grid-item.formation-emploi {
  border: 1px solid #007c9d; /* Bleu pour Formation & Emploi */
}

.custom-post-grid .grid-item.weekend {
  border: 1px solid #e66325; /* Couleur pour Week-end */
}

.custom-post-grid .grid-item.agenda {
  border: 1px solid #68a944; /* Couleur pour agenda */
}

.custom-post-grid .eael-entry-title a {
  font-weight: bold;
  color: #000;
  font-size: 20px;
}

.custom-post-grid .eael-grid-post-excerpt {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.custom-post-grid .social-media-buttons {
  position: relative;
  bottom: auto;
  right: auto;
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 10px;
}

.custom-post-grid .post-thumbnail img {
  width: 100%;
  height: auto;
}

/* Styles spécifiques pour les titres au survol */
.custom-post-grid .restaurants_bars .eael-entry-title a:hover {
  color: #af60a0 !important;
}

.custom-post-grid .commerces .eael-entry-title a:hover {
  color: #a78564 !important;
}

.custom-post-grid .famille .eael-entry-title a:hover {
  color: #f7941d !important;
}

.custom-post-grid .formation-emploi .eael-entry-title a:hover {
  color: #007c9d !important;
}

.custom-post-grid .weekend .eael-entry-title a:hover {
  color: #e66325 !important;
}

.custom-post-grid .agenda .eael-entry-title a:hover {
  color: #68a944 !important;
}

.custom-post-grid {
  display: grid;
  gap: 40px;
  margin: 0;
}

.custom-post-grid .grid-item {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid #ddd;
  margin: 0;
  position: relative;
  padding-bottom: 2px;
}

.custom-post-grid .post-thumbnail img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.custom-post-grid .eael-entry-title {
  font-size: 1.2em;
  text-align: center;
  margin: 10px 0 5px 0 !important;
}

.custom-post-grid .eael-grid-post-excerpt {
  flex-grow: 1;
}

.custom-post-grid .social-media-buttons {
  margin-top: auto;
}

/* Couleurs spécifiques pour chaque type de contenu */
.custom-post-grid .grid-item.restaurants_bars {
  border-color: #af60a0 !important;
  background-color: rgba(221, 221, 223, 0.3);
}

.custom-post-grid .grid-item.commerces {
  border-color: #a78564 !important;
  background-color: rgba(221, 221, 223, 0.3);
}

.custom-post-grid .grid-item.famille {
  border-color: #f7941d !important;
  background-color: rgba(221, 221, 223, 0.3);
}

.custom-post-grid .grid-item.formation-emploi {
  border-color: #007c9d !important;
  background-color: rgba(221, 221, 223, 0.3);
}

.custom-post-grid .grid-item.weekend {
  border-color: #e66325 !important;
  background-color: rgba(221, 221, 223, 0.3);
}

.custom-post-grid .grid-item.agenda {
  border-color: #68a944 !important;
  background-color: rgba(221, 221, 223, 0.3);
}
/* Le style pour le hover rajouté sur les images */
.post-thumbnail {
  position: relative;
}

.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.hover-overlay .info-text {
  color: white !important;
  font-size: 30px !important;
}

.post-thumbnail:hover .hover-overlay {
  opacity: 1 !important;
}

@media (min-width: 1025px) {
  .custom-post-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .custom-post-grid .grid-item {
    grid-column: span 1;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .custom-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-post-grid .grid-item {
    grid-column: span 1;
  }

  .custom-post-grid .grid-item:nth-child(odd)::after {
    display: block;
    right: -10px;
    transform: translateX(50%);
  }

  .custom-post-grid .grid-item:last-child::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .custom-post-grid {
    grid-template-columns: 1fr;
  }
}
/**** END STYLE  CUSTOM POSTS GRID ****/