/* Homepage sections (Home 2026). Loaded only on pages that use them; see functions.php. */

/* Intro: photo on the left, a beige circle on the right holding the text.
   Proportions come from the Affinity design (section is 2.5:1). The section's own
   Elementor setting "Overflow: Hidden" clips the circle. Breakpoints match Elementor's:
   tablet ≤992px, tablet extra ≤1200px, mobile ≤768px. */
.ep-intro {
    position: relative;
}

.ep-intro::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 39.8%;
    z-index: 0;
    width: 73.75%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: #E5DDD7;
    transform: translateY(-50%);
}

.ep-intro > .e-con {
    position: relative;
    z-index: 1;
}

@media (min-width: 993px) {
    .ep-intro {
        aspect-ratio: 2.5;
    }
}

/* Tablet extra: the text column wraps more, so give the section extra height. */
@media (min-width: 993px) and (max-width: 1200px) {
    .ep-intro {
        aspect-ratio: 2.15;
    }
}

/* Tablet and down, the section stacks: text first, then the photo along the bottom edge
   (photo position and padding are Elementor settings). The circle's lowest point sits 36vw
   above the bottom, so it arcs down over the treetops and leaves the three men in view. */
@media (max-width: 992px) {
    .ep-intro::after {
        top: auto;
        bottom: 36vw;
        left: 50%;
        width: 260vw;
        transform: translateX(-50%);
    }
}

/* How we help: pinned horizontal scroll */
.ep-way-list ul {
    margin: 0;
    padding-left: 1.1em;
}

.ep-way .elementor-divider {
    padding: 4px 0;
}

/* Blue lines over the divider and under the card body. eden-home.js sets --ep-fill: how far the
   line has filled from the left as the card scrolls into focus. */
.ep-way .elementor-divider,
.ep-way-body > .elementor-widget:last-child {
    position: relative;
}

.ep-way .elementor-divider::after,
.ep-way-body > .elementor-widget:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    width: calc(var(--ep-fill, 0) * 100%);
    height: 3px;
    background-color: #82D4F9;
}

.ep-way .elementor-divider::after {
    top: 50%;
    translate: 0 -50%;
}

.ep-way-body > .elementor-widget:last-child::after {
    bottom: -40px;
}

.pin-spacer:has(> .ep-hscroll) {
    background: #374157;
}

/* Elementor gives every container "transition: transform .4s". GSAP sets the track's transform
   every frame, so that transition made the cards trail and wobble behind the scroll. */
.ep-hscroll,
.ep-hscroll-track {
    transition: none !important;
}

/* eden-home.js adds .is-pinned only once it has actually pinned the section. Until then (script
   blocked or failed, reduced motion), the cards stay a swipeable row, so all five are reachable. */
.ep-hscroll.is-pinned .ep-hscroll-track {
    width: max-content !important;
    will-change: transform;
}

/* The site sets scroll-behavior: smooth on <html>, which fights ScrollTrigger's pin adjustments. */
html:has(.ep-hscroll) {
    scroll-behavior: auto;
}

/* While pinned the section fills at least the space under the header with its content centered,
   so the space above the heading and below the cards is always equal. The padding keeps that
   space when the window is too short for the content. Elementor sizes containers through
   --min-height, so this sets that variable (with .e-con to beat its reset). */
@media (min-width: 769px) {
    .ep-hscroll.is-pinned.e-con {
        --min-height: calc(100vh - var(--ep-header-h, 0px));
        padding-top: clamp(40px, 7vh, 100px) !important;
        padding-bottom: clamp(40px, 7vh, 100px) !important;
        justify-content: center;
    }
}

/* Above phone width without pinning: a swipeable row instead. */
@media (min-width: 769px) {
    .ep-hscroll:not(.is-pinned) .ep-hscroll-track {
        width: auto !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .ep-hscroll:not(.is-pinned) .ep-hscroll-track > .ep-way {
        scroll-snap-align: start;
    }
}

/* Phones: the cards simply stack. */
@media (max-width: 768px) {
    .ep-hscroll-track {
        width: auto !important;
        will-change: auto;
    }

    .ep-way-body.e-con {
        --width: auto !important;
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Stories of Transformation */
.ep-story .ep-story-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.ep-story .ep-story-photo {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
}

/* Connecting the Head with the Heart */
.ep-channel-card {
    transition: box-shadow 0.3s ease;
}

/* The card turns dark blue on hover (its Elementor Background > Hover setting) and the text turns
   white with it. Elementor can't color children on the card's hover, so that part lives here. */
.ep-channel-card :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-button) {
    /* Matches the card's background hover transition (Elementor setting) and its outline draw. */
    transition: color 0.9s ease;
}

.elementor .elementor-element.ep-channel-card:hover :is(.elementor-heading-title, .elementor-widget-text-editor, .elementor-button) {
    color: #FFFFFF;
}

/* "Dive in to channel": one element, caret drawn after the text */
.ep-caret-button .elementor-heading-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ep-caret-button .elementor-heading-title::after {
    content: "";
    flex-shrink: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 7px solid currentColor;
    transition: transform 0.2s ease;
}

.ep-channel-card:hover .ep-caret-button .elementor-heading-title::after {
    transform: translateX(3px);
}

/* Parallax photos: add the CSS class "ep-parallax" to an Image widget (Advanced > CSS Classes).
   eden-home.js zooms the photo in slightly and drifts it up inside its frame as it scrolls past;
   the frame clips the overflow. Without the script, or with reduced motion, the photo sits still. */
.ep-parallax {
    overflow: hidden;
}

/* Elementor's image hover transitions would make the photo trail behind the scroll. */
.ep-parallax img {
    transition: none !important;
}

/* Text reveal: add the CSS class "ep-text-reveal" to a Heading or Text Editor widget (Advanced >
   CSS Classes). eden-home.js splits the text into letters that fill in as it scrolls into view.
   Each word stays on one line, so the text wraps exactly as it did before the split. */
.ep-reveal-word {
    white-space: nowrap;
}

/* Border draw: add the CSS class "ep-draw-border" to a Button widget or a container (Advanced >
   CSS Classes). On hover a blue outline draws in from the middle of the top and bottom edges and
   meets halfway down the sides; it draws back out when the pointer leaves. eden-home.js builds
   the outline's SVG. */
.ep-draw-box {
    position: relative;
}

.ep-draw-line {
    position: absolute;
    z-index: 2;
    overflow: visible;
    pointer-events: none;
    stroke: #82D4F9;
    stroke-width: 4px;
}

/* Buttons get a finer line, drawn over their own thin border. */
:is(a, button).ep-draw-box > .ep-draw-line {
    --ep-draw-speed: 0.6s;
    stroke-width: 2px;
}

/* Never filled. Elementor colors every SVG inside a button (a Form's submit button targets
   "svg *" with a long selector), which would fill the outline in. */
.ep-draw-line path {
    fill: none !important;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    /* Cards draw a little slower than buttons. */
    transition: stroke-dashoffset var(--ep-draw-speed, 0.9s) cubic-bezier(0.65, 0, 0.35, 1);
}

.ep-draw-box:hover > .ep-draw-line path,
.ep-draw-box:focus-visible > .ep-draw-line path,
.ep-draw-box:focus-within > .ep-draw-line path {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ep-draw-line path {
        transition: none;
    }
}

/* Scroll-drawn outline: add the CSS class "ep-draw-scroll" to a container. eden-home.js draws
   it in step with the scroll, so it skips the hover transition, and it sits under anything with
   its own z-index (like the newsletter's butterfly). */
.ep-draw-scroll {
    position: relative;
}

.ep-draw-scroll > .ep-draw-line {
    z-index: 1;
}

.ep-draw-scroll > .ep-draw-line path {
    transition: none;
}