/*
 * ============================================================
 *  SECTION "PROCHAINS ÉVÉNEMENTS" — Page d'accueil
 *  Paroisse de Guer — Thème enfant Imprezia
 *  Fichier : imprezia-child/homepage-events.css
 *
 *  Reproduit fidèlement la maquette :
 *  - Cards horizontales : bloc date coloré gauche + corps droit
 *  - Palette du site (#1B3A6B bleu marial, #C9A84C or, #F5F0E8 ivoire)
 *  - Compatible avec le shortcode My Calendar [my_calendar_upcoming]
 *  - Compatible avec le widget "My Calendar: Upcoming Events"
 *  - Compatible avec un template PHP personnalisé (voir mode opératoire)
 * ============================================================
 */


/* ============================================================
   WRAPPER DE SECTION
   Conteneur de la section "Prochains événements" sur la page
   d'accueil (bloc Gutenberg ou page builder Imprezia)
   ============================================================ */

.section-events {
  padding: 32px 0;
}

.section-events .section-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.section-events .section-heading .icon {
  font-size: 22px;
  line-height: 1;
}

.section-events .section-heading h2 {
  font-family: 'Georgia', 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: #1B3A6B;
  margin: 0;
  line-height: 1.2;
}

.section-events .section-heading .line {
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, #C9A84C, transparent);
  margin-left: 8px;
}


/* ============================================================
   LISTE D'ÉVÉNEMENTS — Conteneur
   Cible le <ul> ou <div> généré par My Calendar upcoming widget
   ============================================================ */

/* Upcoming widget de My Calendar */
.my-calendar-upcoming-widget ul,
.mc-upcoming-events ul,
ul.mc-upcoming,
.section-events ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}


/* ============================================================
   CARTE ÉVÉNEMENT
   Cible les <li> du widget upcoming My Calendar
   OU les divs d'un template PHP personnalisé
   ============================================================ */

/* Via widget My Calendar upcoming */
.my-calendar-upcoming-widget ul li,
.mc-upcoming-events ul li,
ul.mc-upcoming li,
.section-events ul li,
/* Via template PHP personnalisé */
.mc-event-card {
  background: #ffffff;
  border: 1px solid #ddd7cc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.my-calendar-upcoming-widget ul li:hover,
.mc-upcoming-events ul li:hover,
ul.mc-upcoming li:hover,
.section-events ul li:hover,
.mc-event-card:hover {
  box-shadow: 0 4px 16px rgba(27, 58, 107, 0.12);
  transform: translateY(-1px);
}


/* ============================================================
   BLOC DATE — carré coloré gauche
   (reproduit exactement le .event-date-box de la maquette)
   ============================================================ */

/* Cible la date dans le widget My Calendar
   My Calendar génère un <span class="mc-date"> ou similaire en début de li */
.my-calendar-upcoming-widget ul li .mc-event-date,
.my-calendar-upcoming-widget ul li > a::before,
.mc-upcoming-events ul li .mc-date,
.section-events .mc-date-box,
/* Template PHP personnalisé */
.mc-event-card .mc-date-box {
  width: 56px;
  flex-shrink: 0;
  background-color: #1B3A6B;
  color: #ffffff;
  text-align: center;
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mc-event-card .mc-date-box .mc-day,
.section-events .mc-date-box .mc-day {
  font-family: 'Georgia', serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  display: block;
}

.mc-event-card .mc-date-box .mc-month,
.section-events .mc-date-box .mc-month {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
  display: block;
  margin-top: 2px;
}


/* ============================================================
   CORPS DE LA CARTE — titre + détails
   ============================================================ */

.mc-event-card .mc-event-body,
.section-events .mc-event-body,
.my-calendar-upcoming-widget ul li .mc-event-content,
.mc-upcoming-events ul li .mc-content {
  padding: 10px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Titre de l'événement */
.mc-event-card .mc-event-title,
.section-events .mc-event-title,
.my-calendar-upcoming-widget ul li .mc-event-title,
.my-calendar-upcoming-widget ul li a,
.mc-upcoming-events ul li .event-title {
  font-family: 'Georgia', serif;
  font-weight: 700;
  font-size: 13.5px;
  color: #2C2C2C;
  margin: 0 0 4px;
  line-height: 1.3;
  text-decoration: none;
}

.my-calendar-upcoming-widget ul li a:hover,
.mc-event-card .mc-event-title:hover {
  color: #1B3A6B;
}

/* Ligne de détail : heure · lieu */
.mc-event-card .mc-event-detail,
.section-events .mc-event-detail,
.my-calendar-upcoming-widget ul li .mc-event-detail,
.mc-upcoming-events ul li .event-detail {
  font-size: 12px;
  color: #888888;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

/* Icône horloge devant l'heure */
.mc-event-card .mc-event-detail::before,
.section-events .mc-event-detail::before {
  content: "⏰";
  font-size: 11px;
}

/* Lieu de l'événement (nom de l'église) */
.mc-event-card .mc-event-place,
.section-events .mc-event-place,
.my-calendar-upcoming-widget ul li .mc-location,
.mc-upcoming-events ul li .event-location {
  color: #1B3A6B;
  font-weight: 600;
}


/* ============================================================
   LIEN "VOIR TOUT L'AGENDA"
   ============================================================ */

.section-events .see-all,
.my-calendar-upcoming-widget .mc-see-all,
.mc-upcoming-events .see-all {
  display: inline-block;
  margin-top: 14px;
  color: #1B3A6B;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #C9A84C;
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.section-events .see-all:hover,
.my-calendar-upcoming-widget .mc-see-all:hover,
.mc-upcoming-events .see-all:hover {
  color: #C9A84C;
  border-color: #1B3A6B;
}


/* ============================================================
   RESPONSIVE MOBILE
   ============================================================ */

@media screen and (max-width: 480px) {
  .my-calendar-upcoming-widget ul li,
  .mc-event-card {
    /* Sur très petit écran, conserver le layout horizontal
       mais réduire la largeur du bloc date */
  }

  .mc-event-card .mc-date-box,
  .section-events .mc-date-box {
    width: 46px;
    padding: 8px 2px;
  }

  .mc-event-card .mc-date-box .mc-day,
  .section-events .mc-date-box .mc-day {
    font-size: 18px;
  }

  .mc-event-card .mc-event-title,
  .my-calendar-upcoming-widget ul li a {
    font-size: 13px;
  }
}