/**
 * ==========================================================================
 * Zigolos Core
 * Styles des shortcodes
 * ==========================================================================
 */

/* --------------------------------------------------------------------------
   Boutons
-------------------------------------------------------------------------- */

.zigolos-button {
    display: inline-block;
    padding: .7rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: .2s ease;
    margin-top: .5rem;
}

.zigolos-button:hover {
    opacity: .9;
}

/* --------------------------------------------------------------------------
   Accroche spectacle
-------------------------------------------------------------------------- */

.zigolos-accroche {
    font-size: 1.2rem;
    font-style: italic;
    margin: 1.5rem 0;
}

/* --------------------------------------------------------------------------
   Bloc informations
-------------------------------------------------------------------------- */

.zigolos-infos,
.zigolos-evenement-infos {

    padding: 1rem;
    margin: 1.5rem 0;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.zigolos-infos p,
.zigolos-evenement-infos p {
    margin: .5rem 0;
}

/* --------------------------------------------------------------------------
   Etat des évènements
-------------------------------------------------------------------------- */

.zigolos-etat {

    display: inline-block;
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: bold;
    margin-top: .75rem;
}

.zigolos-etat-normal {
    background: #e8f5e9;
}

.zigolos-etat-complet {
    background: #ffebee;
}

.zigolos-etat-reporte {
    background: #fff8e1;
}

.zigolos-etat-annule {
    background: #eeeeee;
}

/* --------------------------------------------------------------------------
   Liste des représentations
-------------------------------------------------------------------------- */

.zigolos-representations,
.zigolos-agenda {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --------------------------------------------------------------------------
   Carte évènement
-------------------------------------------------------------------------- */

.zigolos-evenement {

    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1.25rem;
}

.zigolos-evenement h3 {

    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.zigolos-lieu {

    margin: .5rem 0;
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   Responsive
-------------------------------------------------------------------------- */

@media (max-width:768px){

    .zigolos-evenement{

        padding:1rem;
    }

    .zigolos-button{

        display:block;
        text-align:center;
    }

}