/* ==========================================================================
   Custom Events Manager — Frontend
   ========================================================================== */

/* --- Reset & généralités --- */
.wp-custom-event-block{box-sizing:border-box}
.wp-custom-event-block *,.wp-custom-event-block *::before,.wp-custom-event-block *::after{box-sizing:inherit}
.wp-custom-event-block .events{background:transparent;padding:0}
.wp-custom-event-block .events ul{margin:0;padding:0;list-style:none}

/* --- Message "aucun événement" --- */
.wp-custom-event-block.cem-empty-front{text-align:center;padding:40px 20px}
.wp-custom-event-block.cem-empty-front p{color:#888;font-size:16px}

/* --- Carte événement (grid) --- */
.wp-custom-event-block .events ul li{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:"time" "detail";
    margin-bottom:20px;
    box-shadow:0 8px 25px rgba(0,0,0,.3);
    overflow:hidden;
    border-radius:16px;
    width:100%;
}

/* --- Zone image (gauche / haut mobile) --- */
.wp-custom-event-block .events ul li .time{
    grid-area:time;
    position:relative;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
    padding:20px;
    overflow:hidden;
    cursor:default;
    --event-bg:#ccc;
    min-height:150px;
}
.wp-custom-event-block .events ul li .time[data-full-image]{cursor:pointer}

.wp-custom-event-block .events ul li .time::before{
    content:'';
    position:absolute;inset:0;
    background-image:var(--event-bg);
    background-position:center 5%;
    background-size:cover;
    transition:transform .4s ease-in-out;
    transform:scale(1.03);
    will-change:transform;
    z-index:0;
}
.wp-custom-event-block .events ul li .time:hover::before{transform:scale(1.1)}

/* --- Icône fullscreen --- */
.wp-custom-event-block .events ul li .time[data-full-image]::after{
    content:'';
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:64px;height:64px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:80%;
    filter:drop-shadow(0 0 5px rgba(0,0,0,.6));
    opacity:0;
    transition:opacity .3s,transform .3s;
    z-index:2;pointer-events:none;
}
.wp-custom-event-block .events ul li .time[data-full-image]:hover::after{
    opacity:1;transform:translate(-50%,-50%) scale(1.1);
}

/* --- Date box --- */
.wp-custom-event-block .events ul li .time .date-box{
    position:relative;z-index:1;
    display:flex;flex-direction:row;align-items:baseline;gap:.3em;
    flex-wrap:wrap;
    background:rgba(242,145,109,1);
    padding:10px 15px;border-radius:5px;
    pointer-events:none;
    max-width:100%;
}
.wp-custom-event-block .events ul li .time .date-day{font-size:18px;font-weight:700;color:#fff;line-height:1}
.wp-custom-event-block .events ul li .time .date-month,
.wp-custom-event-block .events ul li .time .date-year{font-size:14px;color:#fff;text-transform:uppercase}

/* --- Zone détails (droite / bas mobile) --- */
.wp-custom-event-block .events ul li .details{
    grid-area:detail;
    padding:20px;
    color:#fff;
    display:flex;flex-direction:column;
    overflow:hidden;
    background:linear-gradient(135deg,#2a3854 50%,#284670 75%,#21598C 100%);
    align-items:flex-start;
    position:relative;
}

/* Astra overrides — tous les niveaux de titre */
.wp-custom-event-block .events ul li .details h1,
.wp-custom-event-block .events ul li .details h2,
.wp-custom-event-block .events ul li .details h3,
.wp-custom-event-block .events ul li .details h4,
.wp-custom-event-block .events ul li .details h5,
.wp-custom-event-block .events ul li .details h6{
    margin:0 0 6px!important;padding:0!important;
    font-size:22px!important;line-height:1.3!important;
    color:#fff!important;flex-shrink:0;
}

/* --- Titre cliquable --- */
.wp-custom-event-block .events ul li .details .cem-title-link{
    color:inherit!important;
    text-decoration:none!important;
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    transition:opacity .3s;
}
.wp-custom-event-block .events ul li .details .cem-title-link:hover{
    opacity:.8;
    text-decoration:underline!important;
}
.wp-custom-event-block .events ul li .details .cem-ext-icon{
    display:inline-block;
    width:13px;
    height:13px;
    flex-shrink:0;
    opacity:.65;
    transition:opacity .3s;
    position:relative;
    top:-1px;
}
.wp-custom-event-block .events ul li .details .cem-title-link:hover .cem-ext-icon{
    opacity:1;
}

/* --- Contenu scrollable avec masque de flou --- */
.wp-custom-event-block .events ul li .details .details-content{
    flex-grow:1;overflow-y:auto;width:100%;
    -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
    transition: -webkit-mask-image .3s ease, mask-image .3s ease;
}

/* Masque retiré quand le contenu n'est pas scrollable ou en bas */
.wp-custom-event-block .events ul li .details .details-content.cem-at-bottom{
    -webkit-mask-image:none;
    mask-image:none;
}

.wp-custom-event-block .events ul li .details .details-content p{
    margin:0!important;padding:0 10px 10px 0!important;font-size:15px;color:#cdd3de;
}

/* --- Indicateur de scroll (flèche animée, cliquable) --- */
.wp-custom-event-block .events ul li .details .cem-scroll-hint{
    position:absolute;bottom:14px;right:14px;
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(242,145,109,.85);border-radius:50%;
    opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s;
    pointer-events:none;z-index:3;
    animation:cem-bounce 1.5s ease-in-out infinite;
}
.wp-custom-event-block .events ul li .details .cem-scroll-hint.visible{
    opacity:1;visibility:visible;
    pointer-events:auto;cursor:pointer;
}
.wp-custom-event-block .events ul li .details .cem-scroll-hint:hover{
    background:rgba(242,145,109,1);
    transform:scale(1.15);
}
.wp-custom-event-block .events ul li .details .cem-scroll-hint:active{
    transform:scale(0.95);
}
.wp-custom-event-block .events ul li .details .cem-scroll-hint svg{
    width:16px;height:16px;fill:#fff;
}
@keyframes cem-bounce{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(5px)}
}

/* --- Scrollbar --- */
.cem-webkit .details-content::-webkit-scrollbar{width:10px}
.cem-webkit .details-content::-webkit-scrollbar-track{background:transparent}
.cem-webkit .details-content::-webkit-scrollbar-thumb{background:#f2916d;border-radius:5px;border:2px solid #2a3854}
.cem-webkit .details-content::-webkit-scrollbar-button{display:none}
.cem-webkit .details-content::-webkit-scrollbar-corner{background:transparent}
.cem-firefox .details-content{scrollbar-width:thin;scrollbar-color:#f2916d #2a3854}

/* --- Desktop ≥ 768 px --- */
@media(min-width:768px){
    .wp-custom-event-block .events ul li{
        grid-template-columns:40% 1fr;
        grid-template-areas:"time detail";
        height:220px;
    }
    .wp-custom-event-block .events ul li .time::before{background-position:center 15%}
    /* Date-box : tailles adaptatives pour éviter le débordement */
    .wp-custom-event-block .events ul li .time .date-day{font-size:clamp(13px,1.5vw,20px)}
    .wp-custom-event-block .events ul li .time .date-month,
    .wp-custom-event-block .events ul li .time .date-year{font-size:clamp(10px,1vw,15px)}
    .wp-custom-event-block .events ul li .time .date-box{gap:clamp(.2em,0.4vw,.4em);padding:clamp(6px,1vw,10px) clamp(8px,1.2vw,15px)}
}

/* --- Mobile < 768 px --- */
@media(max-width:767px){
    .wp-custom-event-block .events ul li .time{height:150px}
    .wp-custom-event-block .events ul li .time[data-full-image]::after{
        opacity:.85;transform:translate(-50%,-50%) scale(.8);
    }
    .wp-custom-event-block .events ul li .time .date-box{padding:8px 12px}
    .wp-custom-event-block .events ul li .time .date-day{font-size:18px!important}
    .wp-custom-event-block .events ul li .time .date-month,
    .wp-custom-event-block .events ul li .time .date-year{font-size:12px!important}
    .wp-custom-event-block .events ul li .details{min-height:180px;max-height:250px}
}

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.custom-event-lightbox{
    position:fixed;z-index:999999;inset:0;
    background:rgba(0,0,0,.92);
    display:flex;justify-content:center;align-items:center;
    opacity:0;visibility:hidden;
    transition:opacity .3s,visibility .3s;
    padding:20px;box-sizing:border-box;
}
.custom-event-lightbox.active{opacity:1;visibility:visible}
.custom-event-lightbox img{
    max-width:90vw;max-height:90vh;
    box-shadow:0 0 30px rgba(0,0,0,.5);
    border-radius:6px;object-fit:contain;
    transform:scale(.95);transition:transform .3s;
}
.custom-event-lightbox.active img{transform:scale(1)}
.custom-event-lightbox .close-btn{
    position:absolute;top:18px;right:28px;
    color:#fff;font-size:42px;font-weight:700;
    cursor:pointer;line-height:1;transition:color .3s;
    background:none;border:none;padding:0;
}
.custom-event-lightbox .close-btn:hover{color:#f2916d}