/**
 * Elementor Compatibility Styles for JejeSports
 *
 * Ensures the theme's 3D interactions, scroll effects, and
 * responsive design work correctly within Elementor's canvas.
 */

/* Elementor canvas should not constrain the theme */
.elementor-editor-active .elementor-section-wrap {
    max-width: none;
}

/* Ensure full-width sections in Elementor */
.elementor-section.jjs-section-pad,
.elementor-section .jjs-section-pad {
    padding-left: 7.2vw;
    padding-right: 7.2vw;
}

/* 3D Tilt cards inside Elementor */
.elementor-widget-jjs-tilt-card .jjs-tilt-card,
.elementor-widget-jjs-gallery-item .jjs-tilt-card {
    transition: transform 0.35s ease;
    will-change: transform;
    transform-style: preserve-3d;
}

/* Scroll reveal inside Elementor sections */
.elementor-section.jjs-reveal-control-yes,
.elementor-column.jjs-reveal-control-yes,
.elementor-widget.jjs-reveal-control-yes {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.elementor-section.jjs-reveal-control-yes.jjs-revealed,
.elementor-column.jjs-reveal-control-yes.jjs-revealed,
.elementor-widget.jjs-reveal-control-yes.jjs-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* 3D tilt on Elementor widgets */
.elementor-widget.jjs-tilt-control-yes {
    transition: transform 0.35s ease;
    will-change: transform;
    transform-style: preserve-3d;
}

/* Hero widget inside Elementor */
.elementor-widget-jjs-hero .jjs-hero {
    min-height: calc(100vh - 92px);
}

/* Work CTA inside Elementor */
.elementor-widget-jjs-work-cta .jjs-work-section {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Marquee inside Elementor */
.elementor-widget-jjs-marquee .jjs-marquee {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Statement inside Elementor */
.elementor-widget-jjs-statement .jjs-statement {
    position: relative;
}

/* Gallery grid inside Elementor */
.elementor-widget-jjs-gallery-item {
    height: 395px;
}

/* Ensure Elementor doesn't add unwanted padding */
.elementor-widget-jjs-hero .elementor-widget-container,
.elementor-widget-jjs-tilt-card .elementor-widget-container,
.elementor-widget-jjs-statement .elementor-widget-container,
.elementor-widget-jjs-work-cta .elementor-widget-container,
.elementor-widget-jjs-marquee .elementor-widget-container,
.elementor-widget-jjs-service-item .elementor-widget-container,
.elementor-widget-jjs-gallery-item .elementor-widget-container,
.elementor-widget-jjs-contact-form .elementor-widget-container {
    padding: 0;
    margin: 0;
}

/* Responsive adjustments for Elementor */
@media (max-width: 800px) {
    .elementor-widget-jjs-hero .jjs-hero {
        display: flex;
        flex-direction: column;
        min-height: auto;
        padding-top: 50px;
    }

    .elementor-widget-jjs-hero .jjs-hero-art {
        order: -1;
        height: 350px;
        margin: 0 -6vw;
    }

    .elementor-widget-jjs-gallery-item {
        height: 280px;
    }

    .elementor-section.jjs-section-pad,
    .elementor-section .jjs-section-pad {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}