/* ============================================================
 * Events – liste
 * ============================================================ */

.pdl-event-block .events-list{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.pdl-event-block .event-item{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;       /* empêche .event-details de passer au-dessus */
  gap:20px;
  align-items:flex-start; /* image + titre alignés */

  padding:20px;
  border:1px solid #ddd;
  border-radius:14px;
  background-color:#f9f9f9;

  /* ✅ éviter tout "bougé" au hover dû à transitions externes */
  transform:none !important;
}

/* ✅ pas de mouvement / lift au survol (si un thème en injecte) */
.pdl-event-block .event-item:hover{
  transform:none !important;
}

/* Image : colonne fixe */
.pdl-event-block .event-image{
  /* ✅ image + grande (tu l’avais déjà à 150px) */
  flex:0 0 150px;
  width:150px;
}

.pdl-event-block .event-image img{
  width:100% !important;
  height:auto;

  /* ✅ arrondi plus joli */
  border-radius:12px;
  display:block;
}

/* Détails : colonne flexible */
.pdl-event-block .event-details{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.pdl-event-block .event-details h3{
  margin:0 0 8px 0;
  padding:0;

  /* ✅ titre plus grand */
  font-size:20px;
  line-height:1.25;
}

.pdl-event-block .event-details p{
  margin:0;
  padding:0;
}

/* ============================================================
 * Events – description repliable
 * ============================================================ */

.pdl-event-block .event-description-container{
  display:flex;           /* supprime float */
  flex-direction:column;
  gap:6px;
}

.pdl-event-block .event-description{
  font-style:italic;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}

.pdl-event-block .event-description.short-description{
  -webkit-line-clamp:5;
}

.pdl-event-block .event-description.justify{
  text-align:justify;
}

.pdl-event-block .toggle-description{
  background:transparent;
  border:none;
  cursor:pointer;

  align-self:flex-end;
  margin-top:0;

  font-weight:bold;
  color:#000;
  transition:color 0.3s ease;
}

.pdl-event-block .toggle-description:hover{
  color:#c28eff;
}

/* ============================================================
 * Events – bas de carte + bouton inscription
 * ============================================================ */

.pdl-event-block .event-bottom{
  margin-top:auto; /* espaces homogènes */
}

.pdl-event-block .event-signup-wrap{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
}

/* ancien clear inutile */
.pdl-event-block .event-clear{
  display:none;
}

/* ============================================================
 * Events – filtres (barre + pills)
 * ============================================================ */

.pdl-event-block .pdl-event-filter-form{
  display:flex;
  justify-content:center;
  margin:10px 0 28px;
  font-size:16px;
}

/* barre */
.pdl-event-block .pdl-filter-sentence{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:0.6em;

  padding:10px 14px;
  border-radius:14px;
  background:rgba(194,142,255,0.08);
  border:1px solid rgba(194,142,255,0.35);
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.pdl-event-block .pdl-filter-sentence span{
  line-height:1.6;
}

.pdl-event-block .pdl-filter-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
}

/* chevron : scoped (évite d’impacter d’autres modules) */
.pdl-event-block .pdl-filter-display::after{
  content:'▾';
  margin-left:6px;
  font-size:0.75em;
  opacity:0.8;
}

/* focus : scoped (évite d’écraser ui.css global) */
.pdl-event-block .pdl-filter-display:focus-visible{
  outline:3px solid rgba(194,142,255,0.45);
  outline-offset:3px;
}

/* dropdown */
.pdl-event-block .pdl-filter-options{
  position:absolute;
  z-index:1000;
  top:100%;
  left:0;

  margin-top:6px;
  list-style:none;
  padding:6px 0;

  background:#fff;
  border-radius:12px;

  min-width:240px;
  max-height:250px;
  overflow-y:auto;

  display:none;

  border:1px solid rgba(194,142,255,0.35);
  box-shadow:0 16px 35px rgba(0,0,0,0.10);
}

.pdl-event-block .pdl-filter-options.is-open{
  display:block;
}

.pdl-event-block .pdl-filter-options li{
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
}

.pdl-event-block .pdl-filter-options li:hover{
  background:rgba(194,142,255,0.10);
}

.pdl-event-block .pdl-filter-options li.is-active{
  background:rgba(194,142,255,0.16);
  font-weight:600;
}

/* cache les selects natifs */
.pdl-event-block .pdl-event-filter-form select{
  display:none;
}

.pdl-event-block .pdl-no-events-message{
  margin:10px 0 20px;
  font-style:italic;
  color:#666;
}

/* dropdown ouvert */
.pdl-event-block .pdl-filter-display.is-open{
  border-color:#c28eff;
  box-shadow:0 8px 22px rgba(194,142,255,0.30);
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width:768px){
  .pdl-event-block .event-item{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
  }

  .pdl-event-block .event-image{
    flex:0 0 auto;

    /* ✅ un peu plus grand sur mobile (au lieu de 120),
       mais pas trop : */
    width:150px;
  }

  .pdl-event-block .pdl-event-filter-form{
    justify-content:flex-start;
  }

  .pdl-event-block .pdl-filter-sentence{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width:480px){
  .pdl-event-block .pdl-event-filter-form{
    font-size:14px;
  }

  .pdl-event-block .event-details h3{
    font-size:18px;
  }
}

/* ============================================================
 * Events – Layout privé avec sidebar logo
 * ============================================================ */

.pdl-event-block.pdl-event-layout{
  display:flex;
  align-items:flex-start;
  gap:24px;
}

/* colonne gauche */
.pdl-event-block .pdl-event-sidebar{
  flex:0 0 220px;
  display:flex;
  justify-content:center;
}

/* logo */
.pdl-event-block .pdl-event-role-logo{
  width:220px !important;
  max-width:220px !important;
  height:auto !important;

  /* cohérent avec le reste */
  border-radius:14px;

  display:block;
}

/* colonne droite */
.pdl-event-block .pdl-event-main{
  flex:1 1 auto;
  min-width:0;
}

/* ============================================================
 * Responsive : logo masqué en mobile
 * ============================================================ */

@media (max-width:768px){
  .pdl-event-block.pdl-event-layout{
    flex-direction:column;
  }

  .pdl-event-block .pdl-event-sidebar{
    display:none !important;
  }
}