/* =========================
VERSION: 2.3.1
Muudatused: 10.09.2026
========================= */


/* =========================================================
   SOCIAL GALLERY WRAPPER
========================================================= */

.social-gallery-wrap {
    width: 100%;
    max-width: 1440px;

    margin-inline: auto;

    box-sizing: border-box;
}


/* =========================================================
   DESKTOP / BASE GALLERY
========================================================= */

.social-gallery {
    --card-width: clamp(180px, 42%, 350px);

    position: relative;

    display: block;

    width: 100%;

    margin: 0;

    overflow: visible;

    isolation: isolate;
}


/* =========================================================
   SOCIAL CARDS / DESKTOP BASE
========================================================= */

.social-card {
    position: absolute;
    bottom: 0;

    width: var(--card-width);
    height: auto;

    aspect-ratio: 350 / 450;

    margin: 0;

    overflow: hidden;

    z-index: 1;

    --shift: 0%;
    --scale: 1;

    transform:
        translateX(var(--shift))
        scale(var(--scale));

    transform-origin: bottom center;

    cursor: pointer;

    transition:
        transform .35s ease,
        left .6s cubic-bezier(.22, .61, .36, 1);
}


/*
 * Esimene kaart jääb flow sisse.
 * Annab desktopis galleryle automaatselt kõrguse.
 */
.social-card:nth-child(1) {
    position: relative;

    left: 0;

    --shift: 0%;
}


/* 2. kaart */
.social-card:nth-child(2) {
    left: 25%;

    --shift: -25%;
}


/* 3. kaart */
.social-card:nth-child(3) {
    left: 50%;

    --shift: -50%;
}


/* 4. kaart */
.social-card:nth-child(4) {
    left: 75%;

    --shift: -75%;
}


/* 5. kaart */
.social-card:nth-child(5) {
    left: 100%;

    --shift: -100%;
}


/* =========================================================
   CARD OVERLAY / BASE
========================================================= */

.social-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(10, 25, 18, .52);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

    transition: opacity .3s ease;
}


/* =========================================================
   CARD ARROW / BASE
========================================================= */

.social-card-arrow {
    position: relative;

    opacity: 0;

    z-index: 3;

    transition:
        opacity .3s ease,
        transform .3s ease;
}


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

@media (min-width: 1025px) and (hover: hover) {

    .social-card:hover {
        z-index: 50;

        --scale: 1.12;
    }


    .social-card:hover::after {
        opacity: 1;
    }


    .social-card:hover .social-card-arrow {
        opacity: 1;
    }
}


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

@media (min-width: 1025px) {

    /*
     * Täpselt sinu vana desktopi lahendus:
     * kompaktne 1120px kaardipakk.
     */
    .social-gallery {
        max-width: 1120px;

        margin-inline: auto;
    }


    /*
     * Desktopis carousel CTA teksti/progressi EI OLE.
     */
    .social-card-arrow::before,
    .social-card-arrow::after {
        content: none;
    }
}


/* =========================================================
   TABLET + MOBILE CAROUSEL
   kuni 1024px
========================================================= */

@media (max-width: 1024px) {

    .social-gallery {

        /*
         * JS progress:
         * 0 -> 1
         */
        --carousel-progress: 0;


        /*
         * Tablet default.
         * Mobile override tuleb allpool.
         */
        --card-width:
            clamp(
                210px,
                36vw,
                300px
            );


        /*
         * Kuna tablet/mobile'is on kõik kaardid absolute,
         * määrame gallery kõrguse ise.
         */
        height:
            calc(
                var(--card-width) * 1.285714
            );


        margin-inline: auto;
    }


    /* =====================================================
       RESET DESKTOP FLOW
    ===================================================== */

    .social-card,
    .social-card:nth-child(1),
    .social-card:nth-child(2),
    .social-card:nth-child(3),
    .social-card:nth-child(4),
    .social-card:nth-child(5) {

        position: absolute;

        bottom: 0;

        --scale: 1;
    }


    /* =====================================================
       TABLET/MOBILE FALLBACK
       Kui JS mingil põhjusel ei kõivitu
    ===================================================== */

    .social-card:nth-child(1) {
        left: 0%;

        --shift: 0%;
        --scale: .92;

        z-index: 1;
    }


    .social-card:nth-child(2) {
        left: 27%;

        --shift: -27%;
        --scale: .96;

        z-index: 3;
    }


    .social-card:nth-child(3) {
        left: 50%;

        --shift: -50%;
        --scale: 1.08;

        z-index: 20;
    }


    .social-card:nth-child(4) {
        left: 73%;

        --shift: -73%;
        --scale: .96;

        z-index: 3;
    }


    .social-card:nth-child(5) {
        left: 100%;

        --shift: -100%;
        --scale: .92;

        z-index: 1;
    }


    /* Fallback aktiivne kaart */
    .social-card:nth-child(3)::after {
        opacity: 1;
    }


    /* =====================================================
       JS CAROUSEL POSITIONS
    ===================================================== */

    .social-gallery.is-carousel-ready
    .social-card.is-pos-0 {

        left: 0%;

        --shift: 0%;
        --scale: .92;

        z-index: 1;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-1 {

        left: 27%;

        --shift: -27%;
        --scale: .96;

        z-index: 3;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-2 {

        left: 50%;

        --shift: -50%;
        --scale: 1.08;

        z-index: 20;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-3 {

        left: 73%;

        --shift: -73%;
        --scale: .96;

        z-index: 3;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-4 {

        left: 100%;

        --shift: -100%;
        --scale: .92;

        z-index: 1;
    }


    /* =====================================================
       ACTIVE OVERLAY
    ===================================================== */

    /*
     * Kui JS töötab,
     * eemaldame fallback overlay.
     */
    .social-gallery.is-carousel-ready
    .social-card::after {

        opacity: 0;
    }


    /*
     * Aktiivne kaart.
     */
    .social-gallery.is-carousel-ready
    .social-card.is-pos-2::after {

        opacity: 1;
    }


    /* =====================================================
       CTA
       nool + tekst + progress
    ===================================================== */

    .social-card-arrow {
        position: absolute;

        left: 50%;
        bottom: 28px;

        width: 150px;

        transform:
            translateX(-50%)
            translateY(8px);

        text-align: center;

        color: #fff;

        opacity: 0;

        pointer-events: none;

        z-index: 5;
    }


    /*
     * Fallback:
     * kolmas kaart aktiivne.
     */
    .social-card:nth-child(3)
    .social-card-arrow {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }


    /*
     * JS käivitub:
     * nullime fallback CTA.
     */
    .social-gallery.is-carousel-ready
    .social-card
    .social-card-arrow {

        opacity: 0;

        transform:
            translateX(-50%)
            translateY(8px);
    }


    /*
     * JS aktiivne kaart.
     */
    .social-gallery.is-carousel-ready
    .social-card.is-pos-2
    .social-card-arrow {

        opacity: 1;

        transform:
            translateX(-50%)
            translateY(0);
    }


    /* =====================================================
       ARROW ICON
    ===================================================== */

    .social-card-arrow i,
    .social-card-arrow svg {

        display: block;

        margin-inline: auto;

        margin-bottom: 24px;

        color: #fff;
    }


    .social-card-arrow svg {

        width: 32px;
        height: 32px;

        fill: none;
    }


    .social-card-arrow svg path {

        stroke: currentColor;
    }


    /* =====================================================
       "VAATA INSTAGRAMIS"
    ===================================================== */

    .social-card-arrow::after {

        content: "Vaata instagramis";

        position: absolute;

        left: 50%;
        bottom: 7px;

        transform:
            translateX(-50%);

        width: max-content;

        color: #fff;

        font-size: 13px;
        font-weight: 500;
        line-height: 1.2;

        white-space: nowrap;
    }


    /* =====================================================
       PROGRESS LINE
    ===================================================== */

    .social-card-arrow::before {

        content: "";

        position: absolute;

        left: 50%;
        bottom: -6px;

        transform:
            translateX(-50%);

        width: 115px;
        height: 2px;

        border-radius: 999px;


        /*
         * Valge osa kasvab JS-i kaudu.
         * Hall osa jääb taustaks.
         */
        background:
            linear-gradient(
                to right,
                #fff,
                #fff
            )
            left center /
            calc(
                var(--carousel-progress) * 100%
            )
            100%
            no-repeat,

            rgba(255, 255, 255, .35);
    }
}


/* =========================================================
   TABLET
   768px – 1024px
========================================================= */

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

    .social-gallery {

        --card-width:
            clamp(
                220px,
                34vw,
                300px
            );
    }


    /*
     * Tabletis veidi vähem agressiivne aktiivne kaart.
     */
    .social-gallery.is-carousel-ready
    .social-card.is-pos-2 {

        --scale: 1.06;
    }


    .social-card-arrow {

        bottom: 27px;

        width: 140px;
    }


    .social-card-arrow svg {

        width: 30px;
        height: 30px;
    }


    .social-card-arrow::after {

        font-size: 13px;
    }


    .social-card-arrow::before {

        width: 110px;
    }
}


/* =========================================================
   MOBILE
   kuni 767px
========================================================= */

@media (max-width: 767px) {

    .social-gallery {

        /*
         * Figma mobile suund:
         * aktiivne kaart suur,
         * kõrvalkaardid paistavad tagant välja.
         */
        --card-width:
            clamp(
                180px,
                56vw,
                240px
            );
    }


    /* =====================================================
       MOBILE FALLBACK POSITIONS
    ===================================================== */

    .social-card:nth-child(1) {

        left: 2%;

        --shift: 0%;
        --scale: .90;
    }


    .social-card:nth-child(2) {

        left: 25%;

        --shift: -25%;
        --scale: .94;
    }


    .social-card:nth-child(3) {

        left: 50%;

        --shift: -50%;
        --scale: 1.10;

        z-index: 20;
    }


    .social-card:nth-child(4) {

        left: 75%;

        --shift: -75%;
        --scale: .94;
    }


    .social-card:nth-child(5) {

        left: 98%;

        --shift: -100%;
        --scale: .90;
    }


    /* =====================================================
       MOBILE JS CAROUSEL
    ===================================================== */

    .social-gallery.is-carousel-ready
    .social-card.is-pos-0 {

        left: 2%;

        --shift: 0%;
        --scale: .90;

        z-index: 1;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-1 {

        left: 25%;

        --shift: -25%;
        --scale: .94;

        z-index: 3;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-2 {

        left: 50%;

        --shift: -50%;
        --scale: 1.10;

        z-index: 20;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-3 {

        left: 75%;

        --shift: -75%;
        --scale: .94;

        z-index: 3;
    }


    .social-gallery.is-carousel-ready
    .social-card.is-pos-4 {

        left: 98%;

        --shift: -100%;
        --scale: .90;

        z-index: 1;
    }


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

    .social-card-arrow {

        bottom: 25px;

        width: 130px;
    }


    .social-card-arrow i,
    .social-card-arrow svg {

        margin-bottom: 22px;
    }


    .social-card-arrow svg {

        width: 28px;
        height: 28px;
    }


    .social-card-arrow::after {

        font-size: 12px;
    }


    .social-card-arrow::before {

        width: 100px;
    }
}


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

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

    .social-card,
    .social-card::after,
    .social-card-arrow {

        transition: none;
    }
}

/* =========================================================
   SOCIAL SECTION LAYOUT SAFETY
   Elementor Atomic frontend override
========================================================= */

.e-con.social-section {
    flex-direction: column !important;
}

/* =========================================================
   ELEMENTOR EDITOR PREVIEW SAFETY
   Frontend jääb puutumata; editoris tehakse galerii
   lihtsamaks, et kaarte oleks mugav valida ja muuta.
========================================================= */

.elementor-editor-active .social-section,
.elementor-editor-preview .social-section {
    flex-direction: column !important;
}

.elementor-editor-active .social-gallery-wrap,
.elementor-editor-preview .social-gallery-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.elementor-editor-active .social-gallery,
.elementor-editor-preview .social-gallery {
    display: flex !important;
    position: relative !important;

    align-items: flex-end !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 1120px !important;
    height: auto !important;

    margin-inline: auto !important;

    overflow: visible !important;
}

.elementor-editor-active .social-card,
.elementor-editor-active .social-card:nth-child(1),
.elementor-editor-active .social-card:nth-child(2),
.elementor-editor-active .social-card:nth-child(3),
.elementor-editor-active .social-card:nth-child(4),
.elementor-editor-active .social-card:nth-child(5),
.elementor-editor-preview .social-card,
.elementor-editor-preview .social-card:nth-child(1),
.elementor-editor-preview .social-card:nth-child(2),
.elementor-editor-preview .social-card:nth-child(3),
.elementor-editor-preview .social-card:nth-child(4),
.elementor-editor-preview .social-card:nth-child(5) {
    position: relative !important;

    left: auto !important;
    bottom: auto !important;

    flex: 0 0 20% !important;

    width: 20% !important;
    max-width: 220px !important;
    height: auto !important;

    margin: 0 !important;

    transform: none !important;

    z-index: 1 !important;
}

.elementor-editor-active .social-card::after,
.elementor-editor-preview .social-card::after {
    opacity: 0 !important;
}

.elementor-editor-active .social-card-arrow,
.elementor-editor-preview .social-card-arrow {
    opacity: 0 !important;
    pointer-events: none !important;
}