/* =====================================================
   CLUB STORY SLIDER
===================================================== */

.club-story-slider {
    position: relative;

    width: 100%;
    height: 300px;

    overflow: hidden;

    background: #ffffff;

    border-radius: 24px;
}


/* =====================================================
   SLIDER TRACK
===================================================== */

.club-story-track {
    display: flex;

    /*
       4 slides total:
       Ping-pong sequence: 1 → 2 → 3 → 4 → 3 → 2 → (1)
    */
    width: 400%;
    height: 100%;

    animation: clubStorySlide 18s infinite ease-in-out;
}


/* =====================================================
   EACH SLIDE
===================================================== */

.club-story-slide {
    /*
       1 / 4 = 25%
    */
    flex: 0 0 25%;

    width: 25%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #ffffff;

    border-radius: 24px;
}


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

.club-story-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 24px;
}


/* =====================================================
   SLIDE ANIMATION

   Sequence: 1 → 2 → 3 → 4 → 3 → 2 → 1 (smooth ping-pong)
   Equal transition time & equal hold time for all steps!
===================================================== */

@keyframes clubStorySlide {

    /* =========================================
       IMAGE 1
    ========================================== */
    0%,
    12% {
        transform: translateX(0);
    }

    /* =========================================
       IMAGE 2
    ========================================== */
    16.6667%,
    28.6667% {
        transform: translateX(-25%);
    }

    /* =========================================
       IMAGE 3
    ========================================== */
    33.3333%,
    45.3333% {
        transform: translateX(-50%);
    }

    /* =========================================
       IMAGE 4
    ========================================== */
    50%,
    62% {
        transform: translateX(-75%);
    }

    /* =========================================
       IMAGE 3 REVERSE
    ========================================== */
    66.6667%,
    78.6667% {
        transform: translateX(-50%);
    }

    /* =========================================
       IMAGE 2 REVERSE
    ========================================== */
    83.3333%,
    95.3333% {
        transform: translateX(-25%);
    }

    /* =========================================
       LOOP BACK TO IMAGE 1
    ========================================== */
    100% {
        transform: translateX(0);
    }

}


/* =====================================================
   DOT CONTAINER
===================================================== */

.club-story-dots {
    position: absolute;

    left: 50%;
    bottom: 14px;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 10px;

    z-index: 20;
}


/* =====================================================
   DOT
===================================================== */

.club-story-dot {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 9999px;

    background: #d1d5db;

    opacity: 0.7;
}


/* =====================================================
   DOT ANIMATIONS (MATCHING EACH IMAGE STEP)
===================================================== */

.club-story-dot.dot-1 {
    animation: clubStoryDot1 18s infinite;
}

.club-story-dot.dot-2 {
    animation: clubStoryDot2 18s infinite;
}

.club-story-dot.dot-3 {
    animation: clubStoryDot3 18s infinite;
}

.club-story-dot.dot-4 {
    animation: clubStoryDot4 18s infinite;
}


/* DOT 1 ACTIVE WHEN IMAGE 1 IS VISIBLE */
@keyframes clubStoryDot1 {
    0%,
    12% {
        background: #ffffff;
        opacity: 1;
    }

    16.6667%,
    95.3333% {
        background: #d1d5db;
        opacity: 0.7;
    }

    100% {
        background: #ffffff;
        opacity: 1;
    }
}

/* DOT 2 ACTIVE WHEN IMAGE 2 IS VISIBLE */
@keyframes clubStoryDot2 {
    0%,
    12% {
        background: #d1d5db;
        opacity: 0.7;
    }

    16.6667%,
    28.6667% {
        background: #ffffff;
        opacity: 1;
    }

    33.3333%,
    78.6667% {
        background: #d1d5db;
        opacity: 0.7;
    }

    83.3333%,
    95.3333% {
        background: #ffffff;
        opacity: 1;
    }

    100% {
        background: #d1d5db;
        opacity: 0.7;
    }
}

/* DOT 3 ACTIVE WHEN IMAGE 3 IS VISIBLE */
@keyframes clubStoryDot3 {
    0%,
    28.6667% {
        background: #d1d5db;
        opacity: 0.7;
    }

    33.3333%,
    45.3333% {
        background: #ffffff;
        opacity: 1;
    }

    50%,
    62% {
        background: #d1d5db;
        opacity: 0.7;
    }

    66.6667%,
    78.6667% {
        background: #ffffff;
        opacity: 1;
    }

    83.3333%,
    100% {
        background: #d1d5db;
        opacity: 0.7;
    }
}

/* DOT 4 ACTIVE WHEN IMAGE 4 IS VISIBLE */
@keyframes clubStoryDot4 {
    0%,
    45.3333% {
        background: #d1d5db;
        opacity: 0.7;
    }

    50%,
    62% {
        background: #ffffff;
        opacity: 1;
    }

    66.6667%,
    100% {
        background: #d1d5db;
        opacity: 0.7;
    }
}


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

@media (max-width: 374px) {

    .club-story-slider {
        height: 300px;
        border-radius: 16px;
    }

    .club-story-slide,
    .club-story-slide img {
        border-radius: 16px;
    }

    .club-story-dots {
        bottom: 10px;
        gap: 7px;
    }

    .club-story-dot {
        width: 7px;
        height: 7px;
    }
}


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

@media (min-width: 375px) and (max-width: 639px) {

    .club-story-slider {
        height: 340px;
        border-radius: 20px;
    }

    .club-story-slide,
    .club-story-slide img {
        border-radius: 20px;
    }
}


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

@media (min-width: 640px) {

    .club-story-slider {
        height: 400px;
        border-radius: 24px;
    }

    .club-story-slide,
    .club-story-slide img {
        border-radius: 24px;
    }
}


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

@media (min-width: 768px) {

    .club-story-slider {
        height: 500px;
    }
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 1024px) {

    .club-story-slider {
        height: 520px;
    }

    .club-story-slide img {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;

        border-radius: 24px;
    }
}


/* =====================================================
   LARGE DESKTOP
===================================================== */

@media (min-width: 1536px) {

    .club-story-slider {
        height: 540px;
    }
}


/* =====================================================
   EXTRA LARGE DESKTOP
===================================================== */

@media (min-width: 1800px) {

    .club-story-slider {
        height: 560px;
    }
}