body {
    font-family: 'Inter', sans-serif;
    background: #fff;
}

/* ================= HEADER ================= */
.event-header {
    background: #9a9a9a;
    color: #fff;

}



.event-date {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* ================= LEFT NAV ================= */
.event-nav {
    background: #00a6e8;
    color: #fff;
    padding: 20px;
    min-height: 100%;
}

.nav-title {
    font-weight: 700;
    margin-bottom: 15px;
}

.event-link {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.event-link span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.9;
}

.event-link.active,
.event-link:hover {
    text-decoration: underline;
}

/* ================= CONTENT ================= */
.event-content img {
    max-height: 420px;
    object-fit: cover;
}

.event-text {
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Carousel image uniform size */
#eventCarousel .carousel-item {
    height: 450px;
    /* adjust as needed */
}

#eventCarousel img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* keeps images proportional */
}

@media (max-width: 992px) {
    #eventCarousel .carousel-item {
        height: 300px;
    }
}

/* ================= MOBILE SPORTS SLIDER ================= */
@media (max-width: 767px) {



    .event-nav {
        margin-top: 20px;
    }

    .sport-card {
        position: relative;
        height: 230px;
        overflow: hidden;
    }

    .sport-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sport-title {
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(0, 166, 232, 0.95);
        color: #fff;
        padding: 6px 14px;
        font-size: 0.85rem;
        font-weight: 600;
    }
}

/* =========================================
   MOBILE LAYOUT FIX (NO CONTENT CHANGE)
========================================= */
@media (max-width: 767px) {

    /* Reset Bootstrap columns stacking */
    .event-content,
    .event-nav {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* Reorder layout */
    .event-content {
        order: 1;
        padding: 0 12px;
    }

    .event-nav {
        order: 3;
        margin-top: 25px;
        padding: 15px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    /* Event text spacing */
    .event-text {
        order: 2;
        margin-top: 15px;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* Make recent events look like cards */
    .event-link {
        background: rgba(255, 255, 255, 0.15);
        padding: 12px 14px;
        border-radius: 6px;
        margin-bottom: 12px;
    }

    .event-link span {
        font-size: 0.75rem;
    }

    /* Improve nav title spacing */
    .nav-title {
        font-size: 0.85rem;
        margin-bottom: 12px;
    }



    /* Remove unnecessary margins */
    .container-fluid.my-4 {
        margin-top: 10px !important;
    }

    /* Remove extra spacing from parent section */
    .container-fluid.my-4 {
        margin-bottom: 0 !important;
    }


}