/* =========================================
   HEADER — niente più scontro titolo/X
   ========================================= */

#modalDettaglioEvento .modal-header {
    gap: 0.75rem;
}

#modalDettaglioEvento .modal-title {
    min-width: 0;
}

@media (max-width: 575.98px) {
    #modalDettaglioEvento .modal-title {
        font-size: 1.05rem;
    }
}

/* =========================================
   CORPO DEL MODAL — respiro adattivo
   ========================================= */

@media (max-width: 767.98px) {
    #modalDettaglioEvento .modal-body {
        padding: 1rem !important;
    }
}

/* =========================================
   BADGE / INFO (tipologia, lingua, età)
   ========================================= */

@media (max-width: 767.98px) {
    #modalDettaglioEvento .modal-body .row > .col-lg-8 > .d-flex.flex-wrap {
        row-gap: 0.75rem;
    }
}

/* =========================================
   TEMPLATE DATE/ORARI DELL'EVENTO
   ========================================= */

/* l'orario (09:57 - 15:57) non deve mai spezzarsi a metà */
#modalContainerDate .list-group-item .ms-3.text-muted {
    display: inline-flex !important;
    align-items: center;
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* la data (es. "8 agosto 2026") non deve spezzarsi tra le parole */
#modalContainerDate .list-group-item > div:first-child strong {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    #modalContainerDate .list-group-item {
        /* si adatta automaticamente in base alla larghezza reale dello schermo */
        font-size: clamp(0.68rem, 2.3vw, 0.85rem);
        padding: 0.5rem 0.6rem;
        flex-wrap: nowrap;
        gap: 0.4rem;
    }

    #modalContainerDate .list-group-item .bi-calendar3,
    #modalContainerDate .list-group-item .bi-clock {
        font-size: clamp(0.7rem, 2.3vw, 0.9rem);
    }

    #modalContainerDate .list-group-item .ms-3.text-muted {
        margin-left: 0.3rem !important;
        gap: 0.15rem;
    }

    #modalContainerDate .list-group-item > div:first-child {
        flex: 0 1 auto;
        min-width: 0;
    }

    #modalContainerDate .list-group-item .badge {
        font-size: clamp(0.6rem, 2vw, 0.75rem);
        padding: 0.3rem 0.5rem;
        flex-shrink: 0;
    }
}