body {
}

/* =========================
   OUR SESSIONS – HERO / BREADCRUMB
========================= */

.sessions-breadcrumb {
    position: relative;
    width: 100%;
    height: 380px;
    background: url("/images/breadcrumb/session-badminton.png") center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Dark overlay */
    .sessions-breadcrumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
    }

/* Content */
.sessions-breadcrumb-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .sessions-breadcrumb-content h1 {
        font-size: 48px;
        font-weight: 700;
        color: #ffffff;
        padding: 14px 40px;
        background: rgba(0, 0, 0, 0.55);
        border-radius: 6px;
        letter-spacing: 1px;
    }

/* Responsive */
@media (max-width: 768px) {
    .sessions-breadcrumb {
        height: 260px;
    }

    .sessions-breadcrumb-content h1 {
        font-size: 32px;
        padding: 10px 24px;
    }
}



/* =========================
   SESSION FLIP LAYOUT
========================= */

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

.sessions-breadcrumb {
    height: 380px;
    background: url('/images/breadcrumb/session-badminton-hero.png') center / cover no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .sessions-breadcrumb::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.65);
    }

    .sessions-breadcrumb h1 {
        position: relative;
        color: #fff;
        font-size: 48px;
        background: rgba(0,0,0,0.6);
        padding: 14px 40px;
        border-radius: 6px;
    }

/* =========================
   SESSION LAYOUT
========================= */

.sessions-section {
    max-width: 1200px;
    margin: 80px auto;
}

.session-row {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    gap: 40px;
}

    .session-row.reverse {
        flex-direction: row-reverse;
    }

/* IMAGE (CONSTANT SIZE) */
.session-image {
    width: 50%;
}

    .session-image img {
        width: 100%;
        height: 420px;
        object-fit: cover;
        border-radius: 6px;
    }

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

.session-card {
    width: 50%;
    height: 420px;
    perspective: 1200px;
}

.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

.flip-card:hover .flip-inner {
    transform: rotateY(180deg);
}

.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* FRONT */
.flip-front {
    background: #000;
    color: #fff;
}

    .flip-front h2 {
        font-size: 36px;
        letter-spacing: 2px;
    }

/* BACK */
.flip-back {
    background: #000;
    color: #fff;
    padding: 40px;
    transform: rotateY(180deg);
}

    .flip-back.light {
        background: #f5f5f5;
        color: #000;
    }

    .flip-back ul {
        list-style: disc;
        padding-left: 20px;
    }

    .flip-back li {
        margin-bottom: 10px;
        font-size: 15px;
    }

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

@media (max-width: 992px) {
    .session-row {
        flex-direction: column;
    }

    /* 🔥 Force Image Always First */
    .session-image {
        order: 1;
    }

    .session-card {
        order: 2;
    }

    .session-image,
    .session-card {
        width: 100%;
    }

        .session-image img,
        .session-card {
            height: 320px;
        }
}