/* ===================================================================
   AJans — Event Prime single event template overrides
   --------------------------------------------------------------------
   À enqueuer depuis le child theme Uncode (functions.php), ou à
   importer dans la feuille de style du child : @import url("...").

   Voir README-installation.md pour l'enqueue propre.

   @author  AJans / Jennifer Anselme
   @since   2026-05-25
   =================================================================== */

/* --------------------------------------------------------------------
   1. Grille 2 colonnes 50/50 — desktop
   -------------------------------------------------------------------- */

.ajans-event-detail .ajans-event-detail-2col {
    align-items: flex-start; /* le contenu démarre en haut, l'image ne s'étire pas */
}

.ajans-event-detail .ajans-event-visual-col,
.ajans-event-detail .ajans-event-content-col {
    /* Event Prime utilise sa propre grille .ep-box-col-6 ; on laisse passer */
}

/* --------------------------------------------------------------------
   2. Image / slider — colonne gauche
   -------------------------------------------------------------------- */

.ajans-event-detail .ajans-event-image {
    position: sticky;
    top: 100px; /* offset header Uncode — à ajuster selon la hauteur réelle */
    border-radius: 8px;
    overflow: hidden;
    background: #f5f3ef; /* placeholder doux pendant le chargement */
}

.ajans-event-detail .ajans-event-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Slider rslides natif Event Prime : on contraint à la largeur de colonne */
.ajans-event-detail .ajans-event-image .ep-rslides {
    width: 100%;
    max-width: 100%;
}

.ajans-event-detail .ajans-event-image .ep-rslides li img {
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------
   3. Colonne droite — contenu
   -------------------------------------------------------------------- */

.ajans-event-detail .ajans-event-content-col {
    padding-left: 1.5rem; /* respiration entre l'image et le contenu */
}

/* Resserre la barre d'icônes (pill event type / social) qui s'élargit
   par défaut dans une colonne étroite. */
.ajans-event-detail .ajans-event-content-col .ep-event-type-cal-section {
    padding-top: 0;
    margin-bottom: 1rem;
}

.ajans-event-detail .ajans-event-content-col .ep-sl-action-icon-wrap {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --------------------------------------------------------------------
   4. Card CTA "Je réserve maintenant"
   --------------------------------------------------------------------
   Patch 2026-05-25 : le partial natif Event Prime tickets.php hardcode
   un wrapper <div class="ep-box-col-4" id="ep-sl-right-area"> conçu
   pour un layout 3 colonnes desktop natif EP. Dans notre layout 2 col
   50/50 (ajans-event-detail-2col), on force la card à occuper toute
   la largeur de la colonne droite parente.
   -------------------------------------------------------------------- */

.ajans-event-detail .ajans-event-content-col #ep-sl-right-area.ep-box-col-4 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.ajans-event-detail .ajans-event-content-col .ep-buy-ticket-section {
    width: 100%; /* la card de réservation occupe toute la colonne droite */
    margin-top: 1.5rem;
}

/* --------------------------------------------------------------------
   5. Responsive — sous 992px (tablette + mobile), on empile
       image AU-DESSUS du contenu (cf. décision Jennifer 2026-05-25)
   -------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .ajans-event-detail .ajans-event-detail-2col {
        flex-direction: column;
    }

    .ajans-event-detail .ajans-event-visual-col,
    .ajans-event-detail .ajans-event-content-col {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .ajans-event-detail .ajans-event-image {
        position: static; /* on désactive le sticky en mobile */
        margin-bottom: 1.5rem;
    }

    .ajans-event-detail .ajans-event-content-col {
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------
   6. Garde-fou : si Uncode applique un container fluid trop large,
      on cale la fiche événement sur un max-width raisonnable.
   -------------------------------------------------------------------- */

.ajans-event-detail.ep-main-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}