/* ==================================================
   COULEURS KMG
   ================================================== */

:root{
    --kmg-orange:#E18C08;
    --kmg-orange-hover:#c77700;
    --kmg-red:#d63638;
    --kmg-border:#e6e7e8;
    --kmg-border-light:#ececec;
}

/* ==================================================
   LISTE DES EVENEMENTS
   SHORTCODE : [kmg_events]
   ================================================== */

/* Ligne complète d'un événement */
.kmg-events-row{
    display:flex;
    gap:30px;
    margin-bottom:40px;
    text-decoration:none;
    color:inherit;
}

/* Miniature */
.kmg-events-thumb{
    width:350px;
    flex-shrink:0;
}

.kmg-events-thumb img{
    width:100%;
    height:250px;
    object-fit:contain;
    border-radius:8px;
}

/* Contenu texte */
.kmg-events-content{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* Date */
.kmg-events-date{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:23px !important;
    font-weight:500;

    color:var(--kmg-orange);
}

.kmg-events-date i{
    color:var(--kmg-orange);
    font-size:20px;
    margin-right:10px;
}

/* Titre */
.kmg-events-content h3{
    font-size:30px;
    line-height:1.2em;
    margin:5px 0;
    color: #6b7280!important;
}

/* Lieu */
.kmg-events-location{
    display:flex;
    align-items:center;
    gap:6px;

    color:#6b7280!important;
    font-size:23px !important;
}

.kmg-events-location i{
    color:var(--kmg-orange);
    font-size:20px;
    margin-right:10px;
}

/* Intervenant */
.kmg-events-speaker{
    display:flex;
    align-items:center;
    gap:6px;

    margin-top:4px;

    color:#6b7280!important;
    font-size:23px;
}

.kmg-events-speaker i{
    color:var(--kmg-orange);
    font-size:20px;
    margin-right:8px;
}


/* ==================================================
   TITRES DE MOIS
   ================================================== */

.kmg-events-month{
    display:flex;
    align-items:center;
    gap:30px;

    margin:60px 0 40px;

    color:#000000!important;

    font-size:36px;
    font-weight:700;
    text-transform:uppercase;
}

.kmg-events-month::before,
.kmg-events-month::after{
    content:'';

    flex:1;

    height:1px;

    background:var(--kmg-orange);
}

.kmg-events-month span{
    white-space:nowrap;
}


/* ==================================================
   BOUTON EN SAVOIR PLUS
   ================================================== */

.kmg-events-actions{
    margin-top:20px;
}

.kmg-events-button{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:5px 12px;

    background:var(--kmg-orange);

    color:#fff;

    font-size:18px;
    font-weight:700;

    text-transform:uppercase;
    letter-spacing:1px;

    border-radius:8px;

    transition:.3s;
}

.kmg-events-row:hover .kmg-events-button{
    background:var(--kmg-orange-hover);
}


/* ==================================================
   CARDS EVENEMENTS
   SHORTCODE : [kmg_events_cards]
   ================================================== */

/* Grille */
.kmg-events-grid{

    display:grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:30px;
}

/* Carte */
.kmg-event-card{

    position:relative;

    display:block;

    overflow:hidden;

    min-height:520px;

    border-radius:8px;

    color:#fff;

    text-decoration:none;
}

/* Image */
.kmg-event-card img{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.4s;
}

.kmg-event-card:hover img{
    transform:scale(1.05);
}

/* Overlay noir */
.kmg-event-overlay{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    padding:0px;

    background: linear-gradient(
            to top,
            rgba(0,0,0,.95),
            rgba(0,0,0,.50)
    );
}

/* Bandeau date */
.kmg-event-date{

    align-self:flex-start;

    background:var(--kmg-orange);

    color:#fff;

    padding:10px 30px;

    font-weight:700;
    text-transform:uppercase;
    margin-top: 30px;

    margin-bottom:20px;

    border-radius:0px 8px 8px 0px;
}

/* Zone basse */
.kmg-event-content{
    margin-top:auto;
}

/* Pays */
.kmg-event-country{

    display:flex;
    align-items:center;
    gap:8px;

    font-size:18px;

    margin : 0px 0px 15px 30px;
}

/* Titre */
.kmg-event-content h3{

    margin : 0px 30px 30px 30px;

    color:#fff;

    font-size:30px;
    line-height:1.1;
}


/* ==================================================
   PAGE EVENEMENT
   SHORTCODE : [kmg_event]
   ================================================== */

/* Mise en page générale */
.kmg-event-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    margin-bottom:40px;

}

/* Colonne gauche */
.kmg-event-left{
    min-width:0;
}

/* status */
.kmg-event-status{

    display:inline-block;

    margin-bottom:20px;

    padding:6px 12px;

    border-radius:4px;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;
}

.kmg-event-status.upcoming{

    background:#e18c08;

    color:#ffffff;
}

.kmg-event-status.running{

    background:#e18c08;

    color:#ffffff;
}

.kmg-event-status.finished{

    background:#d62828;

    color:#ffffff;
}

/* Colonne droite */
.kmg-event-right{

    border:1px solid var(--kmg-border);

    padding:25px;

    border-radius:8px;

    height:fit-content;
}

/* Image principale */
.kmg-event-image img{

    width:100%;
    height:auto;

    border-radius:8px;
}

/* Bloc d'information */
.kmg-event-meta-item{

    margin-bottom:20px;

    padding-bottom:20px;

    border-bottom:1px solid var(--kmg-border-light);
}

.kmg-event-meta-item:last-child{
    border-bottom:none;
}

/* Libellé */
.kmg-event-meta-label{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:10px;

    color:#000000;

    font-size:16px;
    font-weight:700;

    text-transform:uppercase;
}

.kmg-event-meta-label i{
    color: var(--kmg-orange);
    font-size:20px;
}

/* Valeur */
.kmg-event-meta-value{
    display: flex;
    align-items:center;
    line-height:1.6;
    font-size:18px;
    gap: 10px;
}
.kmg-event-meta-value i{
    color: var(--kmg-orange);
    font-size:18px;
}
.kmg-event-meta-value-value{
    line-height:1.6;
    font-size:16px;
    padding-left: 35px;
}

/* Intervenant / Organisateur */

.kmg-instructor-card-top{
    background-color: black;
    display: flex;
    flex-direction: row;
    height: 250px;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
    margin-bottom: 15px;

}

.kmg-instructor-col-left {
    width :80%;
}

.kmg-instructor-col-right{
    width :20%;
    padding: 3%;
    display: flex;
    flex-direction: column;
}

.kmg-instructor-col-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}
.kmg-event-company-name, .kmg-event-speaker-name{
    display: flex;
    align-items:center;
    line-height:1.6;
    font-size:18px;
    gap: 10px;
    font-weight: bold;

}
.kmg-event-company-info{
    display: flex;
    align-items:center;
    line-height:1.6;
    font-size:18px;
    gap: 10px;
    font-weight: bold;

}
.kmg-event-company-info i{
    color: var(--kmg-orange);
    font-size:18px;
}
.kmg-event-company-info-content {
    line-height:1.6;
    font-size:18px;
    padding-left: 40px;
}

/* Photo */
.kmg-event-person-photo{
    width:100%;
    object-fit:cover;
    flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,0.25);
}

.kmg-event-company-info-content a{

    color:inherit;

    text-decoration:none;
}

.kmg-event-company-info-content a:hover{

    text-decoration:underline;
}

/* Réservation */
/*
|--------------------------------------------------------------------------
| Bloc réservation
|--------------------------------------------------------------------------
*/

.kmg-event-booking{

    margin-top:25px;
}

/*
|--------------------------------------------------------------------------
| Titre
|--------------------------------------------------------------------------
*/

.kmg-event-booking-title{

    font-size:16px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:15px;

    color : #000000;
}
.kmg-event-booking-title i{
    color: var(--kmg-orange);
    font-size:18px;
}

/*
|--------------------------------------------------------------------------
| Prix
|--------------------------------------------------------------------------
*/

.kmg-event-booking-price{

    font-size:32px;

    font-weight:700;

    margin-bottom:15px;
}
/*
|--------------------------------------------------------------------------
| Prix normal
|--------------------------------------------------------------------------
*/

.kmg-event-price-normal{

    font-size:32px;

    font-weight:700;
}

/*
|--------------------------------------------------------------------------
| Prix barré
|--------------------------------------------------------------------------
*/

.kmg-event-price-old{

    display:block;

    font-size:20px;

    color:#999;

    text-decoration:line-through;

    margin-bottom:5px;
}

/*
|--------------------------------------------------------------------------
| Prix promo
|--------------------------------------------------------------------------
*/

.kmg-event-price-sale{

    display:block;

    font-size:36px;

    font-weight:700;

    color:#d62828;
}

/*
|--------------------------------------------------------------------------
| Places restantes
|--------------------------------------------------------------------------
*/

.kmg-event-booking-remaining{

    margin-bottom:20px;

    color:#555;

    font-size:16px;
}

/*
|--------------------------------------------------------------------------
| Badge économie
|--------------------------------------------------------------------------
*/

.kmg-event-price-badge{

    display:inline-block;

    margin-bottom:10px;

    background:#e18c08;

    color:#fff;

    padding:4px 15px;

    border-radius:4px;

    font-size:14px;

    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| Quantité
|--------------------------------------------------------------------------
*/

.kmg-event-booking-quantity{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:20px;
}

.kmg-event-booking-quantity label{

    font-weight:600;
}

.kmg-event-booking-quantity input{

    width:80px;

    padding:8px;

    text-align:center;
}

/*
|--------------------------------------------------------------------------
| Bouton
|--------------------------------------------------------------------------
*/

.kmg-event-booking-button{

    width:100%;

    background:#e18c08;

    color:#fff;

    border:none;

    padding:14px;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

    border-radius:4px;
}

.kmg-event-booking-button:hover{

    opacity:.9;
}

/* Complet */
.kmg-event-full{

    background:var(--kmg-red);

    color:#fff;

    text-align:center;

    padding:15px;

    border-radius:6px;

    font-size:18px;

    font-weight:700;
}

/* Inscriptions closes */
.kmg-event-closed{

    background:#666;

    color:#fff;

    text-align:center;

    padding:15px;

    border-radius:6px;

    font-weight:700;
}

/* Description */
.kmg-card{
    margin-top:30px;
}

.woocommerce-message a.button.wc-forward {
    background-color: #e18c08 !important;
    padding: 5px 15px;
}


/* ==================================================
   RESPONSIVE TABLETTE
   ================================================== */

@media(max-width:980px){

    .kmg-event-layout{
        grid-template-columns:1fr;
    }

    .kmg-event-right{
        order:2;
    }

    .kmg-event-left{
        order:1;
    }

    .kmg-events-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    .kmg-instructor-card-top{
        height: 450px;
    }
}


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

@media(max-width:767px){

    .kmg-event-layout{
        gap:20px;
    }

    .kmg-event-right{
        padding:20px;
    }

    .kmg-events-grid{
        grid-template-columns:1fr;
    }

    .kmg-events-row{
        flex-direction:column;
    }

    .kmg-events-thumb{
        width:100%;
    }

    .kmg-events-thumb img{
        height:auto;
    }

    .kmg-events-content h3{

        font-size:24px;

    }

    .kmg-events-date,
    .kmg-events-location,
    .kmg-events-speaker{

        font-size:18px !important;

    }
    .kmg-instructor-card-top{
        height: 210px;
    }
}