.page-banner{background-image:linear-gradient(120deg,rgba(0,0,0,.78),rgba(0,0,0,.44) 52%,rgba(255,255,255,.12)),radial-gradient(circle at 22% 28%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 78% 72%,rgba(255,255,255,.16),transparent 34%),url("../assets/About-Bg.png")}
/* ==========================================
   PAGE BANNER
========================================== */

.page-banner{

    min-height:350px;

    background-color:#151515;
    background-image:
        linear-gradient(120deg, rgba(0,0,0,.78), rgba(0,0,0,.44) 52%, rgba(255,255,255,.12)),
        radial-gradient(circle at 22% 28%, rgba(255,255,255,.14), transparent 30%),
        radial-gradient(circle at 78% 72%, rgba(255,255,255,.16), transparent 34%),
        url("../images/event-banner.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

.page-banner{background-image:linear-gradient(120deg,rgba(0,0,0,.78),rgba(0,0,0,.44) 52%,rgba(255,255,255,.12)),radial-gradient(circle at 22% 28%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 78% 72%,rgba(255,255,255,.16),transparent 34%),url("../assets/About-Bg.png")}

.page-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.10) 1px, transparent 1px);
    background-size:64px 64px;
    opacity:.18;

}

.page-banner h1{

    position:relative;

    color:white;

    font-size:55px;

    z-index:1;

}

/* ==========================================
   EVENTS SECTION
========================================== */

.events-section{

    padding:100px 0;

    background:#f8f9fa;

}

.past-events-section{

    padding:100px 0;

    background:#202020;
    color:#fff;
    border:1px solid #363636;

}

.section-heading{

    margin-bottom:35px;

}

.section-heading p{

    margin:0 0 8px;

    color:var(--text-muted);

    font-size:13px;

    font-weight:700;

    letter-spacing:1.5px;

}

.section-heading h2{

    margin:0;

    color:#151515;

    font-size:34px;

}

.section-heading span{

    display:block;

    margin-top:8px;

    color:#777;

}

/* ==========================================
   EVENTS GRID
========================================== */

.events-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));

    gap:35px;

}

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

.event-card{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);

    transition:all .35s cubic-bezier(0.4, 0, 0.2, 1);

    display:flex;

    flex-direction:column;

    border:1px solid rgba(109, 40, 217, 0.08);

    position:relative;

}

.event-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:4px;

    background:linear-gradient(90deg, #6d28d9, #a78bfa);

    border-radius:20px 20px 0 0;

}

.event-card:hover{

    transform:translateY(-12px);

    box-shadow:0 20px 40px rgba(109, 40, 217, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color:rgba(109, 40, 217, 0.3);

}

.upcoming-events-grid > .event-card:not(.featured-event-card){

    border:1px solid #e9e5f5;

    box-shadow:0 10px 30px rgba(109, 40, 217, 0.08);

}

.upcoming-events-grid > .event-card:not(.featured-event-card) .event-content h2{

    color:#6d28d9;
}

/* The nearest event is a large, prominent feature at the top. */
.upcoming-events-grid .featured-event-card{

    grid-column:1 / -1;

    display:grid;

    grid-template-columns:minmax(0,1fr) minmax(0,1fr);

    width:min(100%, 980px);

    margin:0 auto;

    aspect-ratio:1.7 / 1;

    min-height:360px;

    max-height:560px;

    border:2px solid #9b78e8;

    border:2px solid #9b78e8;
    box-shadow:0 24px 48px rgba(109, 40, 217, 0.28), 0 12px 24px rgba(0, 0, 0, 0.12);
    background:linear-gradient(135deg, #fff 0%, #f8f5ff 100%);
    position:relative;
    overflow:hidden;
}
.featured-event-card::after{
    content:"";
    position:absolute;
    top:-50%;
    right:-50%;
    width:150%;
    height:150%;
    background:radial-gradient(circle, rgba(167, 139, 250, 0.15) 0%, transparent 70%);
    pointer-events:none;
}
.featured-event-card .event-media-trigger,
.featured-event-card .event-content{
    min-height:0;
    height:100%;

}

.featured-event-card .event-media-trigger,
.featured-event-card .event-media-trigger img,
.featured-event-card .event-media-trigger video{

    height:auto;

    min-height:0;

    aspect-ratio:1 / 1;

    object-fit:cover;

}

.featured-event-card .event-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:38px;

    position:relative;

    z-index:1;

}

.featured-event-card .event-content h2{

    font-size:clamp(30px, 4vw, 46px);

    background:linear-gradient(135deg, #6d28d9 0%, #451c83 100%);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    font-weight:700;

}

.featured-event-card .event-details{

    margin:22px 0;

    background:rgba(109, 40, 217, 0.05);

    padding:16px;

    border-radius:12px;

    border-left:4px solid #6d28d9;

}

.featured-badge{

    display:inline-flex;

    width:max-content;

    margin-bottom:14px;

    padding:8px 14px;

    border-radius:999px;

    border-radius:999px;
    background:linear-gradient(135deg, #6a38ba 0%, #7041c3 100%);
    color:#fff;

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    box-shadow:0 4px 12px rgba(109, 40, 217, 0.3);

}

.events-grid.single-item{

    display:flex;

    justify-content:center;

}

.events-grid.single-item .event-card{

    width:min(100%, 760px);

    max-width:760px;

    margin:0 auto;

}

.event-media-trigger{

    display:block;

    width:100%;

    padding:0;

    border:none;

    background:none;

    cursor:pointer;

    text-align:left;

    position:relative;

    overflow:hidden;

}

.event-media-trigger::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg, rgba(109, 40, 217, 0) 0%, rgba(109, 40, 217, 0.15) 100%);

    opacity:0;

    transition:opacity .3s ease;

    z-index:1;

}

.event-media-trigger:hover::before{

    opacity:1;

}

.event-media-trigger img,
.event-media-trigger video{

    width:100%;

    height:clamp(220px,28vw,320px);

    object-fit:cover;

    display:block;

    transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1);

}

.events-grid.single-item .event-media-trigger img,
.events-grid.single-item .event-media-trigger video{

    aspect-ratio:1 / 1;

    height:auto;

    max-height:620px;

    object-fit:cover;

}

.event-media-trigger:hover img,
.event-media-trigger:hover video{

    transform:scale(1.01);

}

.event-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px;

    opacity:0;

    visibility:hidden;

    transition:opacity .25s ease, visibility .25s ease;

    z-index:99999;

}

.event-modal.open{

    opacity:1;

    visibility:visible;

}

.event-modal-dialog{

    position:relative;

    width:min(1100px, 92vw);

    max-height:92vh;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1.25fr .9fr;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.event-modal-close{

    position:absolute;

    top:14px;

    right:16px;

    border:none;

    background:rgba(0,0,0,.5);

    color:#fff;

    width:42px;

    height:42px;

    border-radius:50%;

    font-size:28px;

    cursor:pointer;

    z-index:2;

}

.event-modal-media-wrap{

    background:#0f0f0f;

    min-height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

}

.event-modal-media-wrap img,
.event-modal-media-wrap video{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    background:#000;

}

.event-modal-content{

    padding:34px 30px 26px;

    overflow-y:auto;

}

.event-modal-badge{

    display:inline-block;

    margin-bottom:12px;

    padding:7px 12px;

    border-radius:999px;

    background:var(--black);

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

.event-modal-content h3{

    margin:0 0 12px;

    color:#111;

    font-size:clamp(1.7rem,4vw,2rem);

    line-height:1.2;

}

.event-modal-content p{

    color:#555;

    line-height:1.8;

    margin:0 0 18px;

}

.event-modal-details{

    background:#f6f6f6;

    border-radius:12px;

    padding:16px 18px;

    margin-bottom:18px;

}

.event-modal-details p{

    margin:8px 0;

    color:#2b2b2b;

}

.event-modal .ticket-btn{

    margin-top:8px;

}

/* Event actions: always high-contrast and easy to tap. */
.event-content .ticket-btn,
.event-content .free-entry{

    display:flex;

    width:100%;

    min-height:52px;

    align-items:center;

    justify-content:center;

    padding:13px 20px;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    letter-spacing:.04em;

    text-align:center;

    text-decoration:none;

    text-transform:uppercase;

    transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);

    border:none;

    cursor:pointer;

}

.event-content .ticket-btn{

    background:#9b78e8;

    color:#fff;

    border:2px solid #9b78e8;
    box-shadow:0 8px 18px rgba(155,120,232,.26), 0 6px 20px rgba(17, 17, 17, 0.28);

}

.event-content .ticket-btn:hover{

    background:#7654b5;
    border-color:#7654b5;
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(0, 0, 0, 0.32);

}

.event-content .ticket-btn:active{

    transform:translateY(0);

}

.event-content .free-entry{

    background:linear-gradient(135deg, #f5f5f5 0%, #e7e7e7 100%);

    color:#111;

    border:2px solid #111;

    box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);

}

.event-content .free-entry:hover{

    background:linear-gradient(135deg, #ffffff 0%, #e7e7e7 100%);

    border-color:#000;

    box-shadow:0 8px 20px rgba(0, 0, 0, 0.18);

}

.event-content .ticket-btn::before{

    content:"TICKETS";

    margin-right:9px;

    padding-right:9px;

    border-right:1px solid rgba(255,255,255,.45);

    font-size:11px;

    letter-spacing:.1em;

}

/* Bright event titles remain readable against the white event cards. */
.event-content{

    padding:24px;

    flex:1;

    display:flex;

    flex-direction:column;

}

.event-content h2{

    margin:0 0 12px 0;
    color:#6d28d9;

    font-size:24px;

    font-weight:700;

    line-height:1.3;

    text-shadow:0 1px 0 rgba(255,255,255,.9);

}

.event-content p{

    margin:0 0 16px 0;

    color:#555;

    font-size:15px;

    line-height:1.6;

}

.event-details{

    flex:1;

    display:flex;

    flex-direction:column;

    margin:12px 0 16px 0;

    padding:14px;

    background:linear-gradient(135deg, rgba(109, 40, 217, 0.04) 0%, rgba(167, 139, 250, 0.04) 100%);

    border-radius:10px;

    border-left:3px solid #6d28d9;

}

.event-details p{

    margin:6px 0;

    color:#333;

    font-size:14px;

}

.event-details strong{

    color:#7654b5;

    font-weight:600;

}

.event-content .free-entry::before{

    content:"✓";

    margin-right:9px;

    font-size:18px;

}

.past-badge{

    display:inline-flex;

    width:max-content;

    margin-bottom:14px;

    padding:8px 14px;

    border-radius:999px;

    background:linear-gradient(135deg, #d1d5db 0%, #e5e7eb 100%);

    color:#374151;

    font-size:11px;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    box-shadow:0 4px 12px rgba(55, 65, 81, 0.15);

}

.past-events-section .events-grid{

    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));

    gap:22px;

}

.past-event-card{

    opacity:0.85;

    max-width:320px;

    width:100%;

    margin:0 auto;

}

.past-event-card .event-content{

    padding:18px;

}

.past-event-card .event-content h2{

    font-size:20px;

}

.past-event-card .event-content p{

    font-size:14px;

}

.past-event-card .event-details{

    margin:10px 0 12px;

    padding:10px 12px;

}

.past-event-card .event-details p{

    font-size:13px;

}

.past-event-card .event-media-trigger img,
.past-event-card .event-media-trigger video{

    height:180px;

    min-height:180px;

    object-fit:cover;

}

.past-event-card:hover{

    opacity:1;

}

/* ==========================================
   NO EVENTS
========================================== */

.no-events{

    text-align:center;

    font-size:30px;

    color:#888;

    padding:80px 0;

}

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

@media(max-width:768px){

    .page-banner{

        min-height:280px;
        padding:100px 20px 60px;

    }

    .page-banner h1{

        font-size:40px;
        text-align:center;

    }

    .events-grid{

        grid-template-columns:1fr;

    }

    .upcoming-events-grid .featured-event-card{

        grid-column:auto;

        grid-template-columns:1fr;

        min-height:0;

    }

    .featured-event-card .event-media-trigger,
    .featured-event-card .event-media-trigger img,
    .featured-event-card .event-media-trigger video{

        min-height:0;

        height:300px;

    }

    .featured-event-card .event-content{

        padding:26px;

    }

    .event-modal_dialog{

        grid-template-columns:1fr;

        max-height:90vh;

    }

    .event-modal-media-wrap{

        min-height:280px;

    }

    .event-modal-content{

        padding:26px 20px 22px;

    }

    .event-modal-content h3{

        font-size:26px;

    }

}

.page-banner{background-image:linear-gradient(120deg,rgba(0,0,0,.78),rgba(0,0,0,.44) 52%,rgba(255,255,255,.12)),radial-gradient(circle at 22% 28%,rgba(255,255,255,.14),transparent 30%),radial-gradient(circle at 78% 72%,rgba(255,255,255,.16),transparent 34%),url("../assets/About-Bg.png")}