/* Swiper classes */
.my-events-swiper {
    --swiper-navigation-size: 72px;
    position: relative;
    padding: 0 48px;
}

    /* If variable isn’t taking effect in your build, hard-set dimensions */
    .my-events-swiper .swiper-button-prev,
    .my-events-swiper .swiper-button-next {
        width: 72px !important;
        height: 72px !important;
        display: grid;
        place-items: center;
    }

    .my-events-swiper .swiper-button-prev {
        left: -20px;
    }
    /* adjust to taste */
    .my-events-swiper .swiper-button-next {
        right: -20px;
    }
        /* adjust to t

        /* Hide Swiper's default pseudo icon so only your SVG shows */
        .my-events-swiper .swiper-button-prev::after,
        .my-events-swiper .swiper-button-next::after {
            content: none !important;
        }

        /* Size your SVG to fill the button */
        .my-events-swiper .swiper-button-prev .nav-icon,
        .my-events-swiper .swiper-button-next .nav-icon {
            width: 60px; /* a bit smaller than button to add padding */
            height: 60px;
            fill: #023250;
        }

    /* Ensure slides participate in equal-height layout */
    .my-events-swiper .swiper-wrapper {
        align-items: stretch; /* make all slides the same height */
    }

    /* Let the slide be a flex container so the card can stretch */
    .my-events-swiper .swiper-slide {
        display: flex;
    }

        /* Make your card fill the full slide height */
        .my-events-swiper .swiper-slide .card {
            display: flex; /* so body can flex */
            flex-direction: column; /* stack image + body */
            width: 100%;
            height: 100%; /* fill slide height */
        }

            /* Ensure the card body grows to push CTA to consistent place */
            .my-events-swiper .swiper-slide .card .card-body {
                display: flex;
                flex-direction: column;
                flex-grow: 1;
            }

            /* Keep the CTA pinned consistently at the bottom */
            .my-events-swiper .swiper-slide .card .btn {
                margin-top: auto;
            }

/* Optional: normalize image height (keeps header areas uniform) */
.card-img-top-event {
    width: 100%;
    height: 260px; /* or 220px; pick a fixed height that suits your images */
    object-fit: contain; /* or 'contain' if you want full image in frame */
    display: block;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


.swiper-slide.no-events-slide {
    width: 100% !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}