/* ===========================================================
   BGH NEWS EVENTS
   Version 2.0
=========================================================== */

.bg-home-events{
    margin:40px 0 20px;
    position:relative;
}

.bgh-con{
    width:100%;
}

/* ===========================================================
   SECTION HEADER
=========================================================== */

.bg-section-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.bg-section-title{
    display:flex;
    align-items:center;
    gap:14px;
}

.bg-section-title span{
    width:4px;
    height:28px;
    background:#F37021;
    display:block;
}

.bg-section-title h2{
    margin:0;
    font-size:30px;
    font-weight:800;
    color:#111;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.3px;
}

/* ==========================
   EVENTS HEADER
========================== */

.bg-section-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.bg-section-title{

    display:flex;

    align-items:center;

    gap:12px;

}

.bg-section-title span{

    width:4px;

    height:28px;

    background:#F37021;

}

.bg-section-title h2{

    margin:0;

    font-size:30px;

    font-weight:800;

    text-transform:uppercase;

    line-height:1;

}

/* ==========================
   ARROWS
========================== */

.bg-events-nav{

    display:flex;

    align-items:center;

}

.bg-events-nav button{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:1px solid #E5E5E5;

    color:#666;

    cursor:pointer;

    font-size:20px;

    font-weight:700;

    line-height:1;

    padding:0;

    transition:.25s;

}

.bg-events-nav button:first-child{

    border-right:none;

}

.bg-events-nav button:hover{

    background:#F37021;

    border-color:#F37021;

    color:#fff;

}

.bg-events-nav button:active{

    transform:scale(.96);

}

/* ===========================================================
   GRID
=========================================================== */
.bg-events-track{

    display:flex;
    gap:22px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.bg-events-track::-webkit-scrollbar{

    display:none;

}

/* ===========================================================
   CARD
=========================================================== */

.bg-event-card{

    flex:0 0 calc((100% - 66px)/4);

    width:calc((100% - 66px)/4);

    max-width:calc((100% - 66px)/4);

    min-width:calc((100% - 66px)/4);

    background:#fff;

    border:1px solid #e9e9e9;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    transition:.30s;

}

.bg-event-card:hover{

    transform:translateY(-5px);

    box-shadow:0 14px 30px rgba(0,0,0,.08);

}







/* ===========================================================
   IMAGE
=========================================================== */

.bg-event-image{

    position:relative;

    display:block;

    overflow:hidden;

    background:#f5f5f5;

}

.bg-event-image img{

    width:100%;

    height:215px;

    display:block;

    object-fit:cover;

    transition:.35s;

}

.bg-event-card:hover .bg-event-image img{

    transform:scale(1.05);

}

/* ===========================================================
   BADGE
=========================================================== */

.bg-event-badge{

    position:absolute;

    top:14px;

    left:14px;

    z-index:5;

    padding:7px 12px;

    border-radius:2px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#fff;

    line-height:1;

}

.bg-event-badge.today{

    background:#E53935;

}

.bg-event-badge.tomorrow{

    background:#1565C0;

}

.bg-event-badge.upcoming{

    background:#2E7D32;

}

.bg-event-badge.multi{

    background:#F37021;

}

/* ===========================================================
   CONTENT
=========================================================== */

.bg-event-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:18px;

}

/* ===========================================================
   TITLE
=========================================================== */

.bg-event-title{

    margin:0 0 16px;

    font-size:21px;

    font-weight:700;

    line-height:1.38;

    min-height:58px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.bg-event-title a{

    color:#111;

    text-decoration:none;

    transition:.25s;

}

.bg-event-title a:hover{

    color:#F37021;

}

/* ===========================================================
   META
=========================================================== */

.bg-event-meta{

    display:flex;

    flex-direction:column;

    gap:13px;

    margin-bottom:20px;

    flex:1;

}

.bg-event-date,

.bg-event-location{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:15px;

    font-weight:600;

    color:#555;

    line-height:1.55;

}

.bg-event-date svg,

.bg-event-location svg{

    width:18px;

    height:18px;

    flex:0 0 18px;

    color:#F37021;

    margin-top:2px;

}

/* Keep location aligned across all cards */

.bg-event-location{

    min-height:48px;

}

/* ===========================================================
   BUTTON
=========================================================== */

.bg-event-btn{

    display:block;

    margin-top:auto;

    width:100%;

    padding:13px 18px;

    background:#1565C0;

    color:#fff;

    text-align:center;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.25s;

}

.bg-event-btn:hover{

    background:#F37021;

    color:#fff;

}








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

/* ---------- Desktop ---------- */

@media (min-width:1201px){

    .bg-events-track{

        display:flex;

        gap:22px;

        overflow:hidden;

        transition:transform .45s ease;

    }

       .bg-event-card{

        flex:0 0 calc((100% - 44px)/3);

        max-width:calc((100% - 44px)/3);

    }

    .bg-events-nav{

        display:flex;

    }

}

/* ---------- Tablet ---------- */

@media (max-width:1200px){

.bg-events-track{

    display:flex;

    flex-wrap:nowrap;

    overflow:hidden;

    gap:22px;

}

.bg-event-card{

    flex:0 0 calc((100% - 22px)/2);

   

}

}

/* ---------- Mobile ---------- */

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

@media (max-width:767px){

.bg-home-events{

    overflow:hidden;

}

.bg-events-track{

    display:flex !important;

    flex-wrap:nowrap !important;

    gap:18px;

    overflow:hidden;

}

.bg-event-card{

    flex:none !important;

    width:100% !important;

    min-width:100% !important;

    max-width:100% !important;

}

}

/* ===========================================================
   UTILITIES
=========================================================== */

.bg-event-card *,
.bg-event-card *:before,
.bg-event-card *:after{

    box-sizing:border-box;

}

.bg-event-card img{

    max-width:100%;

}

.bg-event-btn{

    border-radius:0;

}

.bg-events-track{

    margin:0;

    padding:0;

}

.bg-event-card:last-child{

    margin-right:0;

}