/* ============================================
   AGENDA DES ÉVÈNEMENTS — CSS v5
   Saint-Saturnin-lès-Apt
   À uploader dans :
   /wp-content/themes/astra-child/assets/agenda.css
   ============================================ */

/* ============================================
   TOKENS DE DESIGN
   ============================================ */

:root {
  --ag-vert: #2d6a4f;
  --ag-vert-clair: #52b788;
  --ag-fond: #f7f5f0;
  --ag-blanc: #ffffff;
  --ag-texte: #1a1a2e;
  --ag-gris: #6b7280;
  --ag-ligne: #ede9e2;
  --ag-rayon: 16px;
  --ag-rayon-sm: 10px;
  --ag-ombre: 0 4px 24px rgba(0, 0, 0, 0.10);
  --ag-transition: 0.28s cubic-bezier(0.22, 0.68, 0, 1.2);
  --ag-font-body: var(--ast-global-font-family, inherit);
  --ag-font-heading: var(--ast-heading-font-family, inherit);
}

/* ============================================
   NOTE : h1.entry-title intentionnellement non ciblé
   → couleur et typographie natives d'Astra conservées
   ============================================ */

/* ============================================
   SOUS-TITRE "ÉVÈNEMENTS"
   ============================================ */

.wpem-event-listing-header-title h2.wpem-heading-text {
  font-family: var(--ag-font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ag-vert) !important;
}

/* ============================================
   BARRE DE FILTRES
   ============================================ */

.wpem-form-wrapper.event_filters {
  background: var(--ag-blanc) !important;
  border-radius: var(--ag-rayon) !important;
  padding: 20px 24px !important;
  box-shadow: var(--ag-ombre) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  margin-bottom: 28px !important;
}

.wpem-form-label {
  font-family: var(--ag-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ag-gris) !important;
}

.wpem-form-wrapper input[type="text"],
.wpem-form-wrapper select {
  font-family: var(--ag-font-body) !important;
  border: 1.5px solid #e5e7eb !important;
  border-radius: var(--ag-rayon-sm) !important;
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  color: var(--ag-texte) !important;
  background: var(--ag-fond) !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
  outline: none !important;
}

.wpem-form-wrapper input[type="text"]:focus,
.wpem-form-wrapper select:focus {
  border-color: var(--ag-vert) !important;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.12) !important;
}

/* ============================================
   WRAPPER INTERMÉDIAIRE
   border-radius + overflow:hidden évitent
   le rectangle visible derrière la card au hover
   ============================================ */

.wpem-event-layout-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: var(--ag-rayon) !important;
  overflow: visible !important;
}

/* ============================================
   VUE GRILLE (box view)
   ============================================ */

.wpem-event-box-col {
  padding: 10px !important;
  box-sizing: border-box !important;
}

.wpem-event-listing-box-view .event_listing.type-event_listing {
  border-radius: var(--ag-rayon) !important;
  /*overflow: hidden !important;*/
  background: var(--ag-blanc) !important;
  border: 1.5px solid rgba(45, 106, 79, 0.22) !important;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.13),
    0 1px 4px rgba(0, 0, 0, 0.07) !important;
  transition:
    transform var(--ag-transition),
    box-shadow 0.28s ease !important;
  will-change: transform !important;
}

.wpem-event-listing-box-view .event_listing.type-event_listing:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 18px 48px rgba(45, 106, 79, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.wpem-event-listing-box-view .event_listing.type-event_listing:focus-within {
  outline: 2px solid var(--ag-vert) !important;
  outline-offset: 2px !important;
}

.wpem-event-action-url {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

/* --- Image (grille) --- */

.wpem-event-listing-box-view .wpem-event-banner {
  overflow: hidden !important;
  border-radius: var(--ag-rayon) var(--ag-rayon) 0 0 !important;
  position: relative !important;
}

.wpem-event-listing-box-view .wpem-event-banner-img {
  height: 180px !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.55s ease !important;
  will-change: transform !important;
}

.wpem-event-listing-box-view .event_listing:hover .wpem-event-banner-img {
  transform: scale(1.05) !important;
}

/* ============================================
   BADGE DATE — ANGLE HAUT-GAUCHE (grille uniquement)
   Le .wpem-event-date dans le banner ne contient
   QUE la date de début → on le masque.
   Celui dans .wpem-event-infomation contient les
   deux dates → on le sort du flux et on le colle
   en haut-gauche de la card.
   IMPORTANT : .wpem-event-infomation doit être
   position:static pour que l'absolute se réfère
   à la card parente (position:relative).
   ============================================ */

/* La card est le parent de positionnement */
.wpem-event-listing-box-view .event_listing.type-event_listing {
  position: relative !important;
}

/* Étape 1 — Masquer le badge incomplet du banner */
.wpem-event-listing-box-view .wpem-event-banner .wpem-event-date,
.wpem-event-listing-box-view .wpem-event-banner .wpem-event-ticket-type,
.wpem-event-listing-box-view .wpem-event-banner .wpem-event-type,
.wpem-event-listing-box-view .wpem-event-banner .wpem-badge {
  display: none !important;
}

/* Étape 2 — .wpem-event-infomation passe en static
   pour que l'absolute ci-dessous remonte à la card */
.wpem-event-listing-box-view .wpem-event-infomation {
  position: static !important;
  padding: 22px 22px 18px !important;
}

/* Étape 3 — Badge complet (from + to) en haut-gauche */
.wpem-event-listing-box-view .wpem-event-infomation > .wpem-event-date {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3 !important;
  background: var(--ag-blanc) !important;
  border-radius: 16px 0 16px 0 !important;
  padding: 8px 14px 10px !important;
  min-width: 52px !important;
  border-right: 1.5px solid rgba(45, 106, 79, 0.25) !important;
  border-bottom: 1.5px solid rgba(45, 106, 79, 0.25) !important;
  box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.22) !important;
  margin: 0 !important;
}

/* Conteneur interne : flex colonne centré */
.wpem-event-listing-box-view .wpem-event-infomation .wpem-event-date-type {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Lignes from / to */
.wpem-event-listing-box-view .wpem-event-infomation .wpem-from-date,
.wpem-event-listing-box-view .wpem-event-infomation .wpem-to-date {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}

/* Séparateur → flèche ↓ */
.wpem-event-listing-box-view .wpem-event-infomation .wpem-date-separator {
  font-size: 0 !important;
  display: block !important;
  text-align: center !important;
}
.wpem-event-listing-box-view
  .wpem-event-infomation
  .wpem-date-separator::before {
  content: "↓" !important;
  font-size: 0.8rem !important;
  color: var(--ag-vert) !important;
  display: block !important;
  line-height: 1 !important;
}

/* Typographie badge grille */
.wpem-event-listing-box-view .wpem-event-infomation .wpem-date {
  font-family: var(--ag-font-heading) !important;
  font-size: 1.3rem !important;
  font-weight: 900 !important;
  color: var(--ag-vert) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.wpem-event-listing-box-view .wpem-event-infomation .wpem-month {
  font-family: var(--ag-font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;12px !important;
  letter-spacing: 0.08em !important;
  color: var(--ag-gris) !important;
  line-height: 1 !important;
  display: block !important;
}

.wpem-event-listing-box-view .wpem-event-location {
  padding-top: 10px !important;
  border-top: 1px solid var(--ag-ligne) !important;
  margin-top: 8px !important;
}

/* ============================================
   VUE LISTE (list view)
   ============================================ */

.wpem-event-listing-list-view .wpem-event-box-col {
  padding: 4px 0 !important;
  width: 100% !important;
}

.wpem-event-listing-list-view .event_listing.type-event_listing {
  border-radius: 16px !important;
  /*overflow: hidden !important;*/
  overflow: visible !important;
  background: var(--ag-blanc) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  transition:
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  min-height: unset !important;
  will-change: transform !important;
}

.wpem-event-listing-list-view .event_listing.type-event_listing:hover {
  box-shadow: 0 6px 22px rgba(45, 106, 79, 0.14) !important;
  transform: translateY(-2px) !important;
}

.wpem-event-listing-list-view .event_listing.type-event_listing:focus-within {
  outline: 2px solid var(--ag-vert) !important;
  outline-offset: 2px !important;
}

.wpem-event-listing-list-view .wpem-event-action-url {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
}

.wpem-event-listing-list-view .wpem-event-banner {
  width: 110px !important;
  min-width: 110px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.wpem-event-listing-list-view .wpem-event-banner-img {
  width: 110px !important;
  height: 100% !important;
  min-height: 75px !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.45s ease !important;
}

.wpem-event-listing-list-view .event_listing:hover .wpem-event-banner-img {
  transform: scale(1.06) !important;
}

.wpem-event-listing-list-view .wpem-event-banner .wpem-event-date {
  display: none !important;
}

.wpem-event-listing-list-view .wpem-event-infomation {
  /* position:relative pour ne pas hériter du static de la vue grille */
  position: relative !important;
  padding: 10px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.wpem-event-listing-list-view .wpem-event-infomation > .wpem-event-date {
  /* Neutralise le position:absolute de la vue grille */
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 2px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: unset !important;
}

.wpem-event-listing-list-view .wpem-from-date,
.wpem-event-listing-list-view .wpem-to-date {
  display: flex !important;
  align-items: baseline !important;
  gap: 3px !important;
}

.wpem-event-listing-list-view .wpem-date {
  font-family: var(--ag-font-heading) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  color: var(--ag-vert) !important;
  line-height: 1 !important;
}

.wpem-event-listing-list-view .wpem-month {
  font-family: var(--ag-font-body) !important;
  font-size: 0.62rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  color: var(--ag-gris) !important;
  letter-spacing: 0.05em !important;
}

/* ============================================
   TYPOGRAPHIE COMMUNE
   ============================================ */

.wpem-event-title h3.wpem-heading-text {
  font-family: var(--ag-font-body) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  color: var(--ag-texte) !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.wpem-event-date-time-text {
  font-family: var(--ag-font-body) !important;
  font-size: 0.73rem !important;
  color: var(--ag-gris) !important;
  line-height: 1.3 !important;
}

.wpem-event-location {
  display: flex !important;
  align-items: flex-start !important;
  gap: 4px !important;
}

.wpem-event-location-text {
  font-family: var(--ag-font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: var(--ag-vert) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ============================================
   BOUTON "CHARGER PLUS"
   ============================================ */

.load_more_events_loader {
  text-align: center !important;
  margin-top: 36px !important;
}

.load_more_events {
  display: inline-block !important;
  padding: 13px 36px !important;
  background: var(--ag-vert) !important;
  color: #fff !important;
  font-family: var(--ag-font-body) !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition:
    background 0.25s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
  box-shadow: 0 4px 18px rgba(45, 106, 79, 0.28) !important;
  will-change: transform !important;
}

.load_more_events:hover {
  background: var(--ag-vert-clair) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(82, 183, 136, 0.35) !important;
  color: #fff !important;
}

.load_more_events:focus-visible {
  outline: 2px solid var(--ag-vert) !important;
  outline-offset: 4px !important;
}

/* ============================================
   BASCULE GRILLE / LISTE
   ============================================ */

.wpem-active-layout {
  background: var(--ag-vert) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* ============================================
   RESPONSIVE — MOBILE (≤ 600 px)
   ============================================ */

@media (max-width: 600px) {
  .wpem-form-wrapper.event_filters {
    padding: 16px !important;
  }

  .wpem-event-listing-box-view .wpem-event-box-col {
    width: 100% !important;
    padding: 6px 0 !important;
  }

  .wpem-event-listing-list-view .wpem-event-banner,
  .wpem-event-listing-list-view .wpem-event-banner-img {
    width: 80px !important;
    min-width: 80px !important;
  }

  .wpem-event-title h3.wpem-heading-text {
    -webkit-line-clamp: 1 !important;
  }

  .load_more_events {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ============================================
   RESPONSIVE — TABLETTE (601 – 900 px)
   ============================================ */

@media (min-width: 601px) and (max-width: 900px) {
  .wpem-event-listing-box-view .wpem-event-box-col {
    width: 50% !important;
  }
}