/*
 Theme Name: OceanWP Child Theme
 Theme URI: https://oceanwp.org/
 Description: OceanWP child theme with clean WP Event Manager slider.
 Author: Huss / ChatGPT
 Author URI: https://oceanwp.org/
 Template: oceanwp
 Version: 1.2
*/

/* ===============================
   Structure globale des sliders
   =============================== */
.event-slider-1,
.event-slider-2 {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Wrapper propre centré */
.event-slider-1 .oce-slider-wrapper,
.event-slider-2 .oce-slider-wrapper {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}

/* Wrapper interne : pas de padding, sinon ça coupe les bords */
.event-slider-1 .oce-slider-wrapper-inner,
.event-slider-2 .oce-slider-wrapper-inner {
  padding: 0;
}

/* Le container Swiper occupe toute la largeur du wrapper */
.event-slider-1 .oce-slider-wrapper .swiper,
.event-slider-2 .oce-slider-wrapper .swiper {
  width: 100%;
  overflow: hidden;
}

/* ===============================
   Casser la grille WP Event Manager
   =============================== */
.event-slider-1 .wpem-row,
.event-slider-2 .wpem-row,
.event-slider-1 .wpem-event-listing-box-view,
.event-slider-2 .wpem-event-listing-box-view {
  display: block !important;
  flex-wrap: unset !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Neutraliser les largeurs de colonnes WP Event */
.event-slider-1 .wpem-event-box-col,
.event-slider-2 .wpem-event-box-col {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* ===============================
   Slides (cartes)
   =============================== */
.event-slider-1 .swiper-wrapper,
.event-slider-2 .swiper-wrapper {
  display: flex;
  gap: 0; /* Swiper gère l'espace avec spaceBetween */
}

/* On laisse Swiper gérer la width avec slidesPerView=3 */
.event-slider-1 .swiper-slide,
.event-slider-2 .swiper-slide {
  display: flex;
  flex: 0 0 auto;
  margin-right: 0 !important; /* pas de margin ici, Swiper s'en charge */
}

/* Carte événement */
.event-slider-1 .wpem-event-layout-wrapper,
.event-slider-2 .wpem-event-layout-wrapper {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-slider-1 .wpem-event-layout-wrapper:hover,
.event-slider-2 .wpem-event-layout-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
}

/* Image bannière uniforme */
.event-slider-1 .wpem-event-banner-img,
.event-slider-2 .wpem-event-banner-img {
  height: 240px;
  background-size: cover;
  background-position: center;
}

/* Contenu de la carte */
.event-slider-1 .wpem-event-details,
.event-slider-2 .wpem-event-details {
  padding: 16px;
  background: #ffffff;
}

/* ===============================
   Pagination
   =============================== */
.event-slider-1 .swiper-pagination,
.event-slider-2 .swiper-pagination {
  position: relative;
  margin-top: 15px;
  text-align: center;
}

/* ===============================
   Flèches Swiper
   =============================== */
.event-slider-1 .swiper-button-next,
.event-slider-1 .swiper-button-prev,
.event-slider-2 .swiper-button-next,
.event-slider-2 .swiper-button-prev {
  color: #000;
  width: 40px;
  height: 40px;
}

h2.wpem-heading-text {
    display: none !important;
}

/* Positionner les flèches Swiper à l’extérieur du slider */
.oce-slider-wrapper {
    position: relative;
}

/* Flèche précédente */
.oce-slider-wrapper .swiper-button-prev {
    left: -40px;           /* distance extérieure */
    right: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Flèche suivante */
.oce-slider-wrapper .swiper-button-next {
    right: -40px;          /* distance extérieure */
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* Style optionnel : flèches visibles et élégantes */
.oce-slider-wrapper .swiper-button-prev,
.oce-slider-wrapper .swiper-button-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    backdrop-filter: blur(4px);
}

/* Icones blanches */
.oce-slider-wrapper .swiper-button-prev::after,
.oce-slider-wrapper .swiper-button-next::after {
    color: #000000;
    font-size: 35px;
    font-weight: 900;  /* rend plus épais */
}


/* Centrage vertical par rapport au wrapper propre */
.event-slider-1 .swiper-button-next,
.event-slider-1 .swiper-button-prev,
.event-slider-2 .swiper-button-next,
.event-slider-2 .swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
}

/* Masquer complètement la flèche gauche quand désactivée
   (évite le petit bout noir au tout début) */
.event-slider-1 .swiper-button-prev.swiper-button-disabled,
.event-slider-2 .swiper-button-prev.swiper-button-disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===============================
   Responsive
   =============================== */
@media (max-width: 1024px) {
  .event-slider-1 .oce-slider-wrapper,
  .event-slider-2 .oce-slider-wrapper {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .event-slider-1 .oce-slider-wrapper,
  .event-slider-2 .oce-slider-wrapper {
    max-width: 100%;
  }

  
}