/* =========================================================================
   1ʳᵉ Compagnie d’Arc – Sarrebourg
   Feuille de style « Calendrier »
   Fichier  : assets/css/calendrier.css
   Date     : 14/06/2025
   Version  : 1.1
   Description :
   - Mise en forme responsive de la liste d’événements.
   - Vignettes centrées et flex‑layout adaptatif.
   ========================================================================= */

/* ────────────────────────────────────────────────────────────────────────────
   Vignettes : taille et centrage
   ─────────────────────────────────────────────────────────────────────────*/
.event-img-wrapper {
    flex: 0 0 auto;
    height: 120px;
    width: 100%;        /* toute la largeur de son parent */
    max-width: 360px;   /* jamais plus large que 360px */
    overflow: hidden;
    display: flex;
    align-items: center; /* centre verticalement */
    justify-content: center; /* centre horizontalement */
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    margin-right: 1rem; /* espacement à droite (desktop) */
}

.event-img-wrapper img {
    max-height: 100%;
    max-width: 300px;
    width: auto;
    height: auto;
}

/* ────────────────────────────────────────────────────────────────────────────
   Layout responsive
   ─────────────────────────────────────────────────────────────────────────*/
#listeEvents .list-group-item {
    gap: 1rem; /* espace entre colonnes (desktop) */
}

/* Desktop (≥992px) : image – texte – date */
@media (min-width: 992px) {
    #listeEvents .list-group-item {
        display: flex !important;
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Mobile / tablette (<992px) : empilement */
@media (max-width: 991.98px) {
    #listeEvents .list-group-item {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    /* Sur mobile : vignette centrée + marge basse */
    .event-img-wrapper {
        margin: 0 auto 1rem auto;
        max-width: 100%;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   Flex‑fill pour la colonne texte
   ─────────────────────────────────────────────────────────────────────────*/
.flex-fill {
    flex: 1 1 auto !important;
}