/* =========================================================
   CALENDAR INLINE LINK
========================================================= */

.calendar-inline-link {
    color: inherit !important;
    text-decoration: none !important;
    white-space: nowrap;

    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.calendar-inline-link:hover,
.calendar-inline-link:focus,
.calendar-inline-link:visited {
    color: inherit !important;
    text-decoration: none !important;
}

.calendar-inline-link img {
    display: inline-block;

    width: 18px;
    height: 18px;

    margin-left: 4px;

    vertical-align: -3px;
}


/* =========================================================
   EVENTS SECTION
========================================================= */

.events-section {
    position: relative;
    overflow: hidden;
}


/* =========================================================
   EVENT PILLS — BASE
========================================================= */

.event-pills-viewport {
    position: relative;

    width: 100%;

    overflow: visible;
}


/* Kogu pillide rida */
.event-pills-track {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    align-items: flex-start;
    justify-content: space-between;

    width: 100%;

    overflow: visible;
}


/* =========================================================
   ÜHE PILLI WRAPPER
========================================================= */

.event-pill-item {
    position: relative;

    flex: 0 0 auto;
    width: auto;

    --drop: 0px;
    --rotate: 0deg;

    transform: translateY(var(--drop));
}


/* =========================================================
   RIPUTUSJOON
========================================================= */

.event-pill-item::before {
    content: "";

    position: absolute;

    left: 50%;

    /*
     * Joon on meelega väga pikk.
     * .events-section lõikab selle täpselt
     * rohelise sektsiooni ülaservast ära.
     */
    top: -100vh;
    height: 100vh;

    width: 3px;

    z-index: 0;

    background: rgba(29, 127, 44, 0.55);

    transform: translateX(-50%);

    pointer-events: none;
}


/* =========================================================
   ROHELINE PILL
========================================================= */

.event-pill {
    position: relative;
    z-index: 2;

    flex: 0 0 auto;
    width: auto;

    white-space: nowrap;

    transform: rotate(var(--rotate));
    transform-origin: center;

    /*
     * Eraldi scale-property.
     * Nii rotation ja scale ei sega teineteist.
     */
    scale: 1;

    transition:
        transform 0.3s ease,
        scale 0.3s ease;
}


/* Pealkiri jääb joonte peale */
.events-title {
    position: relative;
    z-index: 5;
}


/* JS kloonid ainult mobile jaoks */
.event-pill-clone {
    display: none;
}


/* =========================================================
   TABLET + DESKTOP
   768px+
========================================================= */

@media (min-width: 768px) {

    .event-pills-track {

        /*
         * Stabiilne ülesnihutus.
         */
        --track-lift: 150px;


        /*
         * Wrapperid jaotatakse kogu laiuse peale.
         * Visuaalne õhk tekitatakse tabletis scale abil.
         */
        gap: 0;

        justify-content: space-between;


        padding-top: 0;


        /*
         * Pillide ja alumise teksti vahe.
         */
        padding-bottom: clamp(
            75px,
            5vw,
            95px
        );


        transform:
            translateY(
                calc(0px - var(--track-lift))
            );


        margin-bottom:
            calc(0px - var(--track-lift));
    }


    .event-pill-item::before {
        top: -100vh;
        height: 100vh;

        width: clamp(
            2px,
            0.2vw,
            3px
        );
    }


    /* =====================================================
       PILL 1 — Sünnipäevad
    ===================================================== */

    .event-pill-item:nth-child(1) {
        --drop: clamp(
            58px,
            calc(6.25vw + 10px),
            100px
        );

        --rotate: 0deg;
    }


    /* =====================================================
       PILL 2 — Koolidele
    ===================================================== */

    .event-pill-item:nth-child(2) {
        --drop: clamp(
            58px,
            calc(6.25vw + 10px),
            100px
        );

        --rotate: 0deg;
    }


    /* =====================================================
       PILL 3 — Firmaüritused
    ===================================================== */

    .event-pill-item:nth-child(3) {
        --drop: clamp(
            42px,
            calc(4.464vw + 7.714px),
            72px
        );

        --rotate: -8deg;
    }


    /* =====================================================
       PILL 4 — Stiilipeod
    ===================================================== */

    .event-pill-item:nth-child(4) {
        --drop: clamp(
            15px,
            calc(1.935vw + 0.143px),
            28px
        );

        --rotate: -19deg;
    }


    /* =====================================================
       PILL 5 — Lastepeod
    ===================================================== */

    .event-pill-item:nth-child(5) {
        --drop: 0px;
        --rotate: 0deg;
    }


    /* =====================================================
       PILL 6 — Piknikud
    ===================================================== */

    .event-pill-item:nth-child(6) {
        --drop: 3px;
        --rotate: 0deg;
    }


    /* =====================================================
       PILL 7 — Etendused
    ===================================================== */

    .event-pill-item:nth-child(7) {
        --drop: clamp(
            20px,
            calc(1.488vw + 8.571px),
            30px
        );

        --rotate: 8deg;
    }
}


/* =========================================================
   TABLET — KITSAM
   768–899px
========================================================= */

@media (min-width: 768px) and (max-width: 899px) {

    /*
     * Väiksem tablet:
     *
     * wrapperid jäävad samasse kohta,
     * pill muutub ainult visuaalselt väiksemaks.
     *
     * See tekitab päriselt nähtavad vahed.
     */
    .event-pill {
        scale: 0.78;
    }


    /*
     * Natuke vähem ruumi pillide ja teksti vahel.
     */
    .event-pills-track {
        padding-bottom: 65px;
    }
}


/* =========================================================
   TABLET — LAIEM
   900–1024px
========================================================= */

@media (min-width: 900px) and (max-width: 1024px) {

    /*
     * Laiema tableti puhul võib pill juba suurem olla,
     * sest horisontaalset ruumi on rohkem.
     */
    .event-pill {
        scale: 0.86;
    }


    .event-pills-track {
        padding-bottom: 70px;
    }
}


/* =========================================================
   DESKTOP
   1025px+
========================================================= */

@media (min-width: 1025px) {

    .event-pill {
        scale: 1;
    }
}


/* =========================================================
   SUUREM DESKTOP
   1200px+
========================================================= */

@media (min-width: 1200px) {

    /*
     * Desktopis Figma järgi tugevamad kalded.
     */

    .event-pill-item:nth-child(3) {
        --rotate: -9deg;
    }

    .event-pill-item:nth-child(4) {
        --rotate: -22deg;
    }

    .event-pill-item:nth-child(7) {
        --rotate: 9deg;
    }
}


/* =========================================================
   MOBILE INFINITE SLIDER
   kuni 767px
========================================================= */

@media (max-width: 767px) {

    .event-pills-viewport {

        /*
         * Mobile slideri vertikaalne asukoht.
         */
        --mobile-lift: clamp(
            45px,
            12vw,
            70px
        );


        position: relative;


        top:
            calc(
                0px - var(--mobile-lift)
            );


        width: 100%;

        overflow: visible;


        margin-bottom:
            calc(
                0px - var(--mobile-lift)
            );
    }


    .event-pills-track {

        /*
         * Mobile pillide päris vahe.
         */
        --mobile-gap: clamp(
            22px,
            6vw,
            36px
        );


        /*
         * Vertikaalne layout-ruum.
         */
        --mobile-space: clamp(
            65px,
            17vw,
            90px
        );


        position: relative;

        width: max-content;


        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        justify-content: flex-start;
        align-items: flex-end;


        gap: 0 !important;


        padding-top: var(--mobile-space);
        padding-bottom: 24px;


        margin: 0;


        transform: translateX(0);


        animation:
            event-pills-marquee
            22s
            linear
            infinite;


        will-change: transform;
    }


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

    .event-pill-item {
        --drop: 0px;
        --rotate: 0deg;

        flex: 0 0 auto;

        width: max-content;
        min-width: max-content;


        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;

        margin-right:
            var(--mobile-gap) !important;


        transform: none;
    }


    /*
     * Mobile riputusjoon.
     */
    .event-pill-item::before {
        top: -100vh;
        height: 100vh;

        width: 2px;

        background:
            rgba(29, 127, 44, 0.42);
    }


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

    .event-pill {
        flex: 0 0 auto;

        width: max-content;
        min-width: max-content;

        margin: 0 !important;

        scale: 1;

        transform: none;

        white-space: nowrap;
    }


    .event-pill .elementor-heading-title {
        white-space: nowrap;

        margin: 0 !important;
    }


    /*
     * Infinite loopi teine komplekt.
     */
    .event-pill-clone {
        display: flex;
    }
}


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

@keyframes event-pills-marquee {

    from {
        transform: translateX(0);
    }

    to {
        transform:
            translateX(
                calc(
                    -1 * var(--event-loop-distance)
                )
            );
    }
}


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

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

    .event-pills-track {
        animation: none !important;
    }
}