/* =========================================================
   AGGARWAL COLLEGE
   EVENTS 2026
   PREMIUM UNIVERSITY DESIGN
========================================================= */


:root{

    --maroon:#7A0D16;
    --maroon-dark:#52070e;
    --maroon-deep:#35050a;

    --gold:#C89B3C;
    --gold-light:#E7C96D;

    --cream:#FBF8F3;
    --white:#ffffff;

    --text:#241e21;
    --muted:#71696b;

    --border:#e9e1da;

    --shadow:
        0 12px 35px rgba(70,10,20,.07);

    --shadow-hover:
        0 22px 50px rgba(70,10,20,.15);

}


/* =========================================================
   RESET
========================================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:
        "DM Sans",
        sans-serif;

    background:
        var(--cream);

    color:
        var(--text);

    overflow-x:hidden;

}


a{

    text-decoration:none;

    color:inherit;

}


button,
input{

    font-family:inherit;

}


/* =========================================================
   HERO
========================================================= */

.events-hero{

    position:relative;

    overflow:hidden;

    min-height:600px;

    color:white;

    background:

        radial-gradient(
            circle at 75% 45%,
            rgba(200,155,60,.13),
            transparent 25%
        ),

        linear-gradient(
            115deg,
            #39050b,
            #650811 52%,
            #7A0D16
        );

}


.events-hero::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.06;

    background-image:

        linear-gradient(
            135deg,
            rgba(255,255,255,.6) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

}


.hero-container{

    width:
        min(1400px,92%);

    min-height:600px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1fr .85fr;

    align-items:center;

    gap:80px;

    position:relative;

    z-index:2;

    padding:
        70px 0;

}


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

.hero-content{

    max-width:720px;

}


.hero-label{

    display:flex;

    align-items:center;

    gap:11px;

    color:
        var(--gold-light);

    font-size:11px;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:22px;

}


.label-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:
        var(--gold);

    box-shadow:
        0 0 0 5px
        rgba(200,155,60,.12);

}


.hero-content h1{

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(48px,5vw,76px);

    line-height:1.03;

    font-weight:600;

    letter-spacing:-2px;

}


.hero-content h1 span{

    display:block;

    color:
        var(--gold-light);

}


.hero-content p{

    max-width:680px;

    margin-top:28px;

    color:
        rgba(255,255,255,.76);

    font-size:16px;

    line-height:1.8;

}


.hero-line{

    width:75px;

    height:3px;

    background:
        var(--gold);

    margin:
        30px 0;

}


/* =========================================================
   HERO STATS
========================================================= */

.hero-stats{

    display:flex;

    gap:0;

}


.hero-stat{

    display:flex;

    align-items:center;

    gap:13px;

    padding:
        0 30px;

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

}


.hero-stat:first-child{

    padding-left:0;

}


.hero-stat:last-child{

    border:none;

}


.hero-stat-icon{

    width:45px;

    height:45px;

    border-radius:50%;

    display:grid;

    place-items:center;

    color:
        var(--gold-light);

    border:
        1px solid
        rgba(200,155,60,.45);

    background:
        rgba(255,255,255,.05);

}


.hero-stat strong{

    display:block;

    font-family:
        "Playfair Display",
        serif;

    font-size:25px;

}


.hero-stat span{

    display:block;

    font-size:11px;

    color:
        rgba(255,255,255,.62);

}


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

.hero-visual{

    position:relative;

    display:flex;

    justify-content:center;

}


.hero-photo{

    width:520px;

    height:440px;

    position:relative;

    overflow:hidden;

    border-radius:
        110px 28px 110px 28px;

    border:
        2px solid
        var(--gold);

    transform:
        rotate(1.5deg);

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

}


.hero-photo::after{

    content:"";

    position:absolute;

    inset:10px;

    border:
        1px solid
        rgba(255,255,255,.4);

    border-radius:
        100px 20px 100px 20px;

    z-index:4;

    pointer-events:none;

}


.hero-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease;

}


.hero-photo:hover img{

    transform:
        scale(1.08);

}


.hero-photo-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(30,0,5,.03),
            rgba(30,0,5,.55)
        );

    z-index:2;

}


.hero-photo-text{

    position:absolute;

    top:30px;

    right:35px;

    z-index:5;

    text-align:right;

}


.hero-photo-text span{

    display:block;

    font-size:10px;

    letter-spacing:3px;

}


.hero-photo-text strong{

    font-family:
        "Playfair Display",
        serif;

    color:
        var(--gold-light);

    font-size:18px;

}


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

.hero-floating-card{

    position:absolute;

    z-index:6;

    bottom:25px;

    left:25px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        14px 20px;

    border-radius:14px;

    background:
        rgba(255,255,255,.96);

    color:
        var(--text);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.2);

    transform:
        rotate(-2deg);

}


.floating-icon{

    width:40px;

    height:40px;

    display:grid;

    place-items:center;

    border-radius:10px;

    background:
        var(--maroon);

    color:
        var(--gold-light);

}


.hero-floating-card strong{

    display:block;

    font-size:14px;

}


.hero-floating-card span{

    display:block;

    font-size:10px;

    color:
        var(--muted);

    margin-top:2px;

}


/* =========================================================
   HERO DECORATION
========================================================= */

.hero-circle-1{

    position:absolute;

    width:450px;

    height:450px;

    right:-250px;

    top:-220px;

    border-radius:50%;

    border:
        1px solid
        rgba(200,155,60,.3);

}


.hero-circle-2{

    position:absolute;

    width:70px;

    height:70px;

    right:42%;

    bottom:20px;

    border-radius:50%;

    background:
        var(--gold);

    opacity:.8;

}


/* =========================================================
   TOOLS
========================================================= */

.events-tools{

    position:relative;

    z-index:10;

    margin-top:-35px;

}


.tools-container{

    width:
        min(1350px,92%);

    margin:auto;

    padding:10px;

    background:white;

    border-radius:20px;

    box-shadow:
        0 20px 55px
        rgba(60,10,20,.12);

}


.search-wrapper{

    width:100%;

    height:58px;

    position:relative;

    display:flex;

    align-items:center;

}


.search-wrapper > i{

    position:absolute;

    left:22px;

    color:
        var(--maroon);

    font-size:16px;

}


.search-wrapper input{

    width:100%;

    height:100%;

    border:none;

    outline:none;

    padding:
        0 60px 0 55px;

    border-radius:14px;

    background:
        #faf8f5;

    color:
        var(--text);

    font-size:14px;

}


.search-wrapper input:focus{

    box-shadow:
        inset 0 0 0 1px
        rgba(122,13,22,.2);

}


#clearSearch{

    position:absolute;

    right:15px;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:
        transparent;

    color:
        #9a9192;

    cursor:pointer;

}


#clearSearch:hover{

    background:
        rgba(122,13,22,.08);

    color:
        var(--maroon);

}


/* =========================================================
   FILTER BUTTONS
========================================================= */

.category-filter{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    padding:9px 4px 4px;

}


.filter-btn{

    border:none;

    cursor:pointer;

    display:flex;

    align-items:center;

    gap:7px;

    padding:
        10px 15px;

    border-radius:30px;

    background:
        transparent;

    color:
        #5b5355;

    font-size:11px;

    font-weight:700;

    transition:.3s ease;

}


.filter-btn i{

    color:
        var(--maroon);

}


.filter-btn:hover{

    background:
        rgba(122,13,22,.07);

}


.filter-btn.active{

    background:
        var(--maroon);

    color:white;

    box-shadow:
        0 6px 18px
        rgba(122,13,22,.18);

}


.filter-btn.active i{

    color:
        var(--gold-light);

}


/* =========================================================
   MAIN
========================================================= */

.events-section{

    width:
        min(1400px,92%);

    margin:auto;

    padding:
        95px 0 110px;

}


/* =========================================================
   HEADING
========================================================= */

.section-heading{

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:80px;

    align-items:end;

    margin-bottom:35px;

}


.section-kicker{

    display:flex;

    align-items:center;

    gap:10px;

    color:
        var(--maroon);

    font-size:10px;

    font-weight:800;

    letter-spacing:3px;

    margin-bottom:12px;

}


.section-kicker span{

    width:30px;

    height:2px;

    background:
        var(--gold);

}


.section-heading h2{

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(38px,4vw,58px);

    line-height:1.1;

}


.section-heading h2 span{

    color:
        var(--maroon);

}


.section-heading > p{

    color:
        var(--muted);

    font-size:14px;

    line-height:1.8;

    max-width:650px;

}


/* =========================================================
   RESULT BAR
========================================================= */

.result-bar{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:25px;

    color:
        var(--muted);

    font-size:11px;

    font-weight:600;

}


#eventCount{

    color:
        var(--maroon);

    font-size:18px;

    font-weight:800;

}


.result-line{

    flex:1;

    height:1px;

    background:
        var(--border);

}


.year-label{

    display:flex;

    align-items:center;

    gap:7px;

    color:
        var(--maroon);

}


/* =========================================================
   EVENT GRID
========================================================= */

.events-grid{

    display:grid;

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

    gap:22px;

}


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

.event-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:315px;

    padding:
        27px 27px 22px;

    overflow:hidden;

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

    border-radius:20px;

    background:white;

    box-shadow:
        var(--shadow);

    opacity:0;

    transform:
        translateY(25px);

    transition:

        opacity .65s ease,

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}


.event-card.visible{

    opacity:1;

    transform:
        translateY(0);

}


.event-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow-hover);

    border-color:
        rgba(122,13,22,.22);

}


/* =========================================================
   CARD BACKGROUND SHAPE
========================================================= */

.event-card::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:
        rgba(200,155,60,.09);

    transition:
        transform .5s ease;

}


.event-card:hover::before{

    transform:
        scale(2);

}


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

.card-number{

    position:absolute;

    right:20px;

    top:20px;

    font-family:
        "Playfair Display",
        serif;

    font-size:14px;

    color:
        #d5ccc7;

    font-weight:700;

}


/* =========================================================
   ICON
========================================================= */

.event-icon{

    width:52px;

    height:52px;

    display:grid;

    place-items:center;

    border-radius:14px;

    background:
        rgba(122,13,22,.08);

    color:
        var(--maroon);

    font-size:24px;

    margin-bottom:17px;

    position:relative;

    z-index:2;

    transition:.35s ease;

}


.event-card:hover .event-icon{

    background:
        var(--maroon);

    color:
        var(--gold-light);

    transform:
        rotate(-4deg)
        scale(1.06);

}


/* =========================================================
   CATEGORY
========================================================= */

.event-category{

    width:max-content;

    padding:
        5px 9px;

    border-radius:5px;

    background:
        #f7f1e5;

    color:
        #886719;

    font-size:8px;

    font-weight:800;

    letter-spacing:1.2px;

    text-transform:uppercase;

    margin-bottom:10px;

    position:relative;

    z-index:2;

}


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

.event-card h3{

    position:relative;

    z-index:2;

    font-family:
        "Playfair Display",
        serif;

    font-size:21px;

    line-height:1.3;

    color:
        #282124;

    margin-bottom:10px;

    transition:.3s ease;

}


.event-card:hover h3{

    color:
        var(--maroon);

}


/* =========================================================
   DESCRIPTION
========================================================= */

.event-card p{

    position:relative;

    z-index:2;

    color:
        var(--muted);

    font-size:12px;

    line-height:1.65;

    margin-bottom:22px;

}


/* =========================================================
   BOTTOM
========================================================= */

.card-bottom{

    position:relative;

    z-index:2;

    margin-top:auto;

    padding-top:17px;

    border-top:
        1px solid
        #eee8e3;

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:
        var(--maroon);

    font-size:11px;

    font-weight:800;

}


.card-arrow{

    width:35px;

    height:35px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        var(--maroon);

    color:white;

    transition:.35s ease;

}


.event-card:hover .card-arrow{

    background:
        var(--gold);

    color:
        #3e0b0e;

    transform:
        translateX(5px);

}


/* =========================================================
   NO RESULTS
========================================================= */

.no-results{

    display:none;

    text-align:center;

    padding:
        70px 20px;

}


.no-results.show{

    display:block;

}


.no-results-icon{

    width:65px;

    height:65px;

    margin:0 auto 18px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        rgba(122,13,22,.08);

    color:
        var(--maroon);

    font-size:25px;

}


.no-results h3{

    font-family:
        "Playfair Display",
        serif;

    font-size:25px;

    color:
        var(--maroon);

}


.no-results p{

    margin-top:7px;

    color:
        var(--muted);

    font-size:13px;

}


/* =========================================================
   CTA
========================================================= */

.events-cta{

    width:
        min(1400px,92%);

    margin:
        0 auto 100px;

    padding:
        45px 55px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    border:
        2px solid
        var(--gold);

    border-radius:24px;

    color:white;

    background:
        linear-gradient(
            110deg,
            #4b060d,
            #7A0D16
        );

}


.events-cta::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    right:-180px;

    top:-220px;

    border-radius:50%;

    border:
        1px solid
        rgba(200,155,60,.2);

}


.cta-label{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:9px;

    font-weight:800;

    letter-spacing:3px;

    color:
        var(--gold-light);

    margin-bottom:9px;

}


.cta-label span{

    width:25px;

    height:2px;

    background:
        var(--gold);

}


.cta-content h2{

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(28px,3vw,42px);

    line-height:1.2;

}


.cta-content h2 span{

    color:
        var(--gold-light);

}


.cta-content p{

    color:
        rgba(255,255,255,.7);

    font-size:13px;

    margin-top:8px;

}


.cta-icon{

    width:65px;

    height:65px;

    display:grid;

    place-items:center;

    border-radius:50%;

    background:
        var(--gold);

    color:
        var(--maroon-dark);

    font-size:20px;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .hero-container{

        grid-template-columns:
            1fr .8fr;

        gap:35px;

    }


    .hero-photo{

        width:430px;

        height:390px;

    }


    .events-grid{

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

    }


    .category-filter{

        justify-content:center;

    }

}


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

@media(max-width:800px){

    .events-hero{

        min-height:auto;

    }


    .hero-container{

        grid-template-columns:1fr;

        text-align:center;

        padding:
            65px 0 95px;

    }


    .hero-content{

        margin:auto;

    }


    .hero-label{

        justify-content:center;

    }


    .hero-content p{

        margin-left:auto;
        margin-right:auto;

    }


    .hero-line{

        margin:
            25px auto;

    }


    .hero-stats{

        justify-content:center;

    }


    .hero-visual{

        min-height:400px;

    }


    .hero-photo{

        width:
            min(520px,90%);

        height:390px;

    }


    .section-heading{

        grid-template-columns:1fr;

        gap:15px;

    }


    .events-cta{

        text-align:center;

        flex-direction:column;

        padding:
            40px 25px;

    }


    .cta-label{

        justify-content:center;

    }

}


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

@media(max-width:600px){

    .hero-content h1{

        font-size:43px;

        letter-spacing:-1px;

    }


    .hero-content p{

        font-size:13px;

        line-height:1.7;

    }


    .hero-stats{

        display:grid;

        grid-template-columns:
            1fr 1fr;

        gap:20px;

    }


    .hero-stat{

        padding:0;

        border:none;

        justify-content:center;

        text-align:left;

    }


    .hero-stat:last-child{

        grid-column:
            1 / -1;

    }


    .hero-photo{

        width:92%;

        height:320px;

        border-radius:
            75px 20px 75px 20px;

    }


    .hero-photo::after{

        border-radius:
            65px 13px 65px 13px;

    }


    .hero-floating-card{

        left:15px;

        bottom:15px;

        padding:
            11px 14px;

    }


    .events-tools{

        margin-top:-28px;

    }


    .tools-container{

        width:94%;

    }


    .category-filter{

        display:grid;

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

    }


    .filter-btn{

        justify-content:center;

        padding:
            10px 7px;

        font-size:9px;

    }


    .events-section{

        width:90%;

        padding:
            65px 0 75px;

    }


    .section-heading h2{

        font-size:38px;

    }


    .section-heading > p{

        font-size:12px;

    }


    .result-bar{

        margin-top:30px;

    }


    .events-grid{

        grid-template-columns:1fr;

        gap:17px;

    }


    .event-card{

        min-height:300px;

        padding:
            23px;

        border-radius:17px;

    }


    .event-card h3{

        font-size:20px;

    }


    .event-card p{

        font-size:11px;

    }


    .events-cta{

        width:90%;

        margin-bottom:70px;

        border-radius:19px;

    }

}


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

@media(max-width:400px){

    .hero-content h1{

        font-size:36px;

    }


    .hero-stats{

        grid-template-columns:1fr;

    }


    .hero-stat:last-child{

        grid-column:auto;

    }


    .hero-stat{

        justify-content:center;

        text-align:center;

    }


    .category-filter{

        grid-template-columns:1fr 1fr;

    }


    .filter-btn{

        font-size:8px;

    }


    .search-wrapper{

        height:52px;

    }


    .section-heading h2{

        font-size:34px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *{

        scroll-behavior:auto !important;

        animation-duration:
            .01ms !important;

        transition-duration:
            .01ms !important;

    }

}